From 528ecf72a39e96d6b81e5aec45d89f41776985f4 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 23 Sep 2023 09:02:10 +0800
Subject: [PATCH] chore: split setting pages

---
 frontend/web/src/components/Header.tsx | 13 ++++++++--
 frontend/web/src/pages/Setting.tsx     | 34 +++++++++++++-------------
 frontend/web/src/pages/UserSetting.tsx | 15 ++++++++++++
 frontend/web/src/routers/index.tsx     |  7 +++++-
 4 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 frontend/web/src/pages/UserSetting.tsx

diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index b00d7e3..ec3f60d 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -10,6 +10,7 @@ import Dropdown from "./common/Dropdown";
 const Header: React.FC = () => {
   const currentUser = useUserStore().getCurrentUser();
   const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
+  const isAdmin = currentUser.role === "ADMIN";
 
   const handleSignOutButtonClick = async () => {
     await api.signout();
@@ -39,11 +40,19 @@ const Header: React.FC = () => {
               actions={
                 <>
                   <Link
-                    to="/setting"
+                    to="/setting/general"
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                   >
-                    <Icon.Settings className="w-4 h-auto mr-2" /> Setting
+                    <Icon.User className="w-4 h-auto mr-2" /> Profile
                   </Link>
+                  {isAdmin && (
+                    <Link
+                      to="/setting/workspace"
+                      className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                    >
+                      <Icon.Settings className="w-4 h-auto mr-2" /> Setting
+                    </Link>
+                  )}
                   <button
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => setShowAboutDialog(true)}
diff --git a/frontend/web/src/pages/Setting.tsx b/frontend/web/src/pages/Setting.tsx
index 280e580..1b7cc8b 100644
--- a/frontend/web/src/pages/Setting.tsx
+++ b/frontend/web/src/pages/Setting.tsx
@@ -1,7 +1,5 @@
-import { Alert, Divider } from "@mui/joy";
-import PreferenceSection from "@/components/setting/PreferenceSection";
-import AccessTokenSection from "../components/setting/AccessTokenSection";
-import AccountSection from "../components/setting/AccountSection";
+import { Alert } from "@mui/joy";
+import { useEffect } from "react";
 import MemberSection from "../components/setting/MemberSection";
 import WorkspaceSection from "../components/setting/WorkspaceSection";
 import useUserStore from "../stores/v1/user";
@@ -10,21 +8,23 @@ const Setting: React.FC = () => {
   const currentUser = useUserStore().getCurrentUser();
   const isAdmin = currentUser.role === "ADMIN";
 
+  useEffect(() => {
+    if (!isAdmin) {
+      window.location.href = "/";
+    }
+  }, []);
+
+  if (!isAdmin) {
+    return null;
+  }
+
   return (
     <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
-      <AccountSection />
-      <AccessTokenSection />
-      <PreferenceSection />
-      {isAdmin && (
-        <>
-          <Divider />
-          <Alert variant="soft" color="warning">
-            You can see the settings items below because you are an Admin.
-          </Alert>
-          <MemberSection />
-          <WorkspaceSection />
-        </>
-      )}
+      <Alert variant="soft" color="warning">
+        You can see the settings items below because you are an Admin.
+      </Alert>
+      <MemberSection />
+      <WorkspaceSection />
     </div>
   );
 };
diff --git a/frontend/web/src/pages/UserSetting.tsx b/frontend/web/src/pages/UserSetting.tsx
new file mode 100644
index 0000000..8cf6e24
--- /dev/null
+++ b/frontend/web/src/pages/UserSetting.tsx
@@ -0,0 +1,15 @@
+import PreferenceSection from "@/components/setting/PreferenceSection";
+import AccessTokenSection from "../components/setting/AccessTokenSection";
+import AccountSection from "../components/setting/AccountSection";
+
+const Setting: React.FC = () => {
+  return (
+    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
+      <AccountSection />
+      <AccessTokenSection />
+      <PreferenceSection />
+    </div>
+  );
+};
+
+export default Setting;
diff --git a/frontend/web/src/routers/index.tsx b/frontend/web/src/routers/index.tsx
index d918b6a..25dceb5 100644
--- a/frontend/web/src/routers/index.tsx
+++ b/frontend/web/src/routers/index.tsx
@@ -6,6 +6,7 @@ import Setting from "../pages/Setting";
 import ShortcutDetail from "../pages/ShortcutDetail";
 import SignIn from "../pages/SignIn";
 import SignUp from "../pages/SignUp";
+import UserSetting from "../pages/UserSetting";
 import { shortcutService } from "../services";
 
 const router = createBrowserRouter([
@@ -38,7 +39,11 @@ const router = createBrowserRouter([
             },
           },
           {
-            path: "/setting",
+            path: "/setting/general",
+            element: <UserSetting />,
+          },
+          {
+            path: "/setting/workspace",
             element: <Setting />,
           },
         ],