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()}
         />
       )}
     </>