From 3c8c559ac7662e83c226d86555acc05e0d460cd3 Mon Sep 17 00:00:00 2001 From: loveuer Date: Mon, 7 Oct 2024 21:24:18 +0800 Subject: [PATCH] refactory: zustand as state management --- frontend/src/component/connection/new.tsx | 12 +++---- frontend/src/component/home/home.tsx | 16 +++------ frontend/src/main.tsx | 1 - frontend/src/store/connection.tsx | 16 +++++++++ frontend/src/store/store.tsx | 8 ----- package-lock.json | 41 +++++++++++++++++++++++ package.json | 5 +++ 7 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 frontend/src/store/connection.tsx delete mode 100644 frontend/src/store/store.tsx create mode 100644 package-lock.json create mode 100644 package.json diff --git a/frontend/src/component/connection/new.tsx b/frontend/src/component/connection/new.tsx index 8a464be..e3b4e18 100644 --- a/frontend/src/component/connection/new.tsx +++ b/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 -} - -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" ? ( @@ -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() } } diff --git a/frontend/src/component/home/home.tsx b/frontend/src/component/home/home.tsx index 27c5fec..f0f1661 100644 --- a/frontend/src/component/home/home.tsx +++ b/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(''); const [connections, setConnections] = useState([]); + 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() { 新建连接 - +
@@ -131,7 +125,7 @@ function Home() {
- {connections.map(item => { + {conn_list.map(item => { return { await handleConnect(item) diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bcdef1c..7f5ce8b 100644 --- a/frontend/src/main.tsx +++ b/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') diff --git a/frontend/src/store/connection.tsx b/frontend/src/store/connection.tsx new file mode 100644 index 0000000..5290ddd --- /dev/null +++ b/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()((set) => ({ + conn_list: [], + get_conn: async () => { + const res = await Dial<{list: Connection[]}>('/api/connection/list'); + set({conn_list: res.data.list}) + } +})) diff --git a/frontend/src/store/store.tsx b/frontend/src/store/store.tsx deleted file mode 100644 index 3f2c07c..0000000 --- a/frontend/src/store/store.tsx +++ /dev/null @@ -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 {children} -} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..4779005 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..d0ede6c --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "zustand": "^5.0.0-rc.2" + } +}