feat(users list): implement update user with backend and delete user …

src/DTOs/User.tsx

@@ -14,7 +14,10 @@ interface UserData {
 
 export interface UserContextData {
   users: Array<UserData>;
+  updateUserTypeSuccess: boolean;
   getUsers(): void;
+  clearUpdateStatus(): void;
+  updateUserType(credentials: { id: string; userType: string }): void;
 }
 
 export interface UserProviderProps {

src/contexts/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { AuthProvider } from './auth';
 import { MainProvider } from './main';
-import { UsersProvider } from './users';
+import { UsersProvider } from './user';
 
 interface ContextProps {
   children: React.ReactNode;

src/contexts/users.tsx → src/contexts/user.tsx

@@ -16,18 +16,37 @@ const UsersProvider = ({ children }: UserProviderProps) => {
   const [users, setUsers] = useState<UserData[]>([
     { id: '', name: '', type: '' },
   ]);
+  const [updateUserTypeSuccess, setUpdateUserTypeSuccess] = useState<boolean>(
+    false,
+  );
 
   const getUsers = useCallback(async () => {
     const response = await api.get('/users');
 
     setUsers(response.data);
   }, []);
 
+  const updateUserType = useCallback(async ({ id, userType }) => {
+    try {
+      await api.patch(`/users/${id}`, { type: userType });
+      setUpdateUserTypeSuccess(true);
+    } catch (error) {
+      setUpdateUserTypeSuccess(true);
+    }
+  }, []);
+
+  const clearUpdateStatus = useCallback(() => {
+    setUpdateUserTypeSuccess(false);
+  }, []);
+
   return (
     <UsersContext.Provider
       value={{
         users,
+        updateUserTypeSuccess,
         getUsers,
+        updateUserType,
+        clearUpdateStatus,
       }}
     >
       {children}

src/pages/Users/components/UserInfo/styles.ts

@@ -11,8 +11,8 @@ export const Container = styled.button`
     font-family: Roboto;
     font-style: normal;
     font-weight: 900;
-    font-size: 2rem;
-    line-height: 28px;
+    font-size: 1.6rem;
+    line-height: 2.8rem;
     text-align: center;
 
     color: #373435;

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

@@ -0,0 +1,56 @@
+import React, { useCallback, useState } from 'react';
+
+import { ReactComponent as WarnIcon } from 'assets/warn.svg';
+import Button from 'components/Button/Button';
+
+import { Container, RemoveWarnSuccess } from './styles';
+
+interface DeleteUserProps {
+  setShowDeleteUser: Function;
+}
+
+const DeleteUser = ({ setShowDeleteUser }: DeleteUserProps) => {
+  const [deleteUserSuccess, setDeleteUserSuccess] = useState<boolean>(false);
+
+  const handleGoBack = useCallback(() => {
+    if (setShowDeleteUser) setShowDeleteUser(false);
+  }, [setShowDeleteUser]);
+
+  const handleDeleteUser = useCallback(() => {
+    setDeleteUserSuccess(true);
+  }, []);
+
+  return (
+    <Container>
+      {deleteUserSuccess ? (
+        <RemoveWarnSuccess>
+          <div className="warn">
+            <WarnIcon />
+            <h1>USUÁRIO REMOVIDO</h1>
+          </div>
+          <Button color="var(--gray)" onClick={handleGoBack}>
+            Voltar
+          </Button>
+        </RemoveWarnSuccess>
+      ) : (
+        <>
+          <section className="warn">
+            <WarnIcon />
+            <h1>TEM CERTEZA?</h1>
+            <p>ESTA AÇÃO NÃO PODERÁ SER DEFEITA.</p>
+          </section>
+          <section className="buttons">
+            <Button color="var(--gray)" onClick={handleGoBack}>
+              Voltar
+            </Button>
+            <Button color="var(--red-pink)" onClick={handleDeleteUser}>
+              Excluir
+            </Button>
+          </section>
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default DeleteUser;

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

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+
+export const RemoveWarnSuccess = styled.section`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  .warn {
+    display: flex;
+  }
+
+  button {
+    height: 5rem;
+    font-size: 2rem;
+
+    margin: 0 5px;
+    pointer-events: all;
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  .warn {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 5rem;
+
+    svg {
+      width: 5.5rem;
+      height: 5.5rem;
+      margin: 0;
+    }
+
+    h1 {
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 5rem;
+      line-height: 5.9rem;
+      text-align: center;
+
+      color: #373435;
+
+      margin: 1.5rem 0;
+    }
+
+    p {
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 2rem;
+      line-height: 2.4rem;
+      text-align: center;
+      letter-spacing: 0.25em;
+
+      color: #373435;
+
+      margin: 0;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    pointer-events: all;
+
+    button {
+      height: 5rem;
+      font-size: 2rem;
+
+      margin: 0 5px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    justify-content: center;
+
+    .warn {
+      margin: 2.5rem 0;
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { ReactComponent as Like } from 'assets/like.svg';
+
+import { Container } from './styles';
+
+const UpdateSuccess = () => {
+  return (
+    <Container>
+      <Like />
+
+      <h1>ATUALIZADO!</h1>
+
+      <p>VOLTANDO...</p>
+    </Container>
+  );
+};
+
+export default UpdateSuccess;

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

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  padding: 3rem;
+
+  svg {
+    width: 5.5rem;
+    height: 5.5rem;
+    margin: 0;
+  }
+
+  h1 {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 5rem;
+    line-height: 5.9rem;
+    text-align: center;
+
+    color: #373435;
+
+    margin: 1.5rem 0;
+  }
+
+  p {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 2.4rem;
+    line-height: 2.8rem;
+    text-align: center;
+    letter-spacing: 0.25em;
+
+    color: #373435;
+
+    margin: 0;
+  }
+`;

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

@@ -0,0 +1,104 @@
+import React, { useCallback, useState } from 'react';
+
+import { useUsers } from 'contexts/user';
+import { ReactComponent as UserIcon } from 'assets/userIcon.svg';
+import Button from 'components/Button/Button';
+
+import { Container } from './styles';
+
+interface UserModalProps {
+  selectedUser: { id: string; name: string; type: string };
+  onClose: Function;
+  setShowDeleteUser: Function;
+}
+
+const UserModal = ({
+  selectedUser,
+  onClose,
+  setShowDeleteUser,
+}: UserModalProps) => {
+  const { updateUserType } = useUsers();
+
+  const userIsAdmin = selectedUser.type === 'Admin';
+  const [userType, setUserType] = useState(selectedUser.type);
+
+  const handleClose = useCallback(() => {
+    if (onClose) onClose();
+  }, [onClose]);
+
+  const handleSelectUserType = useCallback((e: any) => {
+    setUserType(e.target.value);
+  }, []);
+
+  const handleUpdateUserType = useCallback(async () => {
+    await updateUserType({ id: selectedUser.id, userType });
+  }, [updateUserType, selectedUser, userType]);
+
+  const handleDeleteUser = useCallback(() => {
+    if (setShowDeleteUser) setShowDeleteUser(true);
+  }, [setShowDeleteUser]);
+
+  return (
+    <Container userIsAdmin={userIsAdmin}>
+      <section className="userInfo">
+        <UserIcon />
+
+        <h1>{selectedUser.name}</h1>
+        {userIsAdmin ? (
+          <h2>{selectedUser.type}</h2>
+        ) : (
+          <form className="usertype">
+            <input
+              type="radio"
+              id="normal"
+              name="type"
+              value="Usuário"
+              onChange={handleSelectUserType}
+              defaultChecked={userType === 'Usuário'}
+            />
+            <label htmlFor="normal">Comum</label>
+
+            <input
+              type="radio"
+              id="gerente"
+              name="type"
+              value="Gerente"
+              onChange={handleSelectUserType}
+              defaultChecked={userType === 'Gerente'}
+            />
+            <label htmlFor="gerente">Gerente</label>
+
+            <input
+              type="radio"
+              id="admin"
+              name="type"
+              value="Admin"
+              onChange={handleSelectUserType}
+              defaultChecked={userType === 'Admin'}
+            />
+            <label htmlFor="admin">Admin</label>
+          </form>
+        )}
+      </section>
+
+      <section className="buttons">
+        <Button color="var(--gray)" onClick={handleClose}>
+          Voltar
+        </Button>
+
+        {!userIsAdmin && (
+          <>
+            <Button color="var(--red-pink)" onClick={handleDeleteUser}>
+              Excluir
+            </Button>
+            <Button color="var(--green)" onClick={handleUpdateUserType}>
+              Atualizar
+            </Button>
+          </>
+        )}
+      </section>
+    </Container>
+  );
+};
+
+export default UserModal;