fix(web): Fix status of member's setting page

web/src/beta/features/WorkspaceSetting/hooks.ts

@@ -77,8 +77,10 @@ export default () => {
   const handleAddMemberToWorkspace = useCallback(
     async ({ teamId, userId, role }: WorkspacePayload) => {
       if (userId && role) {
-        await useAddMemberToWorkspace(teamId, userId, role);
+        const { status } = await useAddMemberToWorkspace(teamId, userId, role);
+        return { status };
       }
+      return { status: "error" };
     },
     [useAddMemberToWorkspace]
   );
@@ -87,8 +89,10 @@ export default () => {
   const handleRemoveMemberFromWorkspace = useCallback(
     async ({ teamId, userId }: WorkspacePayload) => {
       if (userId) {
-        await useRemoveMemberFromWorkspace(teamId, userId);
+        const { status } = await useRemoveMemberFromWorkspace(teamId, userId);
+        return { status };
       }
+      return { status: "error" };
     },
     [useRemoveMemberFromWorkspace]
   );
@@ -97,8 +101,14 @@ export default () => {
   const handleUpdateMemberOfWorkspace = useCallback(
     async ({ teamId, userId, role }: WorkspacePayload) => {
       if (userId && role) {
-        await useUpdateMemberOfWorkspace(teamId, userId, role);
+        const { status } = await useUpdateMemberOfWorkspace(
+          teamId,
+          userId,
+          role
+        );
+        return { status };
       }
+      return { status: "error" };
     },
     [useUpdateMemberOfWorkspace]
   );

web/src/beta/features/WorkspaceSetting/innerPages/Members/Members.tsx

@@ -16,11 +16,11 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { SelectField } from "@reearth/beta/ui/fields";
 import { metricsSizes } from "@reearth/beta/utils/metrics";
-import { Role } from "@reearth/services/gql";
+import { Role, TeamMember } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
-import { useWorkspace } from "@reearth/services/state";
+import { useWorkspace, Workspace } from "@reearth/services/state";
 import { styled, useTheme, keyframes } from "@reearth/services/theme";
-import { FC, KeyboardEvent, useEffect, useState } from "react";
+import { FC, KeyboardEvent, useCallback, useEffect, useState } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 import { WorkspacePayload } from "../../hooks";
@@ -30,7 +30,7 @@ type Props = {
     teamId,
     userId,
     role
-  }: WorkspacePayload) => Promise<void>;
+  }: WorkspacePayload) => Promise<{ status: string }>;
   handleSearchUser: (nameOrEmail: string) =>
     | {
         searchUser: {
@@ -51,22 +51,13 @@ type Props = {
     teamId,
     userId,
     role
-  }: WorkspacePayload) => Promise<void>;
+  }: WorkspacePayload) => Promise<{ status: string }>;
   handleRemoveMemberFromWorkspace: ({
     teamId,
     userId
-  }: WorkspacePayload) => Promise<void>;
+  }: WorkspacePayload) => Promise<{ status: string }>;
 };
 
