feat: build SPA instead of MPA (#7)

* feat: build SPA instead of MPA * feat: support PWA
recally-io · Sep 6, 2024 · c13a8e8 · c13a8e8
1 parent 449cd35
commit c13a8e8
Show file tree

Hide file tree

Showing 36 changed files with 388 additions and 354 deletions.
diff --git a/web/.gitignore b/web/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+dev-dist
 dist
 dist-ssr
 *.local

diff --git a/web/assistants.html b/web/assistants.html
diff --git a/web/auth.html b/web/auth.html
diff --git a/web/bun.lockb b/web/bun.lockb
diff --git a/web/dist/vite.svg b/web/dist/vite.svg
diff --git a/web/index.html b/web/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vibrain</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./src/pages/index.jsx"></script>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "prettier . --write",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "generate-pwa-assets": "pwa-assets-generator"
   },
   "dependencies": {
     "@mantine/code-highlight": "^7.12.1",
@@ -23,18 +24,20 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.26.1",
     "remark-gfm": "^4.0.0",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@iconify/react": "^5.0.2",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@vite-pwa/assets-generator": "^0.2.6",
     "@vitejs/plugin-react": "^4.2.0",
     "postcss": "^8.4.41",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "vite": "^5.0.0",
-    "vite-plugin-pwa": "^0.20.3"
+    "vite-plugin-pwa": "^0.20.5"
   }
 }
