feat(list users): finishing delete user in users list page

src/DTOs/User.tsx

@@ -15,8 +15,11 @@ interface UserData {
 export interface UserContextData {
   users: Array<UserData>;
   updateUserTypeSuccess: boolean;
+  deleteUserLoader: boolean;
+  deleteUserError: string;
   getUsers(): void;
-  clearUpdateStatus(): void;
+  clearAllSuccessStatus(): void;
+  deleteUser(id: string): void;
   updateUserType(credentials: { id: string; userType: string }): void;
 }
 

src/contexts/user.tsx

@@ -16,6 +16,9 @@ const UsersProvider = ({ children }: UserProviderProps) => {
   const [users, setUsers] = useState<UserData[]>([
     { id: '', name: '', type: '' },
   ]);
+
+  const [deleteUserLoader, setDeleteUserLoader] = useState<boolean>(false);
+  const [deleteUserError, setDeleteUserError] = useState<string>('');
   const [updateUserTypeSuccess, setUpdateUserTypeSuccess] = useState<boolean>(
     false,
   );
@@ -35,18 +38,32 @@ const UsersProvider = ({ children }: UserProviderProps) => {
     }
   }, []);
 
-  const clearUpdateStatus = useCallback(() => {
+  const deleteUser = useCallback(async id => {
+    setDeleteUserLoader(true);
+    try {
+      await api.delete(`/users/${id}`);
+    } catch (error) {
+      setDeleteUserError(error?.response?.data?.message);
+    }
+    setDeleteUserLoader(false);
+  }, []);
+
+  const clearAllSuccessStatus = useCallback(() => {
     setUpdateUserTypeSuccess(false);
+    setDeleteUserError('');
   }, []);
 
   return (
     <UsersContext.Provider
       value={{
         users,
         updateUserTypeSuccess,
+        deleteUserLoader,
+        deleteUserError,
         getUsers,
+        deleteUser,
         updateUserType,
-        clearUpdateStatus,
+        clearAllSuccessStatus,
       }}
     >
       {children}

src/pages/Users/components/UserModal/DeleteUser/index.tsx

@@ -3,35 +3,43 @@ import React, { useCallback, useState } from 'react';
 import { ReactComponent as WarnIcon } from 'assets/warn.svg';
 import Button from 'components/Button/Button';
 
+import { useUsers } from 'contexts/user';
 import { Container, RemoveWarnSuccess } from './styles';
 
 interface DeleteUserProps {
   setShowDeleteUser: Function;
+  user: { id: string };
 }
 
-const DeleteUser = ({ setShowDeleteUser }: DeleteUserProps) => {
-  const [deleteUserSuccess, setDeleteUserSuccess] = useState<boolean>(false);
+const DeleteUser = ({ setShowDeleteUser, user }: DeleteUserProps) => {
+  const { deleteUser, deleteUserLoader, deleteUserError } = useUsers();
+
+  const [showDeleteStatus, setShowDeleteStatus] = useState<boolean>(false);
 
   const handleGoBack = useCallback(() => {
     if (setShowDeleteUser) setShowDeleteUser(false);
   }, [setShowDeleteUser]);
 
-  const handleDeleteUser = useCallback(() => {
-    setDeleteUserSuccess(true);
-  }, []);
+  const handleDeleteUser = useCallback(async () => {
+    setShowDeleteStatus(true);
+    await deleteUser(user?.id);
+  }, [user, deleteUser]);
 
   return (
     <Container>
-      {deleteUserSuccess ? (
-        <RemoveWarnSuccess>
-          <div className="warn">
-            <WarnIcon />
-            <h1>USUÁRIO REMOVIDO</h1>
-          </div>
-          <Button color="var(--gray)" onClick={handleGoBack}>
-            Voltar
-          </Button>
-        </RemoveWarnSuccess>
+      {showDeleteStatus ? (
+        <>
+          {deleteUserLoader ? (
+            <h1>Carregando</h1>
+          ) : (
+            <RemoveWarnSuccess>
+              <div className="warn">
+                <WarnIcon />
+                <h1>{deleteUserError || 'USUÁRIO REMOVIDO'}</h1>
+              </div>
+            </RemoveWarnSuccess>
+          )}
+        </>
       ) : (
         <>
           <section className="warn">

src/pages/Users/components/UserModal/DeleteUser/styles.ts

@@ -47,7 +47,7 @@ export const Container = styled.div`
       font-family: Roboto;
       font-style: normal;
       font-weight: bold;
-      font-size: 5rem;
+      font-size: 4rem;
       line-height: 5.9rem;
       text-align: center;
 

src/pages/Users/components/UserModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useUsers } from 'contexts/user';
 import DefaultModal from 'components/DefaultModal';
@@ -14,34 +14,38 @@ interface UserModalProps {
 }
 
 const UserModal = ({ selectedUser, onClose }: UserModalProps) => {
-  const { updateUserTypeSuccess, clearUpdateStatus, getUsers } = useUsers();
+  const { updateUserTypeSuccess, clearAllSuccessStatus, getUsers } = useUsers();
 
-  const [showSuccessElement, setShowSuccessElement] = useState<boolean>(false);
   const [showDeleteUser, setShowDeleteUser] = useState<boolean>(false);
 
+  const handleCloseModal = useCallback(() => {
+    if (onClose) onClose();
+    clearAllSuccessStatus();
+    getUsers();
+  }, [getUsers, clearAllSuccessStatus, onClose]);
+
   useEffect(() => {
     if (updateUserTypeSuccess) {
-      setShowSuccessElement(true);
-
       setTimeout(() => {
-        if (onClose) onClose();
-        clearUpdateStatus();
-        getUsers();
+        handleCloseModal();
       }, 2000);
     }
-  }, [updateUserTypeSuccess, clearUpdateStatus, onClose, getUsers]);
+  }, [updateUserTypeSuccess, handleCloseModal]);
 
   return (
-    <DefaultModal onClose={onClose}>
+    <DefaultModal onClose={handleCloseModal}>
       <Container>
         {showDeleteUser ? (
-          <DeleteUser setShowDeleteUser={setShowDeleteUser} />
-        ) : showSuccessElement ? (
+          <DeleteUser
+            setShowDeleteUser={setShowDeleteUser}
+            user={selectedUser}
+          />
+        ) : updateUserTypeSuccess ? (
           <UpdateSuccess />
         ) : (
           <UserContent
             selectedUser={selectedUser}
-            onClose={onClose}
+            onClose={handleCloseModal}
             setShowDeleteUser={setShowDeleteUser}
           />
         )}