wingsfly

wingsfly

Observer
HomeArchives

Using Copilot to Guide Tauri Development

49
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The document outlines the development of a Tauri application using React and React Router on a Windows 11 system with VSCode. The main features include: 1. **Navigation Structure**: The app's homepage is modified to have a sidebar for navigation, displaying links to different functional pages. Clicking on a menu item loads the corresponding page on the right side. 2. **Code Implementation**: - A `Home` component is created and extracted into a separate `Home.tsx` file. - The `App.tsx` file is updated to import and use the `Home` component along with other features. - React Router is used to manage page navigation. 3. **CSS Adjustments**: The CSS is modified to ensure that the sidebar occupies the full height of the page, enhancing the layout. 4. **Functionality**: The app includes state management for greeting messages and user input, utilizing Tauri's API for interaction. Overall, the document provides a step-by-step guide for setting up the application structure and ensuring a functional user interface.

Environment#

System: Windows 11
IDE: VSCode + Github Copilot Chat + Rust + Tauri plugin
Env: npm, Rust
The project framework has been established through npm create tauri-app@latest.
The following titles are all text entered in the copilot chat in VSCode, followed by updates and replacements of the code output by Copilot.

Modify the homepage to: the left side is the navigation area, displaying page links for different functions in a tree view; after clicking a function menu item in the left navigation area, the corresponding function page loads on the right side.#

Note

This references 'App.tsx'

GitHub Copilot: To achieve this functionality, we need to perform the following steps in App.tsx:

  1. Create a navigation bar component that displays page links for different functions in a tree view.
  2. Use React Router to handle page navigation.
  3. Load the corresponding function page in the right area.

First, install React Router:

npm install react-router-dom

Then, modify the App.tsx file as follows:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

function Home() {
  return <h2>Home Page</h2>;
}

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

At the same time, update the App.css file to accommodate the new layout:

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

Thus, the left side will display the navigation bar, and the right side will load the corresponding function page based on the selection from the navigation bar.

Similar code found with 1 license type

Create an independent Home component#

GitHub Copilot: Okay, we can extract the Home component into a separate file. Here are the steps:

  1. Create a new file Home.tsx.
  2. Move the Home component code to the Home.tsx file.
  3. Import the Home component in App.tsx.

First, create the Home.tsx file and add the following code:

// Home.tsx
import React from "react";

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

Then, modify the App.tsx file to import the Home component:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the Home component has been extracted into an independent file.

Similar code found with 1 license type

Make the left navigation bar stretch vertically to fill the page#

Note

The left navigation bar only occupies the area containing text, so we hope it can fill the entire height.

GitHub Copilot: To make the left navigation bar stretch vertically to fill the page, we need to adjust the CSS styles. The specific steps are as follows:

  1. Modify the App.css file to ensure the navigation bar occupies the full height of the page.
  2. Ensure the container's height also fills the page.

Here is the updated App.css file:

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

Ensure that the App.tsx file contains the following code:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the left navigation bar will stretch vertically to fill the page height.

Similar code found with 1 license type

The right page and the left navigation bar should be top-aligned#

Note

There was a situation where the right content area was displayed below the navigation area; 4, 5, and 6 were all attempts to fix this prompt, and later it was found that the style of .container in CSS was not completely replaced, and after replacing it again, it displayed normally.

GitHub Copilot: To ensure that the right page and the left navigation bar are top-aligned, we need to adjust the CSS styles. The specific steps are as follows:

  1. Ensure that the container's height fills the page, and that both the navigation bar and content area start from the top.
  2. Update the App.css file to ensure the layout is correct.

Here is the updated App.css file:

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* Ensure child elements are top-aligned */
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
  height: 100%;
}

Ensure that the App.tsx file contains the following code:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the right page and the left navigation bar will be top-aligned.

Similar code found with 1 license type

The child elements in .container are arranged in a left-right layout#

GitHub Copilot: To ensure that the child elements in .container are arranged in a left-right layout, we need to adjust the CSS styles. The specific steps are as follows:

  1. Ensure that .container uses flex layout and that child elements are arranged left and right.
  2. Remove duplicate .container style definitions.