diff --git a/web/public/apple-touch-icon-180x180.png b/web/public/apple-touch-icon-180x180.png
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/logo.svg b/web/public/logo.svg
diff --git a/web/public/maskable-icon-512x512.png b/web/public/maskable-icon-512x512.png
diff --git a/web/public/pwa-192x192.png b/web/public/pwa-192x192.png
diff --git a/web/public/pwa-512x512.png b/web/public/pwa-512x512.png
diff --git a/web/public/pwa-64x64.png b/web/public/pwa-64x64.png
diff --git a/web/public/vite.svg b/web/public/vite.svg
diff --git a/web/pwa-assets.config.js b/web/pwa-assets.config.js
@@ -0,0 +1,9 @@
+import {
+  defineConfig,
+  minimalPreset as preset,
+} from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+  preset,
+  images: ["public/logo.svg"],
+});
diff --git a/web/src/components/assistants.jsx b/web/src/components/assistants.jsx
@@ -16,20 +16,20 @@ import {
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { useQueryContext } from "../libs/query-context";
 import useStore from "../libs/store";
 import { ThreadSettingsModal } from "./thread-settings";
 
-const url = new URL(window.location.href);
-
 export default function Assistants() {
+  const navigate = useNavigate();
+  const params = useParams();
   const { listAssistants, deleteAssistant } = useQueryContext();
   const setAssistantId = useStore((state) => state.setAssistantId);
-
   const setIsOpen = useStore((state) => state.setThreadIsOpenSettings);
 
   const [filteredAssistants, setFilteredAssistants] = useState([]);
-  const [searchValue, setSearchValue] = useState(url.searchParams.get("id"));
+  const [searchValue, setSearchValue] = useState(params.assistantId);
 
   useEffect(() => {
     if (listAssistants.data) {
@@ -109,7 +109,7 @@ export default function Assistants() {
                         variant="filled"
                         size="xs"
                         onClick={() => {
-                          window.location.href = `/threads.html?assistant-id=${assistant.id}`;
+                          navigate(`/assistants/${assistant.id}/threads`);
                         }}
                       >
                         <Icon icon="tabler:message-2" />

diff --git a/web/src/components/auth.jsx b/web/src/components/auth.jsx
@@ -16,13 +16,11 @@ import {
 import { useForm } from "@mantine/form";
 import { upperFirst, useToggle } from "@mantine/hooks";
 import { useState } from "react";
-import { toastInfo } from "../libs/alert";
-import { post } from "../libs/api";
-
-const url = new URL(window.location.href);
-const redirect = url.searchParams.get("redirect");
+import { useAuthContext } from "../libs/auth-context";
 
 export function AuthenticationForm() {
+  const { login, register } = useAuthContext();
+
   const [type, toggle] = useToggle(["login", "register"]);
   const [errMessage, setErrMessage] = useState("");
   const form = useForm({
@@ -42,39 +40,6 @@ export function AuthenticationForm() {
     },
   });
 
-  const register = async () => {
-    try {
-      const res = await post("/api/v1/auth/register", null, form.values);
-      const user = res.data;
-      toastInfo(
-        "You have successfully registered: " + user.email + "!",
-        "Registration successful",
-      );
-      setTimeout(() => {
-        window.location.href = redirect || "/";
-      }, 1000);
-    } catch (error) {
-      setErrMessage(error.message);
-    }
-  };
-
-  const login = async () => {
-    try {
-      const res = await post("/api/v1/auth/login", null, form.values);
-      const user = res.data;
-      toastInfo(
-        `You have successfully logged in as ${user.email}`,
-        "Login successful",
-      );
-
-      setTimeout(() => {
-        window.location.href = redirect || "/";
-      }, 1000);
-    } catch (error) {
-      setErrMessage(error.message);
-    }
-  };
-
   return (
     <>
       <Container size="sm" my="lg">
@@ -114,11 +79,13 @@ export function AuthenticationForm() {
           />
 
           <form
-            onSubmit={form.onSubmit(() => {
+            onSubmit={form.onSubmit(async () => {
               if (type === "register") {
-                register();
+                await register.mutateAsync(form.values);
               } else {
-                login();
+                console.log(form.values);
+                console.log("login");
+                await login.mutateAsync(form.values);
               }
             })}
           >

diff --git a/web/src/components/header-menu.jsx b/web/src/components/header-menu.jsx
@@ -1,18 +1,15 @@
 import { Icon } from "@iconify/react";
 import { Avatar, Button, Menu, useMantineColorScheme } from "@mantine/core";
-import { useQuery } from "@tanstack/react-query";
 import Cookie from "js-cookie";
 import React, { useEffect } from "react";
-import { checkIsLogin } from "../libs/auth";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuthContext } from "../libs/auth-context";
 import useStore from "../libs/store";
 
-const url = new URL(window.location.href);
-
 export function HeaderMenu() {
-  const isLogin = useStore((state) => state.isLogin);
-  const setIsLogin = useStore((state) => state.setIsLogin);
+  const navigate = useNavigate();
+  const { isLogin } = useAuthContext();
   const { colorScheme, setColorScheme } = useMantineColorScheme();
-  const authPage = "/auth.html";
 
   const [isDarkMode, setIsDarkMode] = useStore((state) => [
     state.isDarkMode,
@@ -23,44 +20,12 @@ export function HeaderMenu() {
     setIsDarkMode(colorScheme === "dark" ? true : false);
   }, [colorScheme]);
 
-  const checkLogin = useQuery({
-    queryKey: ["check-login"],
-    queryFn: async () => {
-      const isLoggedIn = await checkIsLogin();
-      return isLoggedIn;
-    },
-  });
-
-  useEffect(() => {
-    // wait until the query is done
-    if (checkLogin.isLoading) {
-      return;
-    }
-    if (checkLogin.data) {
-      setIsLogin(true);
-      console.log("User is logged in");
-      if (window.location.pathname === authPage) {
-        const redirect = url.searchParams.get("redirect");
-        console.log("Redirecting to", redirect || "/");
-        window.location.href = redirect || "/";
-      }
-    } else {
-      setIsLogin(false);
-      console.log("User is not logged in");
-      if (window.location.pathname !== authPage) {
-        const redirect = url.pathname + url.search;
-        console.log("Redirecting to login page: " + redirect);
-        window.location.href = authPage + "?redirect=" + redirect;
-      }
-    }
-  }, [checkLogin.isFetching]);
-
   const onAuthClick = () => {
     if (isLogin) {
       Cookie.remove("token");
-      window.location.href = "/";
+      navigate("/");
     } else {
-      window.location.href = authPage;
+      navigate("/auth");
     }
   };
 
@@ -74,21 +39,11 @@ export function HeaderMenu() {
         </Menu.Target>
         <Menu.Dropdown>
           <Menu.Label>Vibrain</Menu.Label>
-          <Menu.Item
-            leftSection={<Icon icon="tabler:home" />}
-            component="a"
-            href="/"
-            // target="_blank"
-          >
-            Home
+          <Menu.Item leftSection={<Icon icon="tabler:home" />}>
+            <Link to="/">Home</Link>
           </Menu.Item>
-          <Menu.Item
-            leftSection={<Icon icon="tabler:augmented-reality" />}
-            component="a"
-            href="/assistants.html"
-            // target="_blank"
-          >
-            Assistants
+          <Menu.Item leftSection={<Icon icon="tabler:augmented-reality" />}>
+            <Link to="/assistants">Assistants</Link>
           </Menu.Item>
           <Menu.Item
             variant="transparent"