From a175ef47e227cc988bae9d1cc6563f64896c60a3 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 28 Sep 2022 08:35:33 +0800
Subject: [PATCH] feat: add workspace setting page

---
 web/src/components/WorkspaceSetting.tsx | 118 ++++++++++++++++++++++++
 web/src/pages/WorkspaceDetail.tsx       |  11 ++-
 2 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/WorkspaceSetting.tsx

diff --git a/web/src/components/WorkspaceSetting.tsx b/web/src/components/WorkspaceSetting.tsx
new file mode 100644
index 0000000..432453d
--- /dev/null
+++ b/web/src/components/WorkspaceSetting.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { deleteWorkspaceUser } from "../helpers/api";
+import useLoading from "../hooks/useLoading";
+import { workspaceService } from "../services";
+import { useAppSelector } from "../store";
+import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
+import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
+import { showCommonDialog } from "./Dialog/CommonDialog";
+import toastHelper from "./Toast";
+
+interface Props {
+  workspaceId: WorkspaceId;
+}
+
+interface State {
+  workspace: Workspace;
+  workspaceUser: WorkspaceUser;
+}
+
+const WorkspaceSetting: React.FC<Props> = (props: Props) => {
+  const { workspaceId } = props;
+  const navigate = useNavigate();
+  const user = useAppSelector((state) => state.user.user) as User;
+  const [state, setState] = useState<State>({
+    workspace: unknownWorkspace,
+    workspaceUser: unknownWorkspaceUser,
+  });
+  const loadingState = useLoading();
+
+  useEffect(() => {
+    const workspace = workspaceService.getWorkspaceById(workspaceId);
+    if (!workspace) {
+      toastHelper.error("workspace not found");
+      return;
+    }
+
+    loadingState.setLoading();
+    Promise.all([workspaceService.getWorkspaceUser(workspace.id, user.id)])
+      .then(([workspaceUser]) => {
+        setState({
+          workspace,
+          workspaceUser,
+        });
+      })
+      .finally(() => {
+        loadingState.setFinish();
+      });
+  }, []);
+
+  const handleEditWorkspaceButtonClick = () => {
+    showCreateWorkspaceDialog(state.workspace.id);
+  };
+
+  const handleDeleteWorkspaceButtonClick = () => {
+    showCommonDialog({
+      title: "Delete Workspace",
+      content: `Are you sure to delete workspace \`${state.workspace.name}\`?`,
+      style: "warning",
+      onConfirm: async () => {
+        await workspaceService.deleteWorkspaceById(state.workspace.id);
+        navigate("/");
+      },
+    });
+  };
+
+  const handleExitWorkspaceButtonClick = () => {
+    showCommonDialog({
+      title: "Exit Workspace",
+      content: `Are you sure to exit workspace \`${state.workspace.name}\`?`,
+      style: "warning",
+      onConfirm: async () => {
+        await deleteWorkspaceUser({
+          workspaceId: state.workspace.id,
+          userId: state.workspaceUser.userId,
+        });
+        navigate("/");
+      },
+    });
+  };
+
+  return (
+    <div className="w-full flex flex-col justify-start items-start">
+      <p className="text-3xl mt-2 mb-4">{state.workspace.name}</p>
+      <p>{state.workspace.description}</p>
+
+      <div className="border-t pt-4 mt-2 flex flex-row justify-start items-center">
+        <span className="text-gray-400 mr-2">Actions:</span>
+        <div className="flex flex-row justify-start items-center space-x-2">
+          {state.workspaceUser.role === "ADMIN" ? (
+            <>
+              <button className="border rounded-md px-3 leading-8 hover:shadow" onClick={handleEditWorkspaceButtonClick}>
+                Edit
+              </button>
+              <button
+                className="border rounded-md px-3 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
+                onClick={handleDeleteWorkspaceButtonClick}
+              >
+                Delete
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                className="border rounded-md px-3 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
+                onClick={handleExitWorkspaceButtonClick}
+              >
+                Exit
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkspaceSetting;
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index bfd508e..ae98483 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -7,11 +7,12 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
+import showCreateShortcutDialog from "../components/CreateShortcutDialog";
+import showUpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
 import Header from "../components/Header";
 import ShortcutListView from "../components/ShortcutListView";
-import showCreateShortcutDialog from "../components/CreateShortcutDialog";
 import MemberListView from "../components/MemberListView";
-import showUpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
+import WorkspaceSetting from "../components/WorkspaceSetting";
 
 interface State {
   workspace: Workspace;
@@ -63,7 +64,7 @@ const WorkspaceDetail: React.FC = () => {
   }, [params.workspaceName]);
 
   useEffect(() => {
-    if (location.hash !== "#shortcuts" && location.hash !== "#members") {
+    if (location.hash !== "#shortcuts" && location.hash !== "#members" && location.hash !== "#setting") {
       navigate("#shortcuts");
     }
   }, [location.hash]);
@@ -102,6 +103,9 @@ const WorkspaceDetail: React.FC = () => {
             <NavLink to="#members" className={`${location.hash === "#members" && "underline"}`}>
               Members
             </NavLink>
+            <NavLink to="#setting" className={`${location.hash === "#setting" && "underline"}`}>
+              Setting
+            </NavLink>
           </div>
           <div>
             <Dropdown
@@ -141,6 +145,7 @@ const WorkspaceDetail: React.FC = () => {
             {location.hash === "#members" && (
               <MemberListView workspaceId={state.workspace.id} workspaceUser={state.workspaceUser} userList={state.userList} />
             )}
+            {location.hash === "#setting" && <WorkspaceSetting workspaceId={state.workspace.id} />}
           </>
         )}
       </div>