Typext · MatheusCampos-450 · Apr 18, 2021 · Apr 18, 2021
diff --git a/src/DTOs/Auth.tsx b/src/DTOs/Auth.tsx
@@ -5,8 +5,13 @@ export interface AuthState {
   user: {
     id: string;
     type: string;
-    email: string;
     name: string;
+    email: string;
+    office: string;
+    area: string;
+    company: string;
+    phone: string;
+    password: string;
   };
 }
 
@@ -46,8 +51,13 @@ export interface AuthContextData {
   user: {
     id: string;
     type: string;
-    email: string;
     name: string;
+    email: string;
+    office: string;
+    area: string;
+    company: string;
+    phone: string;
+    password: string;
   };
   invitation: InvitationData;
   register: RegisterData;

diff --git a/src/DTOs/User.tsx b/src/DTOs/User.tsx
@@ -1,26 +1,29 @@
 import { ReactNode } from 'react';
 
 export interface IUser {
-  name: string;
-  username: string;
-  email: string;
-}
-
-interface UserData {
   id: string;
-  name: string;
   type: string;
+  name: string;
+  email: string;
+  office: string;
+  area: string;
+  company: string;
+  phone: string;
+  password: string;
 }
 
 export interface UserContextData {
-  users: Array<UserData>;
+  users: Array<IUser>;
   updateUserTypeSuccess: boolean;
   deleteUserLoader: boolean;
   deleteUserError: string;
+  updateUserInfoLoader: boolean;
+  updateUserInfoError: string;
   getUsers(): void;
   clearAllSuccessStatus(): void;
   deleteUser(id: string): void;
   updateUserType(credentials: { id: string; userType: string }): void;
+  updateUserInfo(credentials: IUser): void;
 }
 
 export interface UserProviderProps {

diff --git a/src/components/FormUpdate/index.tsx b/src/components/FormUpdate/index.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+import { Form } from '@unform/web';
+
+import InputForm from 'components/InputForm';
+import Button from 'components/Button/Button';
+import Input from 'components/Input/Input';
+
+import { Container } from './styles';
+
+interface FormUpdateProps {
+  handleSubmit: any;
+  formRef: any;
+  hasPasswordField?: boolean;
+  inviteInfo: { name: string; email: string };
+  user?: {
+    id: string;
+    type: string;
+    name: string;
+    email: string;
+    office: string;
+    area: string;
+    company: string;
+    phone: string;
+    password: string;
+  };
+}
+
+function FormUpdate({
+  handleSubmit,
+  formRef,
+  inviteInfo,
+  hasPasswordField,
+  user,
+}: FormUpdateProps) {
+  return (
+    <Container>
+      <Form onSubmit={handleSubmit} ref={formRef} className="Content">
+        <div className="inputContent">
+          <InputForm
+            name="name"
+            title="Nome completo"
+            defaultValue={inviteInfo?.name || user?.name}
+          />
+
+          <InputForm
+            defaultValue={user?.office}
+            name="office"
+            title="Título / Cargo"
+          />
+
+          <InputForm defaultValue={user?.area} name="area" title="Área" />
+
+          <InputForm
+            defaultValue={user?.company}
+            name="company"
+            title="Empresa"
+          />
+
+          <Input
+            name="email"
+            title="E-mail"
+            styleWidth="40rem"
+            defaultValue={inviteInfo?.email || user?.phone || ''}
+            readOnly={!!inviteInfo?.email}
+          />
+
+          <InputForm defaultValue={user?.phone} name="phone" title="Telefone" />
+
+          {hasPasswordField && (
+            <>
+              <InputForm
+                defaultValue={user?.password}
+                name="password"
+                title="Senha"
+                type="password"
+              />
+
+              <InputForm
+                name="password_confirmation"
+                title="Confirme a senha"
+                type="password"
+              />
+            </>
+          )}
+        </div>
+
+        <Button color="var(--green)">Cadastrar</Button>
+      </Form>
+    </Container>
+  );
+}
+
+FormUpdate.defaultProps = {
+  hasPasswordField: false,
+  user: {
+    name: '',
+    email: '',
+    office: '',
+    area: '',
+    company: '',
+    phone: '',
+    password: '',
+  },
+};
+
+export default FormUpdate;
diff --git a/src/components/FormUpdate/styles.ts b/src/components/FormUpdate/styles.ts
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+
+  .Content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: 6rem 0;
+
+    .inputContent {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      max-width: 90rem;
+
+      > div {
+        margin: 10px 15px;
+      }
+    }
+
+    .input-styled {
+      margin: 1.25rem;
+    }
+
+    button {
+      margin-top: 6rem;
+    }
+  }
+`;
diff --git a/src/contexts/user.tsx b/src/contexts/user.tsx
@@ -2,23 +2,20 @@
 import React, { useCallback, createContext, useState, useContext } from 'react';
 import api from 'services/api';
 
-import { UserContextData, UserProviderProps } from 'DTOs/User';
+import { UserContextData, UserProviderProps, IUser } from 'DTOs/User';
 
 const UsersContext = createContext<UserContextData>({} as UserContextData);
 
-interface UserData {
-  id: string;
-  name: string;
-  type: string;
-}
-
 const UsersProvider = ({ children }: UserProviderProps) => {
-  const [users, setUsers] = useState<UserData[]>([
-    { id: '', name: '', type: '' },
-  ]);
+  const [users, setUsers] = useState<IUser[]>([{} as IUser]);
 
   const [deleteUserLoader, setDeleteUserLoader] = useState<boolean>(false);
   const [deleteUserError, setDeleteUserError] = useState<string>('');
+
+  const [updateUserInfoError, setUpdateUserInfoError] = useState<string>('');
+  const [updateUserInfoLoader, setUpdateUserInfoLoader] = useState<boolean>(
+    false,
+  );
   const [updateUserTypeSuccess, setUpdateUserTypeSuccess] = useState<boolean>(
     false,
   );
@@ -29,6 +26,16 @@ const UsersProvider = ({ children }: UserProviderProps) => {
     setUsers(response.data);
   }, []);
 
+  const updateUserInfo = useCallback(async data => {
+    setUpdateUserInfoLoader(true);
+    try {
+      await api.put('/users/logged', data);
+    } catch (error) {
+      setUpdateUserInfoError(error?.response?.data?.validation.body.message);
+    }
+    setUpdateUserInfoLoader(false);
+  }, []);
+
   const updateUserType = useCallback(async ({ id, userType }) => {
     try {
       await api.patch(`/users/${id}`, { type: userType });
@@ -60,9 +67,12 @@ const UsersProvider = ({ children }: UserProviderProps) => {
         updateUserTypeSuccess,
         deleteUserLoader,
         deleteUserError,
+        updateUserInfoError,
+        updateUserInfoLoader,
         getUsers,
         deleteUser,
         updateUserType,
+        updateUserInfo,
         clearAllSuccessStatus,
       }}
     >

diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
@@ -2,20 +2,17 @@ import React, { useRef, useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import * as Yup from 'yup';
 
-import { Form } from '@unform/web';
 import { FormHandles } from '@unform/core';
 
 import { useAuth } from 'contexts/auth';
 import { getInviteInfo } from 'services/auth';
+import FormUpdate from 'components/FormUpdate';
 
 import LogoIcon from 'assets/logo.svg';
-import InputForm from 'components/InputForm';
-import Button from 'components/Button/Button';
 
 import getValidationErrors from 'utils/getValidationErrors';
 import registerSchemaValidation from 'utils/registerSchemaValidation';
 
-import Input from 'components/Input/Input';
 import RegisterModal from './components/RegisterModal';
 
 import StyledRegisterNewUser from './styles';
@@ -71,41 +68,12 @@ const RegisterNewUser = () => {
         </a>
 
         <div className="RegisterNewUser">
-          <Form onSubmit={handleSubmit} ref={formRef} className="Content">
-            <div className="inputContent">
-              <InputForm
-                name="name"
-                title="Nome completo"
-                defaultValue={inviteInfo?.name}
-              />
-
-              <InputForm name="office" title="Título / Cargo" />
-
-              <InputForm name="area" title="Área" />
-
-              <InputForm name="company" title="Empresa" />
-
-              <Input
-                name="email"
-                title="E-mail"
-                styleWidth="40rem"
-                defaultValue={inviteInfo?.email || ''}
-                readOnly={!!inviteInfo?.email}
-              />
-
-              <InputForm name="phone" title="Telefone" />
-
-              <InputForm name="password" title="Senha" type="password" />
-
-              <InputForm
-                name="password_confirmation"
-                title="Confirme a senha"
-                type="password"
-              />
-            </div>
-
-            <Button color="var(--green)">Cadastrar</Button>
-          </Form>
+          <FormUpdate
+            formRef={formRef}
+            hasPasswordField
+            inviteInfo={inviteInfo}
+            handleSubmit={handleSubmit}
+          />
         </div>
       </StyledRegisterNewUser>
     </>

diff --git a/src/pages/Register/styles.ts b/src/pages/Register/styles.ts
@@ -26,38 +26,6 @@ const StyledRegisterNewUser = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
-    .Content {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      margin: 6rem 0;
-
-      .inputContent {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-
-        width: 100%;
-        max-width: 80rem;
-
-        > div {
-          margin: 10px 15px;
-        }
-      }
-
-      .input-styled {
-        margin: 1.25rem;
-      }
-
-      button {
-        margin-top: 6rem;
-      }
-    }
   }
 
   @media (max-width: 840px) {