feat(web): workspace setting page

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

@@ -1,18 +1,37 @@
-import { useMeFetcher } from "@reearth/services/api";
+import {
+  useMeFetcher,
+  useProjectFetcher,
+  useWorkspaceFetcher
+} from "@reearth/services/api";
+import { Role } from "@reearth/services/gql";
+import { useWorkspace } from "@reearth/services/state";
 import { useCallback } from "react";
 
 export type UpdatePasswordType = {
   password: string;
   passwordConfirmation: string;
 };
 
+export type WorkspacePayload = {
+  name: string;
+  userId?: string;
+  teamId: string;
+  role?: Role;
+};
+
+export type Projects = {
+  name: string;
+  userId?: string;
+  teamId: string;
+  role?: Role;
+};
+
 export default () => {
   const { useMeQuery, useUpdatePassword, useDeleteUser } = useMeFetcher();
+  const { me: data } = useMeQuery();
 
   const passwordPolicy = window.REEARTH_CONFIG?.passwordPolicy;
 
-  const { me: data } = useMeQuery();
-
   const handleUpdateUserPassword = useCallback(
     async ({ password, passwordConfirmation }: UpdatePasswordType) => {
       try {
@@ -33,10 +52,141 @@ export default () => {
     }
   }, [data.id, useDeleteUser]);
 
+  const [currentWorkspace] = useWorkspace();
+
+  const { useProjectsQuery } = useProjectFetcher();
+  // Fetch all projects base from workspaceId
+  const { projects } = useProjectsQuery({
+    teamId: currentWorkspace?.id || "",
+    pagination: { first: 16 }
+  });
+
+  const {
+    useWorkspaceQuery,
+    useWorkspacesQuery,
+    useCreateWorkspace,
+    useUpdateWorkspace,
+    useDeleteWorkspace,
+    useAddMemberToWorkspace,
+    useRemoveMemberFromWorkspace
+  } = 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]
+  );
+
+  // 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);
+      }
+    },
+    [useCreateWorkspace]
+  );
+
+  // 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);
+      }
+    },
+    [useUpdateWorkspace]
+  );
+
+  // 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);
+      }
+    },
+    [useDeleteWorkspace]
+  );
+
+  // 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);
+      }
+    },
+    [useAddMemberToWorkspace]
+  );
+
+  // 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);
+      }
+    },
+    [useRemoveMemberFromWorkspace]
+  );
+
   return {
     meData: data,
     passwordPolicy,
     handleUpdateUserPassword,
-    handleDeleteUser
+    handleDeleteUser,
+    projectsCount: projects?.length,
+    handleFetchWorkspace,
+    handleFetchWorkspaces,
+    handleCreateWorkspace,
+    handleUpdateWorkspace,
+    handleDeleteWorkspace,
+    handleAddMemberToWorkspace,
+    handleRemoveMemberFromWorkspace
   };
 };

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

@@ -13,6 +13,7 @@ import Navbar from "../Navbar";
 
 import useHook from "./hooks";
 import AccountSetting from "./innerPages/AccountSetting";
+import WorkspaceSetting from "./innerPages/WorkspaceSetting";
 
 type Props = {
   sceneId?: string;
@@ -22,10 +23,10 @@ type Props = {
 };
 
 export const accountSettingTabs = [
-  { id: "account", text: "Account", icon: "user" }
+  { id: "account", text: "Account", icon: "user" },
+  { id: "workspace", text: "Workspace", icon: "usersFour" }
   // TODO: enable these when page ready
-  // { id: "workspace", text: "Workspace", icon: "users" },
-  // { id: "members", text: "Members", icon: "usersFour" }
+  // { id: "members", text: "Members", icon: "users" }
 ] as const;
 
 const AccountAndWorkSpaceSetting: FC<Props> = ({ tab }) => {
@@ -40,7 +41,15 @@ const AccountAndWorkSpaceSetting: FC<Props> = ({ tab }) => {
       })),
     [t]
   );
-  const { meData, passwordPolicy, handleUpdateUserPassword } = useHook();
+  const {
+    meData,
+    passwordPolicy,
+    handleFetchWorkspaces,
+    handleUpdateUserPassword,
+    projectsCount,
+    handleUpdateWorkspace,
+    handleDeleteWorkspace
+  } = useHook();
   const { name, email } = meData;
 
   return (
@@ -66,11 +75,19 @@ const AccountAndWorkSpaceSetting: FC<Props> = ({ tab }) => {
         <Content>
           {tab === "account" && (
             <AccountSetting
-              onUpdateUserPassword={handleUpdateUserPassword}
+              handleUpdateUserPassword={handleUpdateUserPassword}
               passwordPolicy={passwordPolicy}
               informationData={{ name, email }}
             />
           )}
+          {tab === "workspace" && (
+            <WorkspaceSetting
+              handleFetchWorkspaces={handleFetchWorkspaces}
+              handleUpdateWorkspace={handleUpdateWorkspace}
+              handleDeleteWorkspace={handleDeleteWorkspace}
+              projectsCount={projectsCount}
+            />
+          )}
         </Content>
       </MainSection>
     </Wrapper>

web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/PasswordModal/index.tsx

@@ -25,7 +25,7 @@ type Props = {
   isVisible: boolean;
   onClose?: () => void;
   passwordPolicy?: PasswordPolicy;
-  onPasswordUpdate?: ({
+  handleUpdateUserPassword?: ({
     password,
     passwordConfirmation
   }: {
@@ -38,7 +38,7 @@ const PasswordModal: React.FC<Props> = ({
   isVisible,
   onClose,
   passwordPolicy,
-  onPasswordUpdate
+  handleUpdateUserPassword
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -95,10 +95,10 @@ const PasswordModal: React.FC<Props> = ({
 
   const handleSave = useCallback(() => {
     if (password === passwordConfirmation) {
-      onPasswordUpdate?.({ password, passwordConfirmation });
+      handleUpdateUserPassword?.({ password, passwordConfirmation });
       handleClose();
     }
-  }, [onPasswordUpdate, handleClose, password, passwordConfirmation]);
+  }, [handleUpdateUserPassword, handleClose, password, passwordConfirmation]);
 
   useEffect(() => {
     if (

web/src/beta/features/AccountAndWorkSpaceSetting/innerPages/AccountSetting/index.tsx

@@ -18,15 +18,15 @@ import PasswordModal from "./PasswordModal";
 type Props = {
   informationData: { name?: string; email?: string };
   passwordPolicy?: PasswordPolicy;
-  onUpdateUserPassword: ({
+  handleUpdateUserPassword: ({
     password,
     passwordConfirmation
   }: UpdatePasswordType) => Promise<void>;
 };
 
 const AccountSetting: FC<Props> = ({
   passwordPolicy,
-  onUpdateUserPassword,
+  handleUpdateUserPassword,
   informationData
 }) => {
   const t = useT();
@@ -79,7 +79,7 @@ const AccountSetting: FC<Props> = ({
         isVisible={changePasswordModal}
         passwordPolicy={passwordPolicy}
         onClose={() => setChangePasswordModal(false)}
-        onPasswordUpdate={onUpdateUserPassword}
+        handleUpdateUserPassword={handleUpdateUserPassword}
       />
     </InnerPage>
   );