-type MemberData = {
-  id: string;
-  role: Role;
-  username?: string;
-  email?: string;
-};
-
-type MembersData = MemberData[];
-
 type MemberSearchResult = {
   userName: string;
   email: string;
@@ -88,21 +79,7 @@ const Members: FC<Props> = ({
     { value: "OWNER", label: t("Owner") }
   ];
 
-  const [currentWorkspace] = useWorkspace();
-  const [workspaceMembers, setWorkspaceMembers] = useState<MembersData>([]);
-
-  useEffect(() => {
-    setWorkspaceMembers(
-      currentWorkspace?.members
-        ?.filter((m) => !!m.user)
-        .map((member) => ({
-          id: member.userId,
-          role: member.role,
-          username: member.user?.name,
-          email: member.user?.email
-        })) ?? []
-    );
-  }, [currentWorkspace]);
+  const [currentWorkspace, setCurrentWorkspace] = useWorkspace();
 
   const [addMemberModal, setAddMemberModal] = useState<boolean>(false);
   const [activeEditIndex, setActiveEditIndex] = useState<number | null>(null);
@@ -157,70 +134,109 @@ const Members: FC<Props> = ({
     setActiveEditIndex((prevIndex) => (prevIndex === index ? null : index));
   };
 
-  const handleChangeRole = async (
-    user: MemberData,
-    index: number,
-    roleValue: string | string[]
-  ) => {
-    if (currentWorkspace?.id) {
-      await handleUpdateMemberOfWorkspace({
-        teamId: currentWorkspace?.id,
-        userId: user.id,
-        role: roleValue as Role
-      });
-      setWorkspaceMembers((prevMembers) => {
-        return prevMembers.map((workspaceMember) =>
-          workspaceMember.id === user.id
-            ? {
-                ...workspaceMember,
-                role: roleValue as Role
-              }
-            : workspaceMember
-        );
-      });
-      setActiveEditIndex((prevIndex) => (prevIndex === index ? null : index));
-    }
-  };
+  const handleChangeRole = useCallback(
+    async (member: TeamMember, index: number, roleValue: string | string[]) => {
+      if (currentWorkspace?.id) {
+        const { status } = await handleUpdateMemberOfWorkspace({
+          teamId: currentWorkspace?.id,
+          userId: member.userId,
+          role: roleValue as Role
+        });
+        if (status === "success") {
+          setCurrentWorkspace((prevMembers) => {
+            return {
+              ...prevMembers,
+              members: prevMembers?.members?.map((workspaceMember) =>
+                workspaceMember.userId === member.userId
+                  ? {
+                      ...workspaceMember,
+                      role: roleValue as Role
+                    }
+                  : workspaceMember
+              )
+            } as Workspace;
+          });
+        }
+        setActiveEditIndex((prevIndex) => (prevIndex === index ? null : index));
+      }
+    },
+    [
+      currentWorkspace?.id,
+      handleUpdateMemberOfWorkspace,
+      setCurrentWorkspace,
+      setActiveEditIndex
+    ]
+  );
 
-  const handleRemoveMemberButtonClick = (userId: string) => {
-    if (currentWorkspace?.id) {
-      handleRemoveMemberFromWorkspace({
-        teamId: currentWorkspace?.id,
-        userId
-      });
-      setWorkspaceMembers(
-        workspaceMembers.filter(
-          (workspaceMember) => workspaceMember.id !== userId
-        )
-      );
-    }
-  };
+  const handleRemoveMemberButtonClick = useCallback(
+    async (userId: string) => {
+      if (currentWorkspace?.id) {
+        const { status } = await handleRemoveMemberFromWorkspace({
+          teamId: currentWorkspace?.id,
+          userId
+        });
+        if (status === "success") {
+          setCurrentWorkspace((prevMembers) => {
+            return {
+              ...prevMembers,
+              members: prevMembers?.members?.filter(
+                (workspaceMember) => workspaceMember.userId !== userId
+              )
+            } as Workspace;
+          });
+        }
+      }
+    },
+    [currentWorkspace?.id, handleRemoveMemberFromWorkspace, setCurrentWorkspace]
+  );
 
-  const handleAddMember = () => {
-    memberSearchResults.forEach((memberSearchResult) => {
+  const handleAddMember = useCallback(() => {
+    memberSearchResults.forEach(async (memberSearchResult) => {
       if (currentWorkspace?.id) {
-        handleAddMemberToWorkspace({
+        const { status } = await handleAddMemberToWorkspace({
           name: memberSearchResult.userName,
           teamId: currentWorkspace?.id,
           userId: memberSearchResult.id,
           role: Role.Reader
         });
-        setWorkspaceMembers((prevMembers) => [
-          ...prevMembers,
-          {
-            username: memberSearchResult.userName,
-            email: memberSearchResult.email,
-            role: Role.Reader,
-            id: memberSearchResult.id
-          }
-        ]);
+
+        if (status === "success") {
+          setCurrentWorkspace((prevMembers) => {
+            return {
+              ...prevMembers,
+              members: [
+                ...(prevMembers?.members || []),
+                {
+                  __typename: "TeamMember",
+                  user: {
+                    email: memberSearchResult.email,
+                    id: memberSearchResult.id,
+                    name: memberSearchResult.userName,
+                    __typename: "User"
+                  },
+                  userId: memberSearchResult.id,
+                  role: Role.Reader
+                }
+              ]
+            } as Workspace;
+          });
+        }
         setAddMemberModal(false);
         setMemberSearchInput("");
         setDebouncedInput("");
         setMemberSearchResults([]);
       }
     });
-  };
+  }, [
+    memberSearchResults,
+    currentWorkspace?.id,
+    handleAddMemberToWorkspace,
+    setCurrentWorkspace,
+    setAddMemberModal,
+    setMemberSearchInput,
+    setDebouncedInput,
+    setMemberSearchResults
+  ]);
 
   const handleDeleteUserForSearchResult = (
     memberSearchResult: MemberSearchResult
@@ -263,19 +279,19 @@ const Members: FC<Props> = ({
               <TableHeader>{t("Role")}</TableHeader>
               <TableHeader />
 
-              {workspaceMembers?.map((user, index) => (
+              {currentWorkspace?.members?.map((member, index) => (
                 <Fragment key={index}>
-                  <TableRow>{user.username}</TableRow>
-                  <TableRow>{user.email}</TableRow>
+                  <TableRow>{member.user?.name}</TableRow>
+                  <TableRow>{member.user?.email}</TableRow>
                   {activeEditIndex !== index ? (
-                    <TableRow>{user.role}</TableRow>
+                    <TableRow>{member.role}</TableRow>
                   ) : (
                     <TableRow>
                       <SelectField
-                        value={user.role}
+                        value={member.role}
                         options={roles}
                         onChange={async (roleValue) => {
-                          await handleChangeRole(user, index, roleValue);
+                          await handleChangeRole(member, index, roleValue);
                         }}
                       />
                     </TableRow>
@@ -294,15 +310,16 @@ const Members: FC<Props> = ({
                           icon: "arrowLeftRight",
                           id: "changeRole",
                           title: t("Change Role"),
-                          disabled: user.role === "OWNER",
+                          disabled: member.role === "OWNER",
                           onClick: () => handleChangeRoleButtonClick(index)
                         },
                         {
                           icon: "close",
                           id: "remove",
                           title: t("Remove"),
-                          disabled: user.role === "OWNER",
-                          onClick: () => handleRemoveMemberButtonClick(user.id)
+                          disabled: member.role === "OWNER",
+                          onClick: () =>
+                            handleRemoveMemberButtonClick(member.userId)
                         }
                       ]}
                     />
@@ -330,10 +347,10 @@ const Members: FC<Props> = ({
               title={t("Add")}
               appearance="primary"
               disabled={
-                workspaceMembers?.some((member) =>
+                currentWorkspace?.members?.some((member) =>
                   memberSearchResults.find(
                     (memberSearchResult) =>
-                      memberSearchResult.email === member.email
+                      memberSearchResult.email === member.user?.email
                   )
                 ) || memberSearchResults.length === 0
               }