Here is the updated App.css file:

/* App.css */
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* Ensure child elements are top-aligned */
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
  height: 100%;
}

Ensure that the App.tsx file contains the following code:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the child elements in .container will be arranged in a left-right layout and top-aligned.

Similar code found with 1 license type

Set the background color of the navigation bar to the system background color#

Note

The system theme is dark, but the default background color is white, and this code did not take effect. Finally, I manually removed the background color configuration of .sidebar.

GitHub Copilot: To set the background color of the navigation bar to the system background color, you can use the background-color property in CSS and set its value to the background system color. Here is the updated App.css file:

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* Ensure child elements are top-aligned */
}

.sidebar {
  width: 200px;
  background-color: var(--system-background-color, #f0f0f0); /* Use system background color */
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
  height: 100%;
}

.logo {
  height: 6em;
}

In the above code, var(--system-background-color, #f0f0f0) uses a CSS variable to set the background color. If the system background color is not defined, the default color #f0f0f0 will be used. You can adjust the default color as needed.

Move Feature1 into an independent module under the Features subdirectory#

GitHub Copilot: Okay, we can extract the Feature1 component into an independent file and place it in the Features subdirectory. Here are the steps:

  1. Create a new directory Features.
  2. In the Features directory, create a new file Feature1.tsx.
  3. Move the Feature1 component code to the Feature1.tsx file.
  4. Import the Feature1 component in App.tsx.

First, create the Features/Feature1.tsx file and add the following code:

// Features/Feature1.tsx
import React from "react";

function Feature1() {
  return <h2>Feature 1 Page</h2>;
}

export default Feature1;

Then, modify the App.tsx file to import the Feature1 component:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the Feature1 component has been extracted into an independent module in the Features subdirectory.

Similar code found with 1 license type

Similarly, move Feature2 into an independent file#

GitHub Copilot: Okay, we can extract the Feature2 component into an independent file and place it in the Features subdirectory. Here are the steps:

  1. In the Features directory, create a new file Feature2.tsx.
  2. Move the Feature2 component code to the Feature2.tsx file.
  3. Import the Feature2 component in App.tsx.

First, create the Features/Feature2.tsx file and add the following code:

// Features/Feature2.tsx
import React from "react";

function Feature2() {
  return <h2>Feature 2 Page</h2>;
}

export default Feature2;

Then, modify the App.tsx file to import the Feature2 component:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the Feature2 component has been extracted into an independent module in the Features subdirectory.

Similar code found with 1 license type

Adjust the page height to avoid scroll bars#

Note

The default content area has a scroll bar.

GitHub Copilot: To ensure that the page height is adjusted to avoid scroll bars, we need to ensure that both the container's height and the content's height are set correctly. We can use overflow: hidden to prevent the appearance of scroll bars and ensure that the content area does not exceed the viewport height.

Here is the updated App.css file:

/* App.css */
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scroll bars from appearing */
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* Ensure child elements are top-aligned */
}

.sidebar {
  width: 200px;
  padding: 10px;
  height: 100%;
  background-color: var(--system-background-color, #f0f0f0); /* Use system background color */
}

.content {
  flex-grow: 1;
  padding: 10px;
  height: 100%;
  overflow: auto; /* Allow content area to scroll */
}

Ensure that the App.tsx file contains the following code:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the page height will be adjusted to avoid scroll bars, and the content area will allow scrolling.

Similar code found with 1 license type

Ensure greetMsg displays on a new line#

Note

The reason here is to retain the greet interaction in the example, manually moving the code from App.tsx to Home.tsx, but the <p> tag did not take effect, and the text output area displayed on the same line. The issue was resolved in the next prompt by using a <div> tag.

GitHub Copilot: To ensure that greetMsg displays on a new line, we can place it in a paragraph (<p>) tag. Here is the updated Home.tsx file:

// Home.tsx
import React from "react";

function Home({ greetMsg }: { greetMsg: string }) {
  return (
    <div>
      <h2>Home Page</h2>
      <p>{greetMsg}</p>
    </div>
  );
}

export default Home;

At the same time, ensure that greetMsg is passed as a prop to the Home component in App.tsx:

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home greetMsg={greetMsg} />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, greetMsg will display in the Home component on a new line.

Similar code found with 1 license type

No need to pass greetMsg from App#

GitHub Copilot: Okay, we can define greetMsg directly in the Home component without needing to pass it from App. Here is the updated Home.tsx file:

// Home.tsx
import React, { useState } from "react";
import { invoke } from "@tauri-apps/api/core";

function Home() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <div>
      <h2>Home Page</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button onClick={greet}>Greet</button>
      <p>{greetMsg}</p>
    </div>
  );
}

