Update delete user to deactivate user instead

Author: callmekatootie

src/components/EditProfileModal/index.jsx

@@ -15,11 +15,11 @@ export default function EditProfileModal({
   onCancel,
   updateUser,
   user,
-  deleteUser,
+  deactivateUser,
 }) {
   const [localUser, setLocalUser] = React.useState(user);
   const [isSavingChanges, setIsSavingChanges] = React.useState(false);
-  const [isDeletingUser, setIsDeletingUser] = React.useState(false);
+  const [isDeactivatingUser, setisDeactivatingUser] = React.useState(false);
 
   const updateUserFromChild = (userDataFromChild) => {
     // Only availability can be updated
@@ -33,10 +33,10 @@ export default function EditProfileModal({
     });
   };
 
-  const confirmDeleteUser = () => {
-    if (window.confirm("Are you sure you want to delete this user?")) {
-      setIsDeletingUser(true);
-      deleteUser();
+  const confirmDeactivateUser = () => {
+    if (window.confirm("Are you sure you want to deactivate this user?")) {
+      setisDeactivatingUser(true);
+      deactivateUser();
     }
   };
 
@@ -97,7 +97,7 @@ export default function EditProfileModal({
           <h1>Edit Profile</h1>
           <Button
             onClick={onCancel}
-            disabled={isSavingChanges || isDeletingUser}
+            disabled={isSavingChanges || isDeactivatingUser}
           >
             Cancel
           </Button>
@@ -109,7 +109,7 @@ export default function EditProfileModal({
               setIsSavingChanges(true);
               updateUser(localUser);
             }}
-            disabled={isSavingChanges || isDeletingUser}
+            disabled={isSavingChanges || isDeactivatingUser}
           >
             {isSavingChanges ? "Saving changes, please wait..." : "Save"}
           </Button>
@@ -233,12 +233,12 @@ export default function EditProfileModal({
         </div>
         <Button
           className={
-            isDeletingUser ? style.disabledDangerButton : style.dangerButton
+            isDeactivatingUser ? style.disabledDangerButton : style.dangerButton
           }
-          onClick={confirmDeleteUser}
-          disabled={isDeletingUser || isSavingChanges}
+          onClick={confirmDeactivateUser}
+          disabled={isDeactivatingUser || isSavingChanges}
         >
-          {isDeletingUser ? "Deleting" : "Delete this user"}
+          {isDeactivatingUser ? "Deactivating" : "Deactivate this user"}
         </Button>
       </div>
     </Modal>
@@ -248,6 +248,6 @@ export default function EditProfileModal({
 EditProfileModal.propTypes = {
   onCancel: PT.func.isRequired,
   updateUser: PT.func.isRequired,
-  deleteUser: PT.func.isRequired,
+  deactivateUser: PT.func.isRequired,
   user: PT.shape().isRequired,
 };

src/components/ProfileCard/index.js

@@ -11,6 +11,7 @@ import config from "../../config";
 import * as groupLib from "../../lib/groups";
 import api from "../../services/api";
 import * as cardHelper from "./helper";
+import { getSingleOrg } from "../../services/user-org";
 
 import styles from "./profileCard.module.css";
 import iconStyles from "../../styles/icons.module.css";
@@ -55,9 +56,9 @@ function ProfileCard({
       ),
       companyAttributes: cardHelper.getUserCompanyAttributeDetails(profile),
       avatarColor,
-      // Indicates if the user has been deleted. The user is still shown in this case, but with a
-      // clear indicator about its deleted status.
-      isDeleted: false,
+      // Indicates if the user has been deactivated. The user is still shown in this case, but with a
+      // clear indicator about its deactivated status.
+      isDeactivated: false,
     };
   } else {
     // Data is already in the format seen above. No further processing needed
@@ -194,22 +195,23 @@ function ProfileCard({
   };
 
   /**
-   * Deletes the user
+   * Deactivates the user
    * ! Will call api to update value in database
    */
-  const deleteUser = async () => {
-    const url = `${config.API_URL}/users/${user.id}`;
+  const deactivateUser = async () => {
+    const organizationId = getSingleOrg();
+    const url = `${config.API_URL}/users/${user.id}/externalProfiles/${organizationId}`;
 
     try {
-      await apiClient.delete(url);
+      await apiClient.patch(url, { isInactive: true });
     } catch (error) {
       console.log(error);
       // TODO - Handle error
       return;
     }
 
     setShowEditUserModal(false);
-    setUser({ ...user, isDeleted: true });
+    setUser({ ...user, isDeactivated: true });
   };
 
   /**
@@ -269,7 +271,7 @@ function ProfileCard({
           onCancel={() => setShowEditUserModal(false)}
           updateUser={updateUserFromChild}
           user={user}
-          deleteUser={deleteUser}
+          deactivateUser={deactivateUser}
         />
       ) : null}
       <div className={styles.profileCardHeaderContainer}>
@@ -329,9 +331,9 @@ function ProfileCard({
           />
         </div>
       </div>
-      {user.isDeleted && (
-        <div className={styles.deletedCard}>
-          <span>This user has been deleted</span>
+      {user.isDeactivated && (
+        <div className={styles.deactivatedCard}>
+          <span>This user has been deactivated</span>
         </div>
       )}
     </div>

src/components/ProfileCard/profileCard.module.css

@@ -37,7 +37,7 @@
   display: none;
 }
 
-.deletedCard {
+.deactivatedCard {
   position: absolute;
   top: 0;
   left: 0;
@@ -51,7 +51,7 @@
   align-items: center;
 }
 
-.deletedCard span {
+.deactivatedCard span {
   display: table-cell;
   vertical-align: middle;
   font-family: Helvetica;