refactor delete logics

reearth · Oct 18, 2024 · 25059bf · 25059bf
1 parent d537b61
commit 25059bf
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 83 deletions.
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
@@ -34,8 +34,8 @@ export default ({
   const [projectName, setProjectName] = useState(project.name);
   const [isHovered, setIsHovered] = useState(false);
   const [isStarred, setIsStarred] = useState(project.starred);
-    const [projectRemoveModalVisible, setProjectRemoveModalVisible] = useState(false);
-
+  const [projectRemoveModalVisible, setProjectRemoveModalVisible] =
+    useState(false);
   // MEMO: this modal state and function will be used in the future
   // const [exportModalVisible, setExportModalVisible] = useState(false);
 
@@ -83,9 +83,9 @@ export default ({
     setIsStarred(project.starred);
   }, [project.starred]);
 
-   const handleProjectRemoveModal = useCallback((value: boolean) => {
-     setProjectRemoveModalVisible(value);
-   }, []);
+  const handleProjectRemoveModal = useCallback((value: boolean) => {
+    setProjectRemoveModalVisible(value);
+  }, []);
 
   const popupMenu: PopupMenuItem[] = [
     {
@@ -157,11 +157,14 @@ export default ({
     return hasMapPublished || hasStoryPublished;
   }, [stories, project.status]);
 
-  const handleProjectRemove = useCallback((projectId?: string) => {
-     if (!projectId) return;
-    onProjectRemove?.(projectId);
-    handleProjectRemoveModal(false);
- }, [handleProjectRemoveModal, onProjectRemove])
+  const handleProjectRemove = useCallback(
+    (projectId?: string) => {
+      if (!projectId) return;
+      onProjectRemove?.(projectId);
+      handleProjectRemoveModal(false);
+    },
+    [handleProjectRemoveModal, onProjectRemove]
+  );
 
   return {
     isEditing,
@@ -177,7 +180,7 @@ export default ({
     handleProjectNameDoubleClick,
     handleProjectStarClick,
     handleExportProject,
-   handleProjectRemoveModal,
+    handleProjectRemoveModal,
     handleProjectRemove
   };
 };
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal.tsx
@@ -11,16 +11,18 @@ import { FC } from "react";
 
 type Props = {
   isVisible: boolean;
+  disabled?: boolean;
   onClose: () => void;
   onProjectRemove: () => void;
 };
 const ProjectRemoveModal: FC<Props> = ({
   isVisible,
+  disabled,
   onClose,
   onProjectRemove
 }) => {
   const t = useT();
-  
+
   return (
     <Modal size="small" visible={isVisible}>
       <ModalPanel
@@ -31,6 +33,7 @@ const ProjectRemoveModal: FC<Props> = ({
               size="normal"
               title="Remove"
               appearance="dangerous"
+              disabled={disabled}
               onClick={onProjectRemove}
             />
           </>

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -40,7 +40,7 @@ export default (workspaceId?: string) => {
     useCreateProject,
     useStarredProjectsQuery,
     useImportProject,
-    useUpdateProjectRecycleBin
+    useUpdateProjectRemove
   } = useProjectFetcher();
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ export default (workspaceId?: string) => {
               createdAt: new Date(project.createdAt),
               coreSupport: project.coreSupport,
               starred: project.starred,
-              deleted: project.isDeleted
+              isDeleted: project.isDeleted
             }
           : undefined
       )
@@ -122,10 +122,6 @@ export default (workspaceId?: string) => {
     autoFillPage(wrapperRef, handleGetMoreProjects);
   }, [handleGetMoreProjects, projects, hasMoreProjects, isLoading]);
 
-  useEffect(() => {
-    refetch();
-  }, [searchTerm, sortValue, refetch]);
-
   const handleProjectSortChange = useCallback(
     (value?: string) => {
       if (!value) return;
@@ -177,19 +173,6 @@ export default (workspaceId?: string) => {
     [useUpdateProject]
   );
 
-  // project remove
-  const handleProjectRemove = useCallback(
-    async (project: Project) => {
-      const updatedProject = {
-        projectId: project.id,
-        deleted: true
-      };
-
-      await useUpdateProjectRecycleBin(updatedProject);
-    },
-    [useUpdateProjectRecycleBin]
-  );
-
   // project open
   const handleProjectOpen = useCallback(
     (sceneId?: string) => {
@@ -269,6 +252,20 @@ export default (workspaceId?: string) => {
     },
     [useImportProject, refetch]
   );
+
+  // project remove
+  const handleProjectRemove = useCallback(
+    async (project: Project) => {
+      const updatedProject = {
+        projectId: project.id,
+        deleted: true
+      };
+
+      await useUpdateProjectRemove(updatedProject);
+    },
+    [useUpdateProjectRemove]
+  );
+
   return {
     filtedProjects,
     hasMoreProjects,

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/ProjectDeleteModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/ProjectDeleteModal.tsx
@@ -12,12 +12,14 @@ import { FC, useState } from "react";
 type Props = {
   isVisible: boolean;
   projectName: string;
+  disabled?: boolean;
   onClose: () => void;
   onProjectDelete: () => void;
 };
 const ProjectDeleteModal: FC<Props> = ({
   isVisible,
   projectName,
+  disabled,
   onClose,
   onProjectDelete
 }) => {
@@ -40,7 +42,7 @@ const ProjectDeleteModal: FC<Props> = ({
             key="delete"
             title={t("I am sure I want to delete this project")}
             appearance="dangerous"
-            disabled={deleteInputName !== projectName}
+            disabled={deleteInputName !== projectName || disabled}
             onClick={onProjectDelete}
           />
         ]}

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/hooks.ts
@@ -4,30 +4,25 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { DeletedProject } from "../../type";
 
 export default (workspaceId?: string) => {
-  const {
-    useDeletedProjectsQuery,
-    useUpdateProjectRecycleBin,
-    useDeleteProject
-  } = useProjectFetcher();
-  const { deletedProjects, loading } = useDeletedProjectsQuery(workspaceId);
-  const [filteredDeletedProjects, setFilteredDeletedProjects] = useState<
-    DeletedProject[]
-  >([]);
-
-  useEffect(() => {
-    const mappedProjects = (deletedProjects ?? [])
-      .map<DeletedProject | undefined>((project) => {
+  const { useDeletedProjectsQuery, useUpdateProjectRemove, useDeleteProject } =
+    useProjectFetcher();
+  const { deletedProjects, loading, refetch } =
+    useDeletedProjectsQuery(workspaceId);
+  const [disabled, setDisabled] = useState(false);
+
+  const filteredDeletedProjects = useMemo(
+    () =>
+      (deletedProjects ?? []).map<DeletedProject | undefined>((project) => {
         if (!project) return undefined;
         return {
           id: project.id,
           name: project.name,
           imageUrl: project.imageUrl,
           isDeleted: project.isDeleted
         };
-      })
-      .filter(Boolean) as DeletedProject[];
-    setFilteredDeletedProjects(mappedProjects);
-  }, [deletedProjects]);
+      }),
+    [deletedProjects]
+  );
 
   const isLoading = useMemo(() => loading, [loading]);
 
@@ -39,22 +34,28 @@ export default (workspaceId?: string) => {
         deleted: false
       };
 
-      await useUpdateProjectRecycleBin(updatedProject);
+      await useUpdateProjectRemove(updatedProject);
     },
 
-    [useUpdateProjectRecycleBin]
+    [useUpdateProjectRemove]
   );
 
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
   const handleProjectDelete = useCallback(
-    async (projectId?: string) => {
+    async (projectId: string) => {
       if (!projectId) return;
+      setDisabled(!disabled);
       await useDeleteProject({ projectId });
     },
-    [useDeleteProject]
+    [disabled, useDeleteProject]
   );
   return {
     filteredDeletedProjects,
     isLoading,
+    disabled,
     handleProjectDelete,
     handleProjectRecovery
   };

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/index.tsx
@@ -15,8 +15,9 @@ const RecycleBin: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
   const {
     filteredDeletedProjects,
     isLoading,
+    disabled,
     handleProjectRecovery,
-    handleProjectDelete
+    handleProjectDelete,
   } = useHooks(workspaceId);
 
   const t = useT();
@@ -34,20 +35,22 @@ const RecycleBin: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                     <RecycleBinItem
                       key={project?.id}
                       project={project}
+                      disabled={disabled}
                       onProjectRecovery={() => handleProjectRecovery(project)}
-                      onProjectDelete={() => handleProjectDelete(project.id)}
+                      onProjectDelete={() =>
+                        project && handleProjectDelete(project.id)
+                      }
                     />
                   ))}
                 </ProjectsGroup>
               </ProjectsContainer>
-              {isLoading && (
-                <LoadingWrapper>
-                  <Loading relative />
-                </LoadingWrapper>
-              )}
             </ProjectsWrapper>
           </ContentWrapper>
         </ManagerContent>
+      ) : isLoading ? (
+        <LoadingWrapper>
+          <Loading relative />
+        </LoadingWrapper>
       ) : (
         <ManagerEmptyContent>
           <Typography size="h5" color={theme.content.weak}>
@@ -95,6 +98,9 @@ const ProjectsGroup = styled("div")(({ theme }) => ({
 }));
 
 const LoadingWrapper = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
   width: "100%",
-  height: 100
+  height: "100vh"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx
@@ -8,11 +8,13 @@ import ProjectDeleteModal from "../ProjectDeleteModal";
 
 type Prop = {
   project?: DeletedProject;
+  disabled?: boolean;
   onProjectDelete: () => void;
   onProjectRecovery?: (projectId?: string) => void;
 };
 const RecycleBinItem: FC<Prop> = ({
   project,
+  disabled,
   onProjectRecovery,
   onProjectDelete
 }) => {
@@ -65,6 +67,7 @@ const RecycleBinItem: FC<Prop> = ({
       {deleteModalVisible && (
         <ProjectDeleteModal
           isVisible={deleteModalVisible}
+          disabled={disabled}
           projectName={project?.name || ""}
           onClose={handleDeleteModalClose}
           onProjectDelete={onProjectDelete}

diff --git a/web/src/beta/features/Dashboard/type.ts b/web/src/beta/features/Dashboard/type.ts
@@ -13,7 +13,7 @@ export type Project = {
   createdAt?: Date;
   projectType?: ProjectType;
   starred?: boolean;
-  deleted?: boolean
+  isDeleted?: boolean
 };
 
 export type DeletedProject = {

diff --git a/web/src/beta/features/ProjectSettings/hooks.ts b/web/src/beta/features/ProjectSettings/hooks.ts
@@ -27,11 +27,12 @@ export default ({ projectId }: Props) => {
     useUpdateProject,
     useUpdateProjectBasicAuth,
     useUpdateProjectAlias,
-    useUpdateProjectRecycleBin
+    useUpdateProjectRemove
   } = useProjectFetcher();
   const { useSceneQuery } = useSceneFetcher();
 
   const { project } = useProjectQuery(projectId);
+  const [disabled, setDisabled] = useState(false);
 
   const { scene } = useSceneQuery({ sceneId: project?.scene?.id });
 
@@ -44,23 +45,18 @@ export default ({ projectId }: Props) => {
     [projectId, useUpdateProject]
   );
 
-  const handleProjectRemove= useCallback(async () => {
+  const handleProjectRemove = useCallback(async () => {
     const updatedProject = {
       projectId,
-      deleted: !project?.isDeleted
+      deleted: true
     };
-
-    const { status } = await useUpdateProjectRecycleBin(updatedProject);
+    setDisabled(!disabled);
+
+    const { status } = await useUpdateProjectRemove(updatedProject);
     if (status === "success") {
       navigate(`/dashboard/${workspaceId}/`);
     }
-  }, [
-    navigate,
-    project?.isDeleted,
-    projectId,
-    useUpdateProjectRecycleBin,
-    workspaceId
-  ]);
+  }, [disabled, navigate, projectId, useUpdateProjectRemove, workspaceId]);
 
   const handleUpdateProjectBasicAuth = useCallback(
     async (settings: PublicBasicAuthSettingsType) => {
@@ -154,6 +150,7 @@ export default ({ projectId }: Props) => {
     currentStory,
     accessToken,
     extensions,
+    disabled,
     handleUpdateProject,
     handleProjectRemove,
     handleUpdateProjectBasicAuth,