feat(web): members setting (#1186)

Co-authored-by: tcsola <[email protected]> Co-authored-by: tcsola <[email protected]> Co-authored-by: airslice <[email protected]>
reearth · Oct 28, 2024 · 8011acd · 8011acd
1 parent 8f0e30e
commit 8011acd
Show file tree

Hide file tree

Showing 13 changed files with 849 additions and 306 deletions.
diff --git a/web/src/beta/features/AccountSetting/index.tsx b/web/src/beta/features/AccountSetting/index.tsx
@@ -50,65 +50,67 @@ const AccountSetting: FC = () => {
   ];
 
   return (
-    <SettingBase tabs={tabs} tab={"account"}>
-      <InnerPage>
-        <SettingsWrapper>
-          <Collapse size="large" title={t("Account")}>
-            <SettingsFields>
-              <InputField
-                title={t("Name")}
-                value={meData.name ? t(meData.name) : ""}
-                appearance="readonly"
-                disabled
-              />
-              <InputField
-                title={t("Email address")}
-                value={meData.email ? t(meData.email) : ""}
-                appearance="readonly"
-                disabled
-              />
+    <>
+      <SettingBase tabs={tabs} tab={"account"}>
+        <InnerPage>
+          <SettingsWrapper>
+            <Collapse size="large" title={t("Account")}>
+              <SettingsFields>
+                <InputField
+                  title={t("Name")}
+                  value={meData.name ? t(meData.name) : ""}
+                  appearance="readonly"
+                  disabled
+                />
+                <InputField
+                  title={t("Email address")}
+                  value={meData.email ? t(meData.email) : ""}
+                  appearance="readonly"
+                  disabled
+                />
 
-              <PasswordWrapper>
-                <Typography size="body">{t("Password")}</Typography>
-                <PasswordInputWrapper>
-                  <TextInput
-                    value={"**********"}
-                    appearance="readonly"
-                    disabled
-                    extendWidth
-                  />
-                  <IconButton
-                    appearance="secondary"
-                    icon="pencilSimple"
-                    onClick={() => {
-                      setChangePasswordModal(true);
-                    }}
-                    size="medium"
-                    hasBorder={true}
-                  />
-                </PasswordInputWrapper>
-              </PasswordWrapper>
-              <SelectField
-                title={t("Language")}
-                value={meData.lang ?? "und"}
-                options={options}
-                onChange={(value) => {
-                  handleUpdateUserLanguage({ lang: value as string });
-                }}
-              />
-            </SettingsFields>
-          </Collapse>
-        </SettingsWrapper>
+                <PasswordWrapper>
+                  <Typography size="body">{t("Password")}</Typography>
+                  <PasswordInputWrapper>
+                    <TextInput
+                      value={"**********"}
+                      appearance="readonly"
+                      disabled
+                      extendWidth
+                    />
+                    <IconButton
+                      appearance="secondary"
+                      icon="pencilSimple"
+                      onClick={() => {
+                        setChangePasswordModal(true);
+                      }}
+                      size="medium"
+                      hasBorder={true}
+                    />
+                  </PasswordInputWrapper>
+                </PasswordWrapper>
+                <SelectField
+                  title={t("Language")}
+                  value={meData.lang ?? "und"}
+                  options={options}
+                  onChange={(value) => {
+                    handleUpdateUserLanguage({ lang: value as string });
+                  }}
+                />
+              </SettingsFields>
+            </Collapse>
+          </SettingsWrapper>
 
-        <PasswordModal
-          isVisible={changePasswordModal}
-          passwordPolicy={passwordPolicy}
-          onClose={() => setChangePasswordModal(false)}
-          handleUpdateUserPassword={handleUpdateUserPassword}
-        />
-      </InnerPage>
+          <PasswordModal
+            isVisible={changePasswordModal}
+            passwordPolicy={passwordPolicy}
+            onClose={() => setChangePasswordModal(false)}
+            handleUpdateUserPassword={handleUpdateUserPassword}
+          />
+        </InnerPage>
+      </SettingBase>
       <CursorStatus />
-    </SettingBase>
+    </>
   );
 };
 export default AccountSetting;

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx b/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>

diff --git a/web/src/beta/features/Dashboard/type.ts b/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;