export default Home;

At the same time, the App.tsx file does not need any modifications since greetMsg is no longer needed to be passed from App:

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/feature1">Feature 1</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, greetMsg will be defined and used in the Home component.

Similar code found with 2 license types

Rename Feature1 to ClipBoard#

GitHub Copilot: Okay, we can rename the Feature1 component to ClipBoard. Here are the steps:

  1. Rename the file Feature1.tsx to Features/ClipBoard.tsx.
  2. Update the component name to ClipBoard.
  3. Import the ClipBoard component in App.tsx.

First, rename the file Feature1.tsx to Features/ClipBoard.tsx and update the file content as follows:

// Features/ClipBoard.tsx
import React from "react";

function ClipBoard() {
  return <h2>ClipBoard Page</h2>;
}

export default ClipBoard;

Then, modify the App.tsx file to import the ClipBoard component:

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import ClipBoard from "./Features/ClipBoard";
import Feature2 from "./Features/Feature2";

function App() {
  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/clipboard">ClipBoard</Link>
            </li>
            <li>
              <Link to="/feature2">Feature 2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/clipboard" element={<ClipBoard />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Thus, the Feature1 component has been renamed to ClipBoard and is correctly imported and used in App.tsx.

On the ClipBoard page, display the most recent clipboard content, sorted in reverse chronological order, showing a maximum of 100 entries#

GitHub Copilot: To implement the ClipBoard page displaying the most recent clipboard content, sorted in reverse chronological order, showing a maximum of 100 entries, we need the following steps:

  1. Create a state to store clipboard content.
  2. Use the useEffect hook to simulate fetching clipboard content.
  3. Sort the clipboard content in reverse chronological order and limit the display to 100 entries.

Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";

interface ClipboardItem {
  content: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);

  useEffect(() => {
    // Simulate fetching clipboard content
    const fetchClipboardItems = () => {
      const items = [
        { content: "Item 1", timestamp: Date.now() - 1000 },
        { content: "Item 2", timestamp: Date.now() - 2000 },
        // Add more simulated data
      ];
      setClipboardItems(items);
    };

    fetchClipboardItems();
  }, []);

  // Sort in reverse chronological order and limit to 100 entries
  const sortedItems = clipboardItems
    .sort((a, b) => b.timestamp - a.timestamp)
    .slice(0, 100);

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <p>{item.content}</p>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Defined a ClipboardItem interface to represent clipboard content items.
  2. Used the useState hook to store clipboard content.
  3. Used the useEffect hook to simulate fetching clipboard content and store it in the state.
  4. Sorted the clipboard content in reverse chronological order and limited the display to 100 entries.
  5. Rendered the clipboard content list in the component.

You can replace the simulated data part with actual clipboard content fetching as needed.

Read the clipboard every second and add new content to the clipboard content list if it exists#

Note

Here, you need to manually add read/write permissions for the clipboard in src-tauri/capabilities/default.json, and the same applies to subsequent file operations. Also, the import in the Copilot code is still in Tauri v1 format, which needs to be manually adjusted to v2 format.

GitHub Copilot: To implement reading the clipboard every second and adding new content to the clipboard content list if it exists, we can use setInterval to read the clipboard content at regular intervals and handle it in the useEffect.

Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText } from "@tauri-apps/plugin-clipboard";

