Web:Client:Refactoring.

packages/client/src/components/dialogs/DataReassignmentDialog/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -37,21 +37,19 @@ const DataReassignmentDialog = ({
   dataReassignment,
   dataReassignmentProgress,
   currentColorScheme,
-  idCurrentUser,
+  currentUser,
   deleteProfile,
-  deleteAdministrator,
+  isDeleteUserReassignmentYourself,
   t,
   tReady,
   setFilter,
-  setDataReassignmentDeleteAdministrator,
+  setIsDeleteUserReassignmentYourself,
 }) => {
   const [selectorVisible, setSelectorVisible] = useState(false);
-
-  if (deleteAdministrator)
-    deleteAdministrator.label = deleteAdministrator.displayName;
-
-  const [selectedUser, setSelectedUser] = useState(deleteAdministrator);
-  const [isLoadingReassign, setIsLoadingReassign] = useState(false);
+  const defaultSelectedUser = isDeleteUserReassignmentYourself
+    ? currentUser
+    : null;
+  const [selectedUser, setSelectedUser] = useState(defaultSelectedUser);
   const [isDeleteProfile, setIsDeleteProfile] = useState(deleteProfile);
   const [showProgress, setShowProgress] = useState(false);
   const [isReassignCurrentUser, setIsReassignCurrentUser] = useState(false);
@@ -72,10 +70,13 @@ const DataReassignmentDialog = ({
 
   useEffect(() => {
     //If click Delete user
-    if (deleteAdministrator) onReassign();
+    if (isDeleteUserReassignmentYourself) onReassign();
 
-    return () => setDataReassignmentDeleteAdministrator(null);
-  }, [deleteAdministrator]);
+    return () => {
+      setIsDeleteUserReassignmentYourself(false);
+      clearInterval(timerId);
+    };
+  }, [isDeleteUserReassignmentYourself]);
 
   const onToggleDeleteProfile = () => {
     setIsDeleteProfile((remove) => !remove);
@@ -99,7 +100,7 @@ const DataReassignmentDialog = ({
   };
 
   const checkReassignCurrentUser = () => {
-    setIsReassignCurrentUser(idCurrentUser === selectedUser.id);
+    setIsReassignCurrentUser(currentUser.id === selectedUser.id);
   };
 
   const checkProgress = (id) => {
@@ -117,9 +118,8 @@ const DataReassignmentDialog = ({
       });
   };
 
-  const onReassign = useCallback(() => {
+  const onReassign = () => {
     checkReassignCurrentUser();
-    setIsLoadingReassign(true);
     setShowProgress(true);
 
     dataReassignment(user.id, selectedUser.id, isDeleteProfile)
@@ -131,9 +131,7 @@ const DataReassignmentDialog = ({
       .catch((error) => {
         toastr.error(error?.response?.data?.error?.message);
       });
-
-    setIsLoadingReassign(false);
-  }, [user, selectedUser, isDeleteProfile]);
+  };
 
   if (selectorVisible) {
     return (
@@ -199,7 +197,6 @@ const DataReassignmentDialog = ({
           onToggleDeleteProfile={onToggleDeleteProfile}
           selectedUser={selectedUser}
           onReassign={onReassign}
-          isLoadingReassign={isLoadingReassign}
           percent={percent}
           onClose={onClose}
         />
@@ -212,13 +209,13 @@ export default inject(({ auth, peopleStore, setup }) => {
   const {
     setDataReassignmentDialogVisible,
     dataReassignmentDeleteProfile,
-    dataReassignmentDeleteAdministrator,
-    setDataReassignmentDeleteAdministrator,
+    isDeleteUserReassignmentYourself,
+    setIsDeleteUserReassignmentYourself,
   } = peopleStore.dialogStore;
   const { currentColorScheme } = auth.settingsStore;
   const { dataReassignment, dataReassignmentProgress } = setup;
 
-  const { id: idCurrentUser } = peopleStore.authStore.userStore.user;
+  const { user: currentUser } = peopleStore.authStore.userStore;
 
   const { setFilterParams: setFilter } = peopleStore.filterStore;
 
@@ -227,12 +224,12 @@ export default inject(({ auth, peopleStore, setup }) => {
     theme: auth.settingsStore.theme,
     currentColorScheme,
     dataReassignment,
-    idCurrentUser,
+    currentUser,
     dataReassignmentProgress,
     deleteProfile: dataReassignmentDeleteProfile,
     setFilter,
-    deleteAdministrator: dataReassignmentDeleteAdministrator,
-    setDataReassignmentDeleteAdministrator,
+    isDeleteUserReassignmentYourself,
+    setIsDeleteUserReassignmentYourself,
   };
 })(
   observer(

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Loader.js

@@ -1,80 +0,0 @@
-import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
-import CircleLoader from "@docspace/common/components//Loaders/CircleLoader";
-import styled from "styled-components";
-
-const StyledLoader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  .user {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .name {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .avatar {
-    width: 80px;
-    height: 80px;
-  }
-
-  .new-owner_header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding-bottom: 12px;
-  }
-
-  .new-owner_add {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .description {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-`;
-
-const Loader = () => {
-  return (
-    <StyledLoader>
-      <div className="user">
-        <CircleLoader className="avatar" radius="40" x="40" y="40" />
-
-        <div className="name">
-          <RectangleLoader width="154" height="20" />
-          <RectangleLoader width="113" height="20" />
-        </div>
-      </div>
-
-      <div className="new-owner">
-        <div className="new-owner_header">
-          <RectangleLoader width="113" height="16" />
-          <RectangleLoader width="253" height="20" />
-        </div>
-
-        <div className="new-owner_add">
-          <RectangleLoader width="32" height="32" />
-          <RectangleLoader width="113" height="20" />
-        </div>
-      </div>
-
-      <div className="description">
-        <RectangleLoader height="40" />
-        <RectangleLoader width="223" height="20" />
-        <RectangleLoader width="160" height="20" />
-      </div>
-    </StyledLoader>
-  );
-};
-
-export default Loader;

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/NewOwner.js

@@ -18,7 +18,11 @@ const ChoiceNewOwner = ({
     return (
       <StyledSelectedOwnerContainer>
         <StyledSelectedOwner currentColorScheme={currentColorScheme}>
-          <Text className="text">{selectedUser.label}</Text>
+          <Text className="text">
+            {selectedUser.displayName
+              ? selectedUser.displayName
+              : selectedUser.label}
+          </Text>
         </StyledSelectedOwner>
 
         <Link

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/index.js

@@ -1,5 +1,5 @@
 import Progress from "./Progress";
-import Loader from "./Loader";
+import DataReassignmentLoader from "@docspace/common/components/Loaders/DataReassignmentLoader";
 import AccountInfo from "./AccountInfo";
 import Description from "./Description";
 import NewOwner from "./NewOwner";
@@ -15,14 +15,18 @@ const Body = ({
   currentColorScheme,
   onTogglePeopleSelector,
 }) => {
-  if (!tReady) return <Loader />;
+  if (!tReady) return <DataReassignmentLoader />;
 
   if (showProgress)
     return (
       <Progress
         isReassignCurrentUser={isReassignCurrentUser}
         fromUser={user.displayName}
-        toUser={selectedUser.label}
+        toUser={
+          selectedUser.displayName
+            ? selectedUser.displayName
+            : selectedUser.label
+        }
         percent={percent}
       />
     );

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Footer/index.js

@@ -10,7 +10,6 @@ const Footer = ({
   onToggleDeleteProfile,
   selectedUser,
   onReassign,
-  isLoadingReassign,
   percent,
   onClose,
 }) => {
@@ -52,7 +51,6 @@ const Footer = ({
           scale
           isDisabled={!selectedUser}
           onClick={onReassign}
-          isLoading={isLoadingReassign}
         />
 
         <Button