diff --git a/web/src/beta/features/WorkspaceSetting/hooks.ts b/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,16 +24,14 @@ export default () => {
     useUpdateWorkspace,
     useDeleteWorkspace,
     useAddMemberToWorkspace,
-    useRemoveMemberFromWorkspace
+    useRemoveMemberFromWorkspace,
+    useUpdateMemberOfWorkspace
   } = useWorkspaceFetcher();
 
   // Fetch a specific workspace
   const handleFetchWorkspace = useCallback(
     (workspaceId: string) => {
       const { workspace, loading, error } = useWorkspaceQuery(workspaceId);
-      if (error) {
-        console.error("Failed to fetch workspace:", error);
-      }
       return { workspace, loading, error };
     },
     [useWorkspaceQuery]
@@ -42,22 +40,14 @@ export default () => {
   // Fetch all workspaces
   const handleFetchWorkspaces = useCallback(() => {
     const { workspaces, loading, error } = useWorkspacesQuery();
-    if (error) {
-      console.error("Failed to fetch workspaces:", error);
-    }
     return { workspaces, loading, error };
   }, [useWorkspacesQuery]);
 
   // Create a new workspace
   const handleCreateWorkspace = useCallback(
     async ({ name }: WorkspacePayload) => {
-      try {
-        const { status } = await useCreateWorkspace(name);
-        if (status === "success") {
-          console.log("Workspace created successfully");
-        }
-      } catch (error) {
-        console.error("Failed to create workspace:", error);
+      if (name) {
+        await useCreateWorkspace(name);
       }
     },
     [useCreateWorkspace]
@@ -66,13 +56,8 @@ export default () => {
   // Update an existing workspace
   const handleUpdateWorkspace = useCallback(
     async ({ teamId, name }: WorkspacePayload) => {
-      try {
-        const { status } = await useUpdateWorkspace(teamId, name);
-        if (status === "success") {
-          console.log("Workspace updated successfully");
-        }
-      } catch (error) {
-        console.error("Failed to update workspace:", error);
+      if (name && teamId) {
+        await useUpdateWorkspace(teamId, name);
       }
     },
     [useUpdateWorkspace]
@@ -81,13 +66,8 @@ export default () => {
   // Delete a workspace
   const handleDeleteWorkspace = useCallback(
     async (teamId: string) => {
-      try {
-        const { status } = await useDeleteWorkspace(teamId);
-        if (status === "success") {
-          console.log("Workspace deleted successfully");
-        }
-      } catch (error) {
-        console.error("Failed to delete workspace:", error);
+      if (teamId) {
+        await useDeleteWorkspace(teamId);
       }
     },
     [useDeleteWorkspace]
@@ -96,19 +76,8 @@ export default () => {
   // Add a member to a workspace
   const handleAddMemberToWorkspace = useCallback(
     async ({ teamId, userId, role }: WorkspacePayload) => {
-      try {
-        if (userId && role) {
-          const { status } = await useAddMemberToWorkspace(
-            teamId,
-            userId,
-            role
-          );
-          if (status === "success") {
-            console.log("Member added successfully");
-          }
-        }
-      } catch (error) {
-        console.error("Failed to add member to workspace:", error);
+      if (userId && role) {
+        await useAddMemberToWorkspace(teamId, userId, role);
       }
     },
     [useAddMemberToWorkspace]
@@ -117,27 +86,44 @@ export default () => {
   // Remove a member from a workspace
   const handleRemoveMemberFromWorkspace = useCallback(
     async ({ teamId, userId }: WorkspacePayload) => {
-      try {
-        if (userId) {
-          const { status } = await useRemoveMemberFromWorkspace(teamId, userId);
-          if (status === "success") {
-            console.log("Member removed successfully");
-          }
-        }
-      } catch (error) {
-        console.error("Failed to remove member from workspace:", error);
+      if (userId) {
+        await useRemoveMemberFromWorkspace(teamId, userId);
       }
     },
     [useRemoveMemberFromWorkspace]
   );
 
+  // update a member of workspace
+  const handleUpdateMemberOfWorkspace = useCallback(
+    async ({ teamId, userId, role }: WorkspacePayload) => {
+      if (userId && role) {
+        await useUpdateMemberOfWorkspace(teamId, userId, role);
+      }
+    },
+    [useUpdateMemberOfWorkspace]
+  );
+
+  const { useSearchUser } = useMeFetcher();
+  const handleSearchUser = useCallback(
+    (nameOrEmail: string) => {
+      const { user, status } = useSearchUser(nameOrEmail, {
+        skip: !nameOrEmail
+      });
+
+      return { searchUser: user, searchUserStatus: status };
+    },
+    [useSearchUser]
+  );
+
   return {
     handleFetchWorkspace,
     handleFetchWorkspaces,
     handleCreateWorkspace,
     handleUpdateWorkspace,
     handleDeleteWorkspace,
     handleAddMemberToWorkspace,
-    handleRemoveMemberFromWorkspace
+    handleRemoveMemberFromWorkspace,
+    handleUpdateMemberOfWorkspace,
+    handleSearchUser
   };
 };
diff --git a/web/src/beta/features/WorkspaceSetting/index.tsx b/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);
@@ -27,14 +37,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}
+          />
+        )}
       </SettingBase>
       <CursorStatus />
     </>