refactory: zustand as state management

frontend/src/component/connection/new.tsx

@@ -11,6 +11,7 @@ import {useState} from "react";
 import {CheckmarkFilled, DismissRegular} from "@fluentui/react-icons";
 import {useToast} from "../../message";
 import {Dial} from "../../api";
+import {useStoreConnection} from "../../store/connection";
 
 const useActionStyle = makeStyles({
     container: {
@@ -24,14 +25,11 @@ const useActionStyle = makeStyles({
     test: {}
 });
 
-interface ConnectionCreateProps {
-    update: () => Promise<void>
-}
-
-export function ConnectionCreate(props: ConnectionCreateProps){
+export function ConnectionCreate(){
     const actionStyle = useActionStyle();
     const {dispatchMessage} = useToast();
     const [testLoading, setTestLoading] = useState<"initial" | "loading" | "success" | "error">("initial");
+    const {conn_list, get_conn} = useStoreConnection();
     const buttonIcon =
         testLoading === "loading" ? (
             <Spinner size="tiny"/>
@@ -56,10 +54,12 @@ export function ConnectionCreate(props: ConnectionCreateProps){
     }
 
     async function create() {
+        // qUvfW8xpOTc23O96
+        // eTcuc8BebHPVpZZwIaNmzfwxRxPYGfTj
         let res = await Dial("/api/connection/create", value)
         dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
         if (res.status === 200) {
-            await props.update()
+            get_conn()
         }
     }
 

frontend/src/component/home/home.tsx

@@ -10,6 +10,7 @@ import {Dial} from "../../api";
 import {useToast} from "../../message";
 import {Connection} from "../../interfaces/connection";
 import {ConnectionCreate} from "../connection/new";
+import {useStoreConnection} from "../../store/connection";
 
 const useMenuListContainerStyles = makeStyles({
     container: {
@@ -55,19 +56,12 @@ function Home() {
     const [openCreate, setOpenCreate] = useState(false);
     const [connectionFilterKeywords, setConnectionFilterKeywords] = useState<string>('');
     const [connections, setConnections] = useState<Connection[]>([]);
+    const {conn_list, get_conn} = useStoreConnection();
 
     useEffect(() => {
-        updateConnectionList().then()
+        get_conn()
     }, []);
 
-    async function updateConnectionList() {
-        const res = await Dial<{ list: Connection[] }>("/api/connection/list");
-        dispatchMessage(res.status === 200 ? '获取连接列表成功' : res.msg, res.status === 200 ? 'success' : 'error');
-        setConnections(res.status === 200 ? res.data.list : connections);
-        setOpenCreate(false)
-        return;
-    }
-
     async function handleConnect(item: Connection) {
         console.log('[DEBUG] db click item =', item)
         for (const c of connections) {
@@ -113,7 +107,7 @@ function Home() {
                             新建连接
                         </Button>
                     </DialogTrigger>
-                    <ConnectionCreate update={updateConnectionList}/>
+                    <ConnectionCreate />
                 </Dialog>
             </div>
             <div className="body">
@@ -131,7 +125,7 @@ function Home() {
                     <div className="body-connections-list">
                         <div className={styles.container}>
                             <MenuList>
-                                {connections.map(item => {
+                                {conn_list.map(item => {
                                     return <MenuItem
                                         onDoubleClick={async () => {
                                             await handleConnect(item)

frontend/src/main.tsx

@@ -5,7 +5,6 @@ import {FluentProvider, webLightTheme} from '@fluentui/react-components';
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import Home from "./component/home/home";
 import {ToastProvider} from "./message";
-import {JotaiProvider} from "./store/store";
 
 const container = document.getElementById('root')
 

frontend/src/store/connection.tsx

@@ -0,0 +1,16 @@
+import {create} from 'zustand'
+import {Connection} from "../interfaces/connection";
+import {Dial} from "../api";
+
+type StoreConnection = {
+    conn_list: Connection[]
+    get_conn: () => void
+}
+
+export const useStoreConnection = create<StoreConnection>()((set) => ({
+    conn_list: [],
+    get_conn: async () => {
+        const res = await Dial<{list: Connection[]}>('/api/connection/list');
+        set({conn_list: res.data.list})
+    }
+}))

frontend/src/store/store.tsx

@@ -1,8 +0,0 @@
-import { Provider, createStore } from 'jotai'
-import {FC, ReactNode} from "react";
-
-
-export const JotaiProvider: FC<{ children: ReactNode }> = ({children}) => {
-    const store = createStore();
-    return <Provider store={store}>{children}</Provider>
-}

package-lock.json

@@ -0,0 +1,41 @@
+{
+  "name": "nf-disk",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "zustand": "^5.0.0-rc.2"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.0-rc.2",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-5.0.0-rc.2.tgz",
+      "integrity": "sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "zustand": "^5.0.0-rc.2"
+  }
+}