feat: wrap message by fluent ui toast

2024-09-27 14:52:10 +08:00
parent 77dff6649d
commit b2c13508f4
27 changed files with 677 additions and 102 deletions
--- a/frontend/src/api.tsx
+++ b/frontend/src/api.tsx
@@ -7,6 +7,7 @@ export interface Resp<T> {
    data: T;
 }

+
 // 类型保护函数
 function isResp<T>(obj: any): obj is Resp<T> {
    return (
@@ -18,23 +19,32 @@ function isResp<T>(obj: any): obj is Resp<T> {
    );
 }

-const invoke = async <T>(path: string, req: any): Promise<Resp<T>> => {
+export async function Dial<T>(path: string, req: any = null): Promise<Resp<T>> {
    const bs = JSON.stringify(req)
    console.log(`[DEBUG] invoke req: path = ${path}, req =`, req)
-    const res = await Invoke(path, bs)
-    console.log(`[DEBUG] invoke res: path = ${path}, res =`, res)
+
+    let result: Resp<T>;
+    let ok = false;
+
    try {
+        const res = await Invoke(path, bs)
        const parsed = JSON.parse(res);
        if (isResp<T>(parsed)) {
-            return parsed;
+            result = parsed;
+            ok = true
        } else {
            console.error('[ERROR] invoke: resp not valid =', res)
-            throw new Error('Parsed response does not match Resp<T> structure');
+            result = {status: 500, msg: "发生错误(0)", err: res} as Resp<T>;
        }
    } catch (error) {
-        console.error(`[ERROR] invoke: resp parse err, err = ${error}, res =`, res);
-        throw new Error('Invalid response format');
+        result = {status: 500, msg: "发生错误(-1)", err: "backend method(Invoke) not found in window"} as Resp<T>;
    }
-}

-export const Dial = invoke;
+    if (ok) {
+        console.log(`[DEBUG] invoke res: path = ${path}, res =`, result)
+    } else {
+        console.error(`[ERROR] invoke res: path = ${path}, res =`, result)
+    }
+
+    return result
+}
--- a/frontend/src/interfaces/connection.ts
+++ b/frontend/src/interfaces/connection.ts
@@ -0,0 +1,9 @@
+export interface Connection {
+    id: number;
+    created_at: number;
+    updated_at: number;
+    deleted_at: number;
+    name: string;
+    endpoint: string;
+    active: boolean;
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,22 +1,25 @@
 import React from 'react'
 import {createRoot} from 'react-dom/client'
 import './style.css'
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import {createBrowserRouter,RouterProvider} from "react-router-dom";
+import {FluentProvider, webLightTheme} from '@fluentui/react-components';
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import Home from "./page/home/home";
 import Connection from "./page/connection/connection";
+import {ToastProvider} from "./message";

 const container = document.getElementById('root')

 const root = createRoot(container!)

 const router = createBrowserRouter([
-    {path:'/', element: <Home />},
-    {path:'/connection', element: <Connection />},
+    {path: '/', element: <Home/>},
+    {path: '/connection', element: <Connection/>},
 ])

 root.render(
    <FluentProvider theme={webLightTheme}>
-        <RouterProvider router={router} />
+        <ToastProvider>
+            <RouterProvider router={router}/>
+        </ToastProvider>
    </FluentProvider>,
 );
--- a/frontend/src/message.tsx
+++ b/frontend/src/message.tsx
@@ -0,0 +1,37 @@
+import {createContext, FC, ReactNode, useContext} from "react";
+import {Toast, Toaster, ToastTitle, useId, useToastController} from "@fluentui/react-components";
+
+
+interface ToastContextType {
+    dispatchMessage: (content: string, type: "success" | "error" | "warning" | "info") => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: FC<{ children: ReactNode }> = ({children}) => {
+
+    const toasterId = useId("toaster");
+    const {dispatchToast} = useToastController(toasterId);
+
+    const dispatchMessage = (content: string, type: "success" | "error" | "warning" | "info" = "info") => {
+        dispatchToast(
+            <Toast>
+                <ToastTitle>{content}</ToastTitle>
+            </Toast>,
+            {position: "top-end", intent: type}
+        );
+    };
+
+    return <ToastContext.Provider value={{dispatchMessage}}>
+        {children}
+        <Toaster toasterId={toasterId}/>
+    </ToastContext.Provider>
+}
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return context;
+};
--- a/frontend/src/page/connection/connection.tsx
+++ b/frontend/src/page/connection/connection.tsx
@@ -3,23 +3,28 @@ import {
    useId,
    Button,
    FieldProps,
-    useToastController,
-    Toast,
-    ToastTitle,
-    ToastIntent,
-    Toaster
+    Spinner
 } from "@fluentui/react-components";
 import {Field, Input} from "@fluentui/react-components";
 import {useNavigate} from "react-router-dom";
 import {useState} from "react";
 import {Dial} from "../../api";
+import {useToast} from "../../message";
+import {CheckmarkFilled, DismissRegular} from "@fluentui/react-icons";


 const Connection = (props: Partial<FieldProps>) => {
-
-    const toasterId = useId("toaster");
-    const {dispatchToast} = useToastController(toasterId);
+    const { dispatchMessage } = useToast();
    const navigate = useNavigate();
+    const [testLoading, setTestLoading] = useState<"initial" | "loading" | "success" | "error">("initial");
+    const buttonIcon =
+        testLoading === "loading" ? (
+            <Spinner size="tiny"/>
+        ) : testLoading === "success" ? (
+            <CheckmarkFilled/>
+        ) : testLoading === "error" ? (
+            <DismissRegular/>
+        ) : null;
    const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
        name: '',
        endpoint: '',
@@ -28,16 +33,24 @@ const Connection = (props: Partial<FieldProps>) => {
    })

    function test() {
-        const val = JSON.stringify(value);
-        console.log('[DEBUG] connection.test: value =', val)
+        setTestLoading("loading")
        Dial<string>("/api/connection/test", value).then(res => {
+            let status: "success" | "error" = "error"
            if (res.status === 200) {
-                dispatchToast(
-                    <Toast>
-                        <ToastTitle>连接成功!</ToastTitle>
-                    </Toast>,
-                    {position: "top-end", intent: "success"}
-                )
+                status = "success"
+            }
+
+            setTestLoading(status);
+
+            dispatchMessage(res.msg, status)
+        })
+    }
+
+    function create() {
+        Dial<unknown>("/api/connection/create", value).then(res => {
+            dispatchMessage(res.msg, res.status === 200?"success":"error");
+            if (res.status === 200) {
+                navigate("/");
            }
        })
    }
@@ -94,17 +107,17 @@ const Connection = (props: Partial<FieldProps>) => {
                </Field>
            </div>
            <div className='connection-form-field connection-form-field-actions'>
-                <Button appearance='transparent' onClick={() => test()}>测试连接</Button>
+                <Button appearance='transparent' icon={buttonIcon} onClick={() => test()}>测试连接</Button>
                <div style={{marginLeft: 'auto'}}>
                    <Button style={{marginRight: '20px'}} className='connection-form-field-actions-cancel'
                            onClick={() => {
                                navigate("/")
                            }}>取消</Button>
-                    <Button className='connection-form-field-actions-confirm' appearance='primary'>新建</Button>
+                    <Button className='connection-form-field-actions-confirm' appearance='primary'
+                            onClick={() => create()}>新建</Button>
                </div>
            </div>
        </div>
-        <Toaster toasterId={toasterId}/>
    </div>
 }

--- a/frontend/src/page/home/home.tsx
+++ b/frontend/src/page/home/home.tsx
@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import './home.css';
 import {
    Button,
@@ -6,25 +6,45 @@ import {
 import {
    CloudAddFilled, DismissRegular
 } from "@fluentui/react-icons";
-import { useNavigate } from "react-router-dom";
+import {useNavigate} from "react-router-dom";
+import {Dial} from "../../api";
+import {useToast} from "../../message";
+import {Connection} from "../../interfaces/connection";

 function Home() {
+    const {dispatchMessage} = useToast();
    const [connectionFilterKeywords, setConnectionFilterKeywords] = useState<string>('');
    const navigate = useNavigate();
+    const [connectionList, setConnectionList] = useState<Connection[]>([]);
+
+    useEffect(() => {
+        Dial<{ list: Connection[] }>("/api/connection/list").then(res => {
+            dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
+            if (res.status === 200) {
+                setConnectionList(res.data.list)
+            }
+        })
+    }, []);

    return (
        <div className="container">
            <div className="header">
-                        <Button appearance="primary" icon={<CloudAddFilled  />} onClick={() => {navigate("/connection")}}>
-                            新建连接
-                        </Button>
+                <Button appearance="primary" icon={<CloudAddFilled/>} onClick={() => {
+                    navigate("/connection")
+                }}>
+                    新建连接
+                </Button>
            </div>
            <div className="body">
                <div className="body-connections">
                    <div className="body-connections-search">
-                        <input className="body-connections-search-input" type={"text"} placeholder="搜索连接" value={connectionFilterKeywords} onChange={(e) => setConnectionFilterKeywords(e.target.value)} />
-                        <div className="body-connections-search-dismiss" onClick={() => {setConnectionFilterKeywords('')}}>
-                            <DismissRegular />
+                        <input className="body-connections-search-input" type={"text"} placeholder="搜索连接"
+                               value={connectionFilterKeywords}
+                               onChange={(e) => setConnectionFilterKeywords(e.target.value)}/>
+                        <div className="body-connections-search-dismiss" onClick={() => {
+                            setConnectionFilterKeywords('')
+                        }}>
+                            <DismissRegular/>
                        </div>
                    </div>
                    <div className="body-connections-list"></div>