feat(web): members setting

web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx

@@ -1,10 +1,9 @@
 import { Typography } from "@reearth/beta/lib/reearth-ui";
+import { TeamMember } from "@reearth/services/gql";
 import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
-import { Member } from "../../type";
-
-const ListItem: FC<{ member: Member }> = ({ member }) => {
+const ListItem: FC<{ member: TeamMember }> = ({ member }) => {
   return (
     <StyledListItem>
       <Avatar>

web/src/beta/features/Dashboard/type.ts

@@ -1,4 +1,5 @@
 import { IconName } from "@reearth/beta/lib/reearth-ui";
+import { TeamMember } from "@reearth/services/gql";
 import { ProjectType } from "@reearth/types";
 
 export type Project = {
@@ -47,7 +48,7 @@ export type Member = {
 export type Workspace = {
   id: string;
   name: string;
-  members?: Member[];
+  members?: TeamMember[];
   policyId?: string | null;
   policy?: { id: string; name: string } | null;
   personal?: boolean;

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

@@ -1,9 +1,9 @@
-import { useWorkspaceFetcher } from "@reearth/services/api";
+import { useMeFetcher, useWorkspaceFetcher } from "@reearth/services/api";
 import { Role } from "@reearth/services/gql";
 import { useCallback } from "react";
 
 export type WorkspacePayload = {
-  name: string;
+  name?: string;
   userId?: string;
   teamId: string;
   role?: Role;
@@ -24,7 +24,8 @@ export default () => {
     useUpdateWorkspace,
     useDeleteWorkspace,
     useAddMemberToWorkspace,
-    useRemoveMemberFromWorkspace
+    useRemoveMemberFromWorkspace,
+    useUpdateMemberOfWorkspace
   } = useWorkspaceFetcher();
 
   // Fetch a specific workspace
@@ -52,9 +53,11 @@ export default () => {
   const handleCreateWorkspace = useCallback(
     async ({ name }: WorkspacePayload) => {
       try {
-        const { status } = await useCreateWorkspace(name);
-        if (status === "success") {
-          console.log("Workspace created successfully");
+        if (name) {
+          const { status } = await useCreateWorkspace(name);
+          if (status === "success") {
+            console.log("Workspace created successfully");
+          }
         }
       } catch (error) {
         console.error("Failed to create workspace:", error);
@@ -67,9 +70,11 @@ export default () => {
   const handleUpdateWorkspace = useCallback(
     async ({ teamId, name }: WorkspacePayload) => {
       try {
-        const { status } = await useUpdateWorkspace(teamId, name);
-        if (status === "success") {
-          console.log("Workspace updated successfully");
+        if (name && teamId) {
+          const { status } = await useUpdateWorkspace(teamId, name);
+          if (status === "success") {
+            console.log("Workspace updated successfully");
+          }
         }
       } catch (error) {
         console.error("Failed to update workspace:", error);
@@ -82,9 +87,11 @@ export default () => {
   const handleDeleteWorkspace = useCallback(
     async (teamId: string) => {
       try {
-        const { status } = await useDeleteWorkspace(teamId);
-        if (status === "success") {
-          console.log("Workspace deleted successfully");
+        if (teamId) {
+          const { status } = await useDeleteWorkspace(teamId);
+          if (status === "success") {
+            console.log("Workspace deleted successfully");
+          }
         }
       } catch (error) {
         console.error("Failed to delete workspace:", error);
@@ -131,13 +138,55 @@ export default () => {
     [useRemoveMemberFromWorkspace]
   );
 
+  // update a member of workspace
+  const handleUpdateMemberOfWorkspace = useCallback(
+    async ({ teamId, userId, role }: WorkspacePayload) => {
+      try {
+        if (userId && role) {
+          const { status } = await useUpdateMemberOfWorkspace(
+            teamId,
+            userId,
+            role
+          );
+          if (status === "success") {
+            console.log("Member update successfully");
+          }
+        }
+      } catch (error) {
+        console.error("Failed to update member from workspace:", error);
+      }
+    },
+    [useUpdateMemberOfWorkspace]
+  );
+
+  const { useSearchUser } = useMeFetcher();
+  const handleSearchUser = useCallback(
+    (nameOrEmail: string) => {
+      try {
+        const { user, status } = useSearchUser(nameOrEmail, {
+          skip: !nameOrEmail
+        });
+        if (status === "success") {
+          console.log("Search Member successfully");
+        }
+        return { searchUser: user, searchUserStatus: status };
+      } catch (err) {
+        console.error("Failed to search user:", err);
+        return { error: err };
+      }
+    },
+    [useSearchUser]
+  );
+
   return {
     handleFetchWorkspace,
     handleFetchWorkspaces,
     handleCreateWorkspace,
     handleUpdateWorkspace,
     handleDeleteWorkspace,
     handleAddMemberToWorkspace,
-    handleRemoveMemberFromWorkspace
+    handleRemoveMemberFromWorkspace,
+    handleUpdateMemberOfWorkspace,
+    handleSearchUser
   };
 };

web/src/beta/features/WorkspaceSetting/index.tsx

@@ -6,18 +6,28 @@ import CursorStatus from "../CursorStatus";
 import useProjectsHook from "../Dashboard/ContentsContainer/Projects/hooks";
 
 import useWorkspaceHook from "./hooks";
+import Members from "./innerPages/Members/Members";
 import Workspace from "./innerPages/Workspaces/Workspaces";
 
 type Props = {
   tab: string;
   workspaceId?: string;
 };
 
+enum TABS {
+  WORKSPACE = "workspace",
+  MEMBERS = "members"
+}
+
 const WorkspaceSetting: FC<Props> = ({ tab, workspaceId }) => {
   const {
     handleFetchWorkspaces,
     handleUpdateWorkspace,
-    handleDeleteWorkspace
+    handleDeleteWorkspace,
+    handleAddMemberToWorkspace,
+    handleSearchUser,
+    handleUpdateMemberOfWorkspace,
+    handleRemoveMemberFromWorkspace
   } = useWorkspaceHook();
 
   const { filtedProjects } = useProjectsHook(workspaceId);
@@ -26,14 +36,22 @@ const WorkspaceSetting: FC<Props> = ({ tab, workspaceId }) => {
 
   return (
     <SettingBase tabs={tabs} tab={tab} workspaceId={workspaceId}>
-      {tab === "workspace" && (
+      {tab === TABS.WORKSPACE && (
         <Workspace
           handleFetchWorkspaces={handleFetchWorkspaces}
           handleUpdateWorkspace={handleUpdateWorkspace}
           handleDeleteWorkspace={handleDeleteWorkspace}
           projectsCount={filtedProjects?.length}
         />
       )}
+      {tab === TABS.MEMBERS && (
+        <Members
+          handleSearchUser={handleSearchUser}
+          handleAddMemberToWorkspace={handleAddMemberToWorkspace}
+          handleUpdateMemberOfWorkspace={handleUpdateMemberOfWorkspace}
+          handleRemoveMemberFromWorkspace={handleRemoveMemberFromWorkspace}
+        />
+      )}
       <CursorStatus />
     </SettingBase>
   );