feat: update workspace detail page

web/src/components/MemberListView.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { deleteWorkspaceUser, upsertWorkspaceUser } from "../helpers/api";
+import { useAppSelector } from "../store";
+import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
 import useLoading from "../hooks/useLoading";
 import { workspaceService } from "../services";
 import toastHelper from "./Toast";
@@ -11,36 +13,25 @@ const userRoles = ["Admin", "User"];
 
 interface Props {
   workspaceId: WorkspaceId;
-  workspaceUser: WorkspaceUser;
-  userList: WorkspaceUser[];
-}
-
-interface State {
-  workspaceUserList: WorkspaceUser[];
 }
 
 const MemberListView: React.FC<Props> = (props: Props) => {
-  const { workspaceId, workspaceUser: currentUser } = props;
-  const [state, setState] = useState<State>({
-    workspaceUserList: [],
-  });
+  const { workspaceId } = props;
+  const user = useAppSelector((state) => state.user.user) as User;
+  const { workspaceList } = useAppSelector((state) => state.workspace);
+  const workspace = workspaceList.find((workspace) => workspace.id === workspaceId) ?? unknownWorkspace;
+  const currentUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser;
   const loadingState = useLoading();
 
-  const fetchWorkspaceUserList = async () => {
-    loadingState.setLoading();
-    try {
-      const [workspaceUserList] = await Promise.all([workspaceService.getWorkspaceUserList(workspaceId)]);
-      setState({
-        workspaceUserList: workspaceUserList,
-      });
-    } finally {
-      loadingState.setFinish();
-    }
-  };
-
   useEffect(() => {
-    fetchWorkspaceUserList();
-  }, [props]);
+    const workspace = workspaceService.getWorkspaceById(workspaceId);
+    if (!workspace) {
+      toastHelper.error("workspace not found");
+      return;
+    }
+
+    loadingState.setFinish();
+  }, []);
 
   const handleWorkspaceUserRoleChange = async (workspaceUser: WorkspaceUser, role: Role) => {
     if (workspaceUser.userId === currentUser.userId) {
@@ -53,20 +44,20 @@ const MemberListView: React.FC<Props> = (props: Props) => {
       userId: workspaceUser.userId,
       role,
     });
-    await fetchWorkspaceUserList();
+    await workspaceService.fetchWorkspaceById(workspaceId);
   };
 
   const handleDeleteWorkspaceUserButtonClick = (workspaceUser: WorkspaceUser) => {
     showCommonDialog({
       title: "Delete Workspace Member",
-      content: `Are you sure to delete member \`${workspaceUser.user.name}\` in this workspace?`,
+      content: `Are you sure to delete member \`${workspaceUser.name}\` in this workspace?`,
       style: "warning",
       onConfirm: async () => {
         await deleteWorkspaceUser({
           workspaceId: workspaceId,
           userId: workspaceUser.userId,
         });
-        await fetchWorkspaceUserList();
+        await workspaceService.fetchWorkspaceById(workspaceId);
       },
     });
   };