interface ClipboardItem {
  content: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        setClipboardItems((prevItems) => [
          { content, timestamp: Date.now() },
          ...prevItems,
        ]);
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  // Sort in reverse chronological order and limit to 100 entries
  const sortedItems = clipboardItems.slice(0, 100);

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <p>{item.content}</p>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Used the useState hook to store clipboard content and the last read content.
  2. Used the useEffect hook to set a timer that reads the clipboard content every second.
  3. If new content is read and is different from the last read content, it is added to the clipboard content list and the last read content is updated.
  4. Sorted the clipboard content in reverse chronological order and limited the display to 100 entries.
  5. Rendered the clipboard content list in the component.

Thus, every second, the clipboard content will be read, and new content will be added to the clipboard content list if it exists.

Display the time above the content#

GitHub Copilot: To display the time above the content, we need to adjust the rendering order in the ClipBoard.tsx file. Here is the updated code:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText } from "@tauri-apps/plugin-clipboard";

interface ClipboardItem {
  content: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        setClipboardItems((prevItems) => [
          { content, timestamp: Date.now() },
          ...prevItems,
        ]);
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  // Sort in reverse chronological order and limit to 100 entries
  const sortedItems = clipboardItems.slice(0, 100);

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we placed the time (<small>{new Date(item.timestamp).toLocaleString()}</small>) above the content (<p>{item.content}</p>). Thus, the time will be displayed above the content.

Provide "Copy" and "Delete" text links for each item, re-copying to the clipboard when clicked, and removing the item from the list when clicked#

GitHub Copilot: To implement providing "Copy" and "Delete" text links for each item, we need the following steps:

  1. Add "Copy" and "Delete" buttons.
  2. Implement the copy functionality to re-copy the content to the clipboard.
  3. Implement the delete functionality to remove the item from the list.

Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";

interface ClipboardItem {
  content: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        setClipboardItems((prevItems) => [
          { content, timestamp: Date.now() },
          ...prevItems,
        ]);
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  // Sort in reverse chronological order and limit to 100 entries
  const sortedItems = clipboardItems.slice(0, 100);

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
            <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
            <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Added "Copy" and "Delete" buttons.
  2. Implemented the handleCopy function to re-copy the content to the clipboard.
  3. Implemented the handleDelete function to remove the item from the list.
  4. Added "Copy" and "Delete" links in each list item and bound the respective event handling functions.

Thus, each item will provide "Copy" and "Delete" text links, re-copying to the clipboard when clicked and removing the item from the list when clicked.

Save both the content text and the MD5 value of the content in the list, and when new content has the same MD5 value as existing content, only update the time instead of adding a new record#

Note

Copying will generate a new record, so distinguishing by MD5 ensures unique display.

GitHub Copilot: To save both the content text and the MD5 value of the content in the list, and update the time instead of adding a new record when new content has the same MD5 value as existing content, we need the following steps:

  1. Install the crypto-js library to calculate the MD5 value.
  2. Modify the ClipboardItem interface to include the MD5 value.
  3. Calculate the MD5 value when reading clipboard content and check if there is an existing item with the same MD5 value.

First, install the crypto-js library:

npm install crypto-js

Then, update the ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import CryptoJS from "crypto-js";

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            return prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
          } else {
            return [{ content, md5, timestamp: Date.now() }, ...prevItems];
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  // Sort in reverse chronological order and limit to 100 entries
  const sortedItems = clipboardItems.slice(0, 100);

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
            <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
            <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Installed and imported the crypto-js library to calculate the MD5 value.
  2. Updated the ClipboardItem interface to include the md5 property.
  3. Calculated the MD5 value when reading clipboard content and checked if there is an existing item with the same MD5 value. If there is, we only update the timestamp; otherwise, we add a new record.

After updating the time for the same content, the list should be re-sorted by time#

GitHub Copilot: To ensure that after updating the time for the same content, the list is re-sorted by time, we need to sort the list after updating the timestamp. Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import CryptoJS from "crypto-js";

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
            <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
            <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we ensure that after updating the timestamp, we sort the list. We also ensure that when adding new content, the list is sorted and limited to 100 entries.

Thus, when the same content's timestamp is updated, the list will be re-sorted by time.

After re-sorting, the page should refresh to display in the new order#

Note

After sorting, the page did not refresh, so a forced refresh is required.

GitHub Copilot: To ensure that after re-sorting the page displays in the new order, we need to ensure that the sorted list is used in the rendering. Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import CryptoJS from "crypto-js";

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
            <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
            <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we ensure that the sorted list is used in the rendering. Thus, when the list is re-sorted, the page will display in the new order.

Alternate rows should be distinguished by different background colors#

Note

UI optimization.

GitHub Copilot: To achieve alternating rows with different background colors, we can use CSS styles to implement a striped effect. Here is the updated ClipBoard.tsx file and the corresponding CSS styles:

First, update the ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import CryptoJS from "crypto-js";
import "./ClipBoard.css"; // Import CSS file

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index} className={index % 2 === 0 ? "even" : "odd"}>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
            <p>{item.content}</p>
            <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
            <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

Then, create the ClipBoard.css file and add the following styles:

/* ClipBoard.css */
ul {
  list-style-type: none;
  padding: 0;
}

li.even {
  background-color: #f9f9f9;
}

li.odd {
  background-color: #e9e9e9;
}

li {
  padding: 10px;
  margin: 5px 0;
}

a {
  margin-right: 10px;
}

In this implementation, we:

  1. Imported the ClipBoard.css file in the ClipBoard.tsx file.
  2. Used the className property to add different CSS classes (even and odd) to alternating rows.
  3. Defined the background colors for the even and odd classes in the ClipBoard.css file.

Thus, alternating rows will be distinguished by different background colors.

Adjust the background color of the content to a dark tone, and the text to a high-contrast color#

GitHub Copilot: To adjust the background color of the content to a dark tone and the text to a high-contrast color, we can update the styles in the ClipBoard.css file. Here is the updated ClipBoard.css file:

/* ClipBoard.css */
ul {
  list-style-type: none;
  padding: 0;
}

li.even {
  background-color: #333; /* Dark tone background */
  color: #fff; /* High contrast text color */
}

li.odd {
  background-color: #444; /* Dark tone background */
  color: #fff; /* High contrast text color */
}

li {
  padding: 10px;
  margin: 5px 0;
}

a {
  margin-right: 10px; /* High contrast link color */
}

a:hover {
  text-decoration: underline;
}

In this implementation, we:

  1. Set the background color of li.even and li.odd to #333 and #444, respectively, for a dark tone background.
  2. Set the text color of li.even and li.odd to #fff for high contrast text color.
  3. Set the link color to #1e90ff for high contrast link color and added an underline on hover.

Thus, the background color of the content will be adjusted to a dark tone, and the text will be adjusted to a high-contrast color.

Merge the time and operation buttons into one line#

GitHub Copilot: To merge the time and operation buttons into one line, we can use CSS Flexbox layout. Here is the updated ClipBoard.tsx file and the corresponding CSS styles:

First, update the ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import CryptoJS from "crypto-js";
import "./ClipBoard.css"; // Import CSS file

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index} className={index % 2 === 0 ? "even" : "odd"}>
            <div className="item-header">
              <small>{new Date(item.timestamp).toLocaleString()}</small>
              <div>
                <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
                <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
              </div>
            </div>
            <p>{item.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

Then, update the ClipBoard.css file and add the following styles:

/* ClipBoard.css */
ul {
  list-style-type: none;
  padding: 0;
}

li.even {
  background-color: #333; /* Dark tone background */
  color: #fff; /* High contrast text color */
}

li.odd {
  background-color: #444; /* Dark tone background */
  color: #fff; /* High contrast text color */
}

li {
  padding: 10px;
  margin: 5px 0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  margin-right: 10px; /* High contrast link color */
}

a:hover {
  text-decoration: underline;
}

In this implementation, we:

  1. Placed the time and operation buttons in a div container in the ClipBoard.tsx file and added the item-header class.
  2. Defined the item-header class in the ClipBoard.css file, using Flexbox layout to merge the time and operation buttons into one line and align them at both ends.

Thus, the time and operation buttons will be merged into one line, and the content's background color will be adjusted to a dark tone, with text adjusted to a high-contrast color.

Save the current content list and time information to the history.json file under appdata every minute#

Note

Persistent saving of history records. The read and write APIs here also output in v1 format, so the API call format needs to be manually adjusted to v2. You can open the API source code by Ctrl+clicking the function name in VSCode's Tauri plugin, where the comments provide the calling reference.

GitHub Copilot: To save the current content list and time information to the history.json file under appdata every minute, we need the following steps:

  1. Use the fs module to write to the file.
  2. Use setInterval to save the content list at regular intervals.
  3. Ensure to clear the interval when the component unmounts.

Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import { writeTextFile, BaseDirectory } from "@tauri-apps/api/fs";
import CryptoJS from "crypto-js";
import "./ClipBoard.css"; // Import CSS file

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const loadHistory = async () => {
      try {
        const data = await readTextFile("history.json", { dir: BaseDirectory.AppData });
        const items: ClipboardItem[] = JSON.parse(data);
        setClipboardItems(items);
      } catch (error) {
        console.error("Failed to load history:", error);
      }
    };

    loadHistory();
  }, []);

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  useEffect(() => {
    const saveInterval = setInterval(async () => {
      const data = JSON.stringify(clipboardItems, null, 2);
      await writeTextFile({ path: "history.json", contents: data }, { dir: BaseDirectory.AppData });
    }, 60000); // 1-minute interval

    return () => clearInterval(saveInterval);
  }, [clipboardItems]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index} className={index % 2 === 0 ? "even" : "odd"}>
            <div className="item-header">
              <small>{new Date(item.timestamp).toLocaleString()}</small>
              <div>
                <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
                <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
              </div>
            </div>
            <p>{item.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Used the @tauri-apps/api/fs module's writeTextFile function to write to the file.
  2. Set a timer using useEffect to save the current content list to the history.json file every minute.
  3. Cleared the timer when the component unmounts.

Thus, every minute, the current content list and time information will be saved to the history.json file under appdata.

When first entering the clipboard page, read the history.json file from the AppData directory and parse the content as the clipboard history, displaying it on the interface#

GitHub Copilot: To read the history.json file from the AppData directory when first entering the clipboard page and parse the content as the clipboard history to display on the interface, we need the following steps:

  1. Use the fs module to read the file.
  2. Read the history.json file and parse the content when the component mounts.
  3. Set the parsed content as the clipboard history.

Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import { readTextFile, writeTextFile, BaseDirectory } from "@tauri-apps/plugin-fs";
import CryptoJS from "crypto-js";
import "./ClipBoard.css"; // Import CSS file

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const loadHistory = async () => {
      try {
        const data = await readTextFile("history.json", { dir: BaseDirectory.AppData });
        const items: ClipboardItem[] = JSON.parse(data);
        setClipboardItems(items);
      } catch (error) {
        console.error("Failed to load history:", error);
      }
    };

    loadHistory();
  }, []);

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  useEffect(() => {
    const saveInterval = setInterval(async () => {
      const data = JSON.stringify(clipboardItems, null, 2);
      await writeTextFile({ path: "history.json", contents: data }, { dir: BaseDirectory.AppData });
    }, 60000); // 1-minute interval

    return () => clearInterval(saveInterval);
  }, [clipboardItems]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => (
          <li key={index} className={index % 2 === 0 ? "even" : "odd"}>
            <div className="item-header">
              <small>{new Date(item.timestamp).toLocaleString()}</small>
              <div>
                <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
                <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
              </div>
            </div>
            <p>{item.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Used the @tauri-apps/plugin-fs module's readTextFile function to read the file.
  2. Read the history.json file and parsed the content when the component mounted.
  3. Set the parsed content as the clipboard history and displayed it on the interface.

Thus, when first entering the clipboard page, the history.json file will be read from the AppData directory, and the content will be parsed as the clipboard history displayed on the interface.

Add exception handling for mapping ClipboardItems to interface elements, ignoring invalid data#

Note

When first opening, there was no history.json file, and after manually creating and building an empty JSON, an exception was thrown. Finally, after manually adding code to check if items are a valid array before assigning, it passed.

GitHub Copilot: To add exception handling for mapping clipboardItems to interface elements and ignore invalid data, we can add error handling logic when rendering the list items. Here is the updated ClipBoard.tsx file:

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";
import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import { readTextFile, writeTextFile, BaseDirectory } from "@tauri-apps/plugin-fs";
import CryptoJS from "crypto-js";
import "./ClipBoard.css"; // Import CSS file

interface ClipboardItem {
  content: string;
  md5: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);
  const [lastContent, setLastContent] = useState<string>("");

  useEffect(() => {
    const loadHistory = async () => {
      try {
        const data = await readTextFile("history.json", { dir: BaseDirectory.AppData });
        const items: ClipboardItem[] = JSON.parse(data);
        setClipboardItems(items);
      } catch (error) {
        console.error("Failed to load history:", error);
      }
    };

    loadHistory();
  }, []);

  useEffect(() => {
    const interval = setInterval(async () => {
      const content = await readText();
      if (content && content !== lastContent) {
        const md5 = CryptoJS.MD5(content).toString();
        setClipboardItems((prevItems) => {
          const existingItem = prevItems.find(item => item.md5 === md5);
          if (existingItem) {
            const updatedItems = prevItems.map(item =>
              item.md5 === md5 ? { ...item, timestamp: Date.now() } : item
            );
            return updatedItems.sort((a, b) => b.timestamp - a.timestamp);
          } else {
            const newItems = [{ content, md5, timestamp: Date.now() }, ...prevItems];
            return newItems.slice(0, 100).sort((a, b) => b.timestamp - a.timestamp);
          }
        });
        setLastContent(content);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [lastContent]);

  useEffect(() => {
    const saveInterval = setInterval(async () => {
      const data = JSON.stringify(clipboardItems, null, 2);
      await writeTextFile({ path: "history.json", contents: data }, { dir: BaseDirectory.AppData });
    }, 60000); // 1-minute interval

    return () => clearInterval(saveInterval);
  }, [clipboardItems]);

  const handleCopy = async (content: string) => {
    await writeText(content);
  };

  const handleDelete = (timestamp: number) => {
    setClipboardItems((prevItems) =>
      prevItems.filter((item) => item.timestamp !== timestamp)
    );
  };

  return (
    <div>
      <h2>ClipBoard Page</h2>
      <ul>
        {clipboardItems.map((item, index) => {
          try {
            if (!item.content || !item.timestamp) {
              throw new Error("Invalid item");
            }
            return (
              <li key={index} className={index % 2 === 0 ? "even" : "odd"}>
                <div className="item-header">
                  <small>{new Date(item.timestamp).toLocaleString()}</small>
                  <div>
                    <a href="#" onClick={() => handleCopy(item.content)}>Copy</a> | 
                    <a href="#" onClick={() => handleDelete(item.timestamp)}>Delete</a>
                  </div>
                </div>
                <p>{item.content}</p>
              </li>
            );
          } catch (error) {
            console.error("Invalid clipboard item:", error);
            return null;
          }
        })}
      </ul>
    </div>
  );
}

export default ClipBoard;

In this implementation, we:

  1. Added error handling logic in the clipboardItems.map function.
  2. Checked if each item has valid content and timestamp properties.
  3. If an item is invalid, an error is thrown and logged to the console, and null is returned to ignore invalid data.

Thus, when mapping clipboardItems to interface elements, invalid data will be ignored, and error information will be logged to the console.

List only the previous commands issued, without displaying code updates#

Note

The summary here only provided functional adjustment commands, ignoring project structure and UI optimization commands.

GitHub Copilot:

  1. Create an independent Home component.
  2. Move Feature1 into an independent module under the Features subdirectory.
  3. Rename Feature1 to ClipBoard.
  4. Display the most recent clipboard content, sorted in reverse chronological order, showing a maximum of 100 entries.
  5. Ensure greetMsg displays on a new line.
  6. Read the clipboard every second and add new content to the clipboard content list if it exists.
  7. Save both the content text and the MD5 value of the content in the list, and when new content has the same MD5 value as existing content, only update the time instead of adding a new record.
  8. Merge the time and operation buttons into one line.
  9. When first entering the clipboard page, read the history.json file from the AppData directory and parse the content as the clipboard history, displaying it on the interface.
  10. Add exception handling for mapping ClipboardItems to interface elements, ignoring invalid data.

Final Effect Picture#

image

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.