From de83467c4577ea927022d7829ef50b58e08225c3 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 17 Sep 2022 11:23:49 +0800
Subject: [PATCH] chore: update workspace selector

---
 web/src/components/Header.tsx     | 64 ++++++++++++++++++++++++++-----
 web/src/pages/WorkspaceDetail.tsx | 10 +----
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 4baf7f6..b3248ec 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,12 +1,17 @@
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "../store";
 import { userService } from "../services";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
+import Only from "./common/OnlyWhen";
+import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
 
 const Header: React.FC = () => {
+  const params = useParams();
   const navigate = useNavigate();
   const { user } = useAppSelector((state) => state.user);
+  const { workspaceList } = useAppSelector((state) => state.workspace);
+  const activedWorkspace = workspaceList.find((workspace) => workspace.name === params.workspaceName ?? "");
 
   const handleSignOutButtonClick = async () => {
     await userService.doSignOut();
@@ -16,9 +21,50 @@ const Header: React.FC = () => {
   return (
     <div className="w-full bg-amber-50">
       <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
-        <Link to={"/"} className="text-xl font-mono font-medium cursor-pointer">
-          Corgi
-        </Link>
+        <div className="flex flex-row justify-start items-center">
+          <Link to={"/"} className="text-base font-mono font-medium cursor-pointer">
+            Corgi
+          </Link>
+          <Only when={workspaceList.length > 0 && activedWorkspace !== undefined}>
+            <>
+              <span className="font-mono mx-2 text-gray-200">/</span>
+              <Dropdown
+                trigger={
+                  <button className="flex flex-row justify-end items-center cursor-pointer">
+                    <span className="font-mono">{activedWorkspace?.name}</span>
+                    <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
+                  </button>
+                }
+                actions={
+                  <>
+                    {workspaceList.map((workspace) => {
+                      return (
+                        <Link
+                          key={workspace.id}
+                          to={`/${workspace.name}`}
+                          className="w-full px-3 leading-10 flex flex-row justify-between items-center text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                        >
+                          <span className="truncate">{workspace.name}</span>
+                          <Only when={workspace.name === activedWorkspace?.name}>
+                            <Icon.Check className="w-4 h-auto ml-1 shrink-0" />
+                          </Only>
+                        </Link>
+                      );
+                    })}
+                    <hr className="w-full border-t my-1 border-t-gray-100" />
+                    <button
+                      className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
+                      onClick={() => showCreateWorkspaceDialog()}
+                    >
+                      <Icon.Plus className="w-4 h-auto mr-1" /> Create Workspace
+                    </button>
+                  </>
+                }
+                actionsClassName="!w-48 !-left-4"
+              ></Dropdown>
+            </>
+          </Only>
+        </div>
         <div className="relative">
           {user ? (
             <Dropdown
@@ -32,19 +78,19 @@ const Header: React.FC = () => {
                 <>
                   <Link
                     to={`/user/${user?.id}`}
-                    className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                   >
-                    My information
+                    <Icon.User className="w-4 h-auto mr-1" /> My Account
                   </Link>
                   <button
-                    className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                     onClick={() => handleSignOutButtonClick()}
                   >
-                    Sign out
+                    <Icon.LogOut className="w-4 h-auto mr-1" /> Sign out
                   </button>
                 </>
               }
-              actionsClassName="!w-36"
+              actionsClassName="!w-40"
             ></Dropdown>
           ) : (
             <span className="cursor-pointer" onClick={() => navigate("/user/auth")}>
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index 1e8a93d..392ee44 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -33,22 +33,16 @@ const WorkspaceDetail: React.FC = () => {
       ...state,
       workspace,
     });
+    loadingState.setLoading();
     Promise.all([shortcutService.fetchWorkspaceShortcuts(workspace.id)]).finally(() => {
       loadingState.setFinish();
     });
-  }, []);
+  }, [params.workspaceName]);
 
   return (
     <div className="w-full h-full flex flex-col justify-start items-start">
       <Header />
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-4">
-          <Link to={"/"} className="font-mono text-gray-600 cursor-pointer hover:underline">
-            Home
-          </Link>
-          <span className="font-mono text-gray-200 mx-4">/</span>
-          <span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
-        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400">Shortcut List</span>
           <button