@@ -76,11 +67,11 @@ const MemberListView: React.FC<Props> = (props: Props) => {
       {loadingState.isLoading ? (
         <></>
       ) : (
-        state.workspaceUserList.map((workspaceUser) => {
+        workspace.workspaceUserList.map((workspaceUser) => {
           return (
             <div key={workspaceUser.userId} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
               <div className="flex flex-row justify-start items-center mr-4">
-                <span>{workspaceUser.user.name}</span>
+                <span>{workspaceUser.name}</span>
                 {currentUser.userId === workspaceUser.userId && <span className="ml-2 text-gray-400">(yourself)</span>}
               </div>
               <div className="flex flex-row justify-end items-center">

web/src/components/UpsertWorkspaceUserDialog.tsx

@@ -1,5 +1,6 @@
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { useState } from "react";
+import { workspaceService } from "../services";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { upsertWorkspaceUser } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
@@ -59,6 +60,8 @@ const UpsertWorkspaceUserDialog: React.FC<Props> = (props: Props) => {
         ...state.workspaceUserUpsert,
       });
 
+      await workspaceService.fetchWorkspaceById(workspaceId);
+
       if (onConfirm) {
         onConfirm();
       } else {

web/src/components/WorkspaceSetting.tsx

@@ -14,8 +14,6 @@ interface Props {
 }
 
 interface State {
-  workspace: Workspace;
-  workspaceUser: WorkspaceUser;
   showEditWorkspaceDialog: boolean;
 }
 
@@ -24,11 +22,12 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
   const navigate = useNavigate();
   const user = useAppSelector((state) => state.user.user) as User;
   const [state, setState] = useState<State>({
-    workspace: unknownWorkspace,
-    workspaceUser: unknownWorkspaceUser,
     showEditWorkspaceDialog: false,
   });
+  const { workspaceList } = useAppSelector((state) => state.workspace);
   const loadingState = useLoading();
+  const workspace = workspaceList.find((workspace) => workspace.id === workspaceId) ?? unknownWorkspace;
+  const workspaceUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser;
 
   useEffect(() => {
     const workspace = workspaceService.getWorkspaceById(workspaceId);
@@ -37,18 +36,7 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
       return;
     }
 
-    loadingState.setLoading();
-    Promise.all([workspaceService.getWorkspaceUser(workspace.id, user.id)])
-      .then(([workspaceUser]) => {
-        setState({
-          ...state,
-          workspace,
-          workspaceUser,
-        });
-      })
-      .finally(() => {
-        loadingState.setFinish();
-      });
+    loadingState.setFinish();
   }, []);
 
   const handleEditWorkspaceButtonClick = () => {
@@ -58,32 +46,22 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleEditWorkspaceDialogConfirm = () => {
-    const prevWorkspace = state.workspace;
-    const workspace = workspaceService.getWorkspaceById(workspaceId);
-    if (!workspace) {
-      toastHelper.error("workspace not found");
-      return;
-    }
-
+  const handleEditWorkspaceDialogConfirm = async () => {
     setState({
       ...state,
-      workspace: workspace,
       showEditWorkspaceDialog: false,
     });
-
-    if (prevWorkspace.name !== workspace.name) {
-      navigate(`/${workspace.name}#setting`);
-    }
+    const workspace = await workspaceService.fetchWorkspaceById(workspaceId);
+    navigate(`/${workspace.name}#setting`);
   };
 
   const handleDeleteWorkspaceButtonClick = () => {
     showCommonDialog({
       title: "Delete Workspace",
-      content: `Are you sure to delete workspace \`${state.workspace.name}\`?`,
+      content: `Are you sure to delete workspace \`${workspace.name}\`?`,
       style: "warning",
       onConfirm: async () => {
-        await workspaceService.deleteWorkspaceById(state.workspace.id);
+        await workspaceService.deleteWorkspaceById(workspace.id);
         navigate("/");
       },
     });
@@ -92,12 +70,12 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
   const handleExitWorkspaceButtonClick = () => {
     showCommonDialog({
       title: "Exit Workspace",
-      content: `Are you sure to exit workspace \`${state.workspace.name}\`?`,
+      content: `Are you sure to exit workspace \`${workspace.name}\`?`,
       style: "warning",
       onConfirm: async () => {
         await deleteWorkspaceUser({
-          workspaceId: state.workspace.id,
-          userId: state.workspaceUser.userId,
+          workspaceId: workspace.id,
+          userId: workspaceUser.userId,
         });
         navigate("/");
       },
@@ -107,11 +85,11 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="w-full flex flex-col justify-start items-start">
-        <p className="text-3xl mt-4 mb-4">{state.workspace.name}</p>
-        <p className="mb-4">{state.workspace.description}</p>
+        <p className="text-3xl mt-4 mb-4">{workspace.name}</p>
+        <p className="mb-4">{workspace.description}</p>
         <div className="border-t pt-4 mt-2 flex flex-row justify-start items-center">
           <div className="flex flex-row justify-start items-center space-x-2">
-            {state.workspaceUser.role === "ADMIN" ? (
+            {workspaceUser.role === "ADMIN" ? (
               <>
                 <button className="border rounded-md px-3 leading-8 hover:shadow" onClick={handleEditWorkspaceButtonClick}>
                   Edit
@@ -139,14 +117,14 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
 
       {state.showEditWorkspaceDialog && (
         <CreateWorkspaceDialog
-          workspaceId={state.workspace.id}
+          workspaceId={workspace.id}
           onClose={() => {
             setState({
               ...state,
               showEditWorkspaceDialog: false,
             });
           }}
-          onConfirm={handleEditWorkspaceDialogConfirm}
+          onConfirm={() => handleEditWorkspaceDialogConfirm()}
         />
       )}
     </>

web/src/helpers/api.ts

@@ -64,6 +64,10 @@ export function getWorkspaceList(find?: WorkspaceFind) {
   return axios.get<ResponseObject<Workspace[]>>(`/api/workspace?${queryList.join("&")}`);
 }
 
+export function getWorkspaceById(workspaceId: WorkspaceId) {
+  return axios.get<ResponseObject<Workspace>>(`/api/workspace/${workspaceId}`);
+}
+
 export function createWorkspace(create: WorkspaceCreate) {
   return axios.post<ResponseObject<Workspace>>("/api/workspace", create);
 }

web/src/pages/WorkspaceDetail.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { NavLink, useLocation, useNavigate, useParams } from "react-router-dom";
-import { shortcutService, userService, workspaceService } from "../services";
+import { shortcutService, userService } from "../services";
 import { useAppSelector } from "../store";
 import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
 import useLoading from "../hooks/useLoading";
@@ -15,9 +15,6 @@ import CreateShortcutDialog from "../components/CreateShortcutDialog";
 import UpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
 
 interface State {
-  workspace: Workspace;
-  workspaceUser: WorkspaceUser;
-  userList: WorkspaceUser[];
   showCreateShortcutDialog: boolean;
   showUpsertWorkspaceUserDialog: boolean;
 }
@@ -27,15 +24,15 @@ const WorkspaceDetail: React.FC = () => {
   const params = useParams();
   const location = useLocation();
   const user = useAppSelector((state) => state.user.user) as User;
+  const { workspaceList } = useAppSelector((state) => state.workspace);
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
-    workspace: unknownWorkspace,
-    workspaceUser: unknownWorkspaceUser,
-    userList: [],
     showCreateShortcutDialog: false,
     showUpsertWorkspaceUserDialog: false,
   });
   const loadingState = useLoading();
+  const workspace = workspaceList.find((workspace) => workspace.name === params.workspaceName) ?? unknownWorkspace;
+  const workspaceUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser;
 
   useEffect(() => {
     if (!userService.getState().user) {
@@ -43,29 +40,14 @@ const WorkspaceDetail: React.FC = () => {
       return;
     }
 
-    const workspace = workspaceService.getWorkspaceByName(params.workspaceName ?? "");
     if (!workspace) {
       toastHelper.error("workspace not found");
       return;
     }
 
-    loadingState.setLoading();
-    Promise.all([
-      shortcutService.fetchWorkspaceShortcuts(workspace.id),
-      workspaceService.getWorkspaceUser(workspace.id, user.id),
-      workspaceService.getWorkspaceUserList(workspace.id),
-    ])
-      .then(([, workspaceUser, workspaceUserList]) => {
-        setState({
-          ...state,
-          workspace,
-          workspaceUser,
-          userList: workspaceUserList,
-        });
-      })
-      .finally(() => {
-        loadingState.setFinish();
-      });
+    Promise.all([shortcutService.fetchWorkspaceShortcuts(workspace.id)]).finally(() => {
+      loadingState.setFinish();
+    });
   }, [params.workspaceName]);
 
   useEffect(() => {
@@ -120,12 +102,14 @@ const WorkspaceDetail: React.FC = () => {
                     >
                       Shortcut
                     </button>
-                    <button
-                      className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                      onClick={handleUpsertWorkspaceMemberButtonClick}
-                    >
-                      Member
-                    </button>
+                    {workspaceUser.role === "ADMIN" && (
+                      <button
+                        className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
+                        onClick={handleUpsertWorkspaceMemberButtonClick}
+                      >
+                        Member
+                      </button>
+                    )}
                   </>
                 }
                 actionsClassName="!w-32"
@@ -139,17 +123,9 @@ const WorkspaceDetail: React.FC = () => {
             </div>
           ) : (
             <>
-              {location.hash === "#shortcuts" && <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />}
-              {location.hash === "#members" && (
-                <MemberListView
-                  // enforce to re-fetch member list.
-                  key={Date.now()}
-                  workspaceId={state.workspace.id}
-                  workspaceUser={state.workspaceUser}
-                  userList={state.userList}
-                />
-              )}
-              {location.hash === "#setting" && <WorkspaceSetting workspaceId={state.workspace.id} />}
+              {location.hash === "#shortcuts" && <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />}
+              {location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
+              {location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
             </>
           )}
         </div>
@@ -157,7 +133,7 @@ const WorkspaceDetail: React.FC = () => {
 
       {state.showCreateShortcutDialog && (
         <CreateShortcutDialog
-          workspaceId={state.workspace.id}
+          workspaceId={workspace.id}
           onClose={() => {
             setState({
               ...state,
@@ -178,7 +154,7 @@ const WorkspaceDetail: React.FC = () => {
 
       {state.showUpsertWorkspaceUserDialog && (
         <UpsertWorkspaceUserDialog
-          workspaceId={state.workspace.id}
+          workspaceId={workspace.id}
           onClose={() => {
             setState({
               ...state,
@@ -186,13 +162,10 @@ const WorkspaceDetail: React.FC = () => {
             });
           }}
           onConfirm={async () => {
-            const workspaceUserList = await workspaceService.getWorkspaceUserList(state.workspace.id);
             setState({
               ...state,
-              userList: workspaceUserList,
               showUpsertWorkspaceUserDialog: false,
             });
-
             if (location.hash !== "#members") {
               navigate("#members");
             }

web/src/services/workspaceService.ts

@@ -1,6 +1,6 @@
 import * as api from "../helpers/api";
 import store from "../store";
-import { createWorkspace, deleteWorkspace, patchWorkspace, setWorkspaceList } from "../store/modules/workspace";
+import { createWorkspace, deleteWorkspace, patchWorkspace, setWorkspaceById, setWorkspaceList } from "../store/modules/workspace";
 
 const convertResponseModelWorkspace = (workspace: Workspace): Workspace => {
   return {
@@ -22,6 +22,13 @@ const workspaceService = {
     return workspaces;
   },
 
+  fetchWorkspaceById: async (workspaceId: WorkspaceId) => {
+    const { data } = (await api.getWorkspaceById(workspaceId)).data;
+    const workspace = convertResponseModelWorkspace(data);
+    store.dispatch(setWorkspaceById(workspace));
+    return workspace;
+  },
+
   getWorkspaceByName: (workspaceName: string) => {
     const workspaceList = workspaceService.getState().workspaceList;
     for (const workspace of workspaceList) {

web/src/store/modules/workspace.ts

@@ -3,12 +3,14 @@ import { UNKNOWN_ID } from "../../helpers/consts";
 
 export const unknownWorkspace = {
   id: UNKNOWN_ID,
-} as Workspace;
+  workspaceUserList: [],
+} as unknown as Workspace;
 
 export const unknownWorkspaceUser = {
   workspaceId: UNKNOWN_ID,
   userId: UNKNOWN_ID,
-} as WorkspaceUser;
+  role: "USER",
+} as unknown as WorkspaceUser;
 
 interface State {
   workspaceList: Workspace[];
@@ -26,6 +28,18 @@ const workspaceSlice = createSlice({
         workspaceList: action.payload,
       };
     },
+    setWorkspaceById: (state, action: PayloadAction<Workspace>) => {
+      return {
+        ...state,
+        workspaceList: state.workspaceList.map((s) => {
+          if (s.id === action.payload.id) {
+            return action.payload;
+          } else {
+            return s;
+          }
+        }),
+      };
+    },
     createWorkspace: (state, action: PayloadAction<Workspace>) => {
       return {
         ...state,
@@ -56,6 +70,6 @@ const workspaceSlice = createSlice({
   },
 });
 
-export const { setWorkspaceList, createWorkspace, patchWorkspace, deleteWorkspace } = workspaceSlice.actions;
+export const { setWorkspaceList, setWorkspaceById, createWorkspace, patchWorkspace, deleteWorkspace } = workspaceSlice.actions;
 
 export default workspaceSlice.reducer;

web/src/types/modules/WorkspaceUser.d.ts

@@ -3,10 +3,11 @@ type Role = "ADMIN" | "USER";
 interface WorkspaceUser {
   workspaceId: WorkspaceId;
   userId: UserId;
-  user: User;
   role: Role;
   createdTs: TimeStamp;
   updatedTs: TimeStamp;
+  email: string;
+  name: string;
 }
 
 interface WorkspaceUserUpsert {

web/src/types/modules/workspace.d.ts

@@ -10,6 +10,8 @@ interface Workspace {
 
   name: string;
   description: string;
+
+  workspaceUserList: WorkspaceUser[];
 }
 
 interface WorkspaceCreate {