update code struct

coaidev · Oct 23, 2023 · f9949a8 · f9949a8
1 parent 435308d
commit f9949a8
Show file tree

Hide file tree

Showing 18 changed files with 224 additions and 162 deletions.
diff --git a/app/package.json b/app/package.json
@@ -25,18 +25,20 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.5.0",
+    "chart.js": "^4.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "i18next": "^23.4.6",
     "localforage": "^1.10.0",
     "lucide-react": "^0.274.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.2.2",
     "react-markdown": "^8.0.7",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.15.0",
+    "react-router-dom": "^5.1.2",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-katex": "^6.0.3",
     "remark-gfm": "^3.0.1",

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,162 +1,13 @@
-import { RouterProvider } from "react-router-dom";
-import "./assets/navbar.less";
-import ModeToggle, { ThemeProvider } from "./components/ThemeProvider.tsx";
-import { Button } from "./components/ui/button.tsx";
-import router from "./router.ts";
-import I18nProvider from "./components/I18nProvider.tsx";
-import ProjectLink from "./components/ProjectLink.tsx";
-import {
-  BadgeCent,
-  Boxes,
-  CalendarPlus,
-  Cloud,
-  ListStart,
-  Menu,
-  Plug,
-} from "lucide-react";
-import { Provider, useDispatch, useSelector } from "react-redux";
-import { toggleMenu } from "./store/menu.ts";
+import { Provider } from "react-redux";
 import store from "./store/index.ts";
-import {
-  logout,
-  selectAuthenticated,
-  selectUsername,
-  validateToken,
-} from "./store/auth.ts";
-import { useEffect } from "react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "./components/ui/dropdown-menu.tsx";
-import { Toaster } from "./components/ui/toaster.tsx";
-import { login, tokenField } from "./conf.ts";
-import { useTranslation } from "react-i18next";
-import Quota from "./routes/Quota.tsx";
-import { openDialog as openQuotaDialog, quotaSelector } from "./store/quota.ts";
-import { openDialog as openPackageDialog } from "./store/package.ts";
-import { openDialog as openSub } from "./store/subscription.ts";
-import { openDialog as openApiDialog } from "./store/api.ts";
-import { openDialog as openSharingDialog } from "./store/sharing.ts";
-import Package from "./routes/Package.tsx";
-import Subscription from "./routes/Subscription.tsx";
-import ApiKey from "./routes/ApiKey.tsx";
-import ShareManagement from "./routes/ShareManagement.tsx";
-
-function Settings() {
-  const { t } = useTranslation();
-  const dispatch = useDispatch();
-  const username = useSelector(selectUsername);
-  const quota = useSelector(quotaSelector);
-
-  return (
-    <div className={`avatar`}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant={`ghost`} size={`icon`}>
-            <img src={`https://api.deeptrain.net/avatar/${username}`} alt="" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align={`end`}>
-          <DropdownMenuLabel className={`username`}>
-            {username}
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-            <Cloud className={`h-4 w-4 mr-1`} />
-            {quota}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-            <BadgeCent className={`h-4 w-4 mr-1`} />
-            {t("quota")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openSub())}>
-            <CalendarPlus className={`h-4 w-4 mr-1`} />
-            {t("sub.title")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openPackageDialog())}>
-            <Boxes className={`h-4 w-4 mr-1`} />
-            {t("pkg.title")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openSharingDialog())}>
-            <ListStart className={`h-4 w-4 mr-1`} />
-            {t("share.manage")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openApiDialog())}>
-            <Plug className={`h-4 w-4 mr-1`} />
-            {t("api.title")}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Button
-              size={`sm`}
-              className={`action-button`}
-              onClick={() => dispatch(logout())}
-            >
-              {t("logout")}
-            </Button>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
-
-function NavBar() {
-  const { t } = useTranslation();
-  const dispatch = useDispatch();
-  useEffect(() => {
-    validateToken(dispatch, localStorage.getItem(tokenField) ?? "");
-  }, []);
-  const auth = useSelector(selectAuthenticated);
-
-  return (
-    <nav className={`navbar`}>
-      <div className={`items`}>
-        <Button
-          size={`icon`}
-          variant={`ghost`}
-          onClick={() => dispatch(toggleMenu())}
-        >
-          <Menu />
-        </Button>
-        <img
-          className={`logo`}
-          src="/favicon.ico"
-          alt=""
-          onClick={() => router.navigate("/")}
-        />
-        <div className={`grow`} />
-        <ProjectLink />
-        <ModeToggle />
-        <I18nProvider />
-        {auth ? (
-          <Settings />
-        ) : (
-          <Button size={`sm`} onClick={login}>
-            {t("login")}
-          </Button>
-        )}
-      </div>
-    </nav>
-  );
-}
+import AppProvider from "./components/app/AppProvider.tsx";
+import { AppRouter } from "./router.tsx";
 
 function App() {
   return (
     <Provider store={store}>
-      <NavBar />
-      <ThemeProvider />
-      <RouterProvider router={router} />
-      <Toaster />
-      <Quota />
-      <ApiKey />
-      <Package />
-      <Subscription />
-      <ShareManagement />
+      <AppProvider />
+      <AppRouter />
     </Provider>
   );
 }

diff --git a/app/src/components/app/AppProvider.tsx b/app/src/components/app/AppProvider.tsx
@@ -0,0 +1,15 @@
+import NavBar from "./NavBar.tsx";
+import { ThemeProvider } from "../ThemeProvider.tsx";
+import DialogManager from "../../dialogs";
+
+function AppProvider() {
+  return (
+    <>
+      <NavBar />
+      <ThemeProvider />
+      <DialogManager />
+    </>
+  );
+}
+
+export default AppProvider;