Refactoring

frontend/src/api/routes/clients/createClient.ts

@@ -1,9 +1,9 @@
 import ApiRoutes from '../../../constants/ApiRoutes';
 import IClientsStatus from '../../../interfaces/IClientsStatus';
-import { CreateClientDto } from '../../../utils/dtos/CreateClient.dto';
+import { ClientDto } from '../../../utils/dtos/Client.dto';
 import handlesAxios from '../../handleAxios';
 
-const createClient = async (client: CreateClientDto): Promise<IClientsStatus> => {
+const createClient = async (client: ClientDto): Promise<IClientsStatus> => {
   const response = await handlesAxios.post(ApiRoutes.CLIENTS, client);
 
   return response.data;

frontend/src/api/routes/clients/editClient.ts

@@ -1,9 +1,9 @@
 import ApiRoutes from '../../../constants/ApiRoutes';
 import IClientsStatus from '../../../interfaces/IClientsStatus';
-import { UpdateClientDto } from '../../../utils/dtos/UpdateClient.dto';
+import { ClientDto } from '../../../utils/dtos/Client.dto';
 import handlesAxios from '../../handleAxios';
 
-const updateClient = async (client: UpdateClientDto, clientId: string): Promise<IClientsStatus> => {
+const updateClient = async (client: ClientDto, clientId: string): Promise<IClientsStatus> => {
   const response = await handlesAxios.patch(`${ApiRoutes.CLIENTS}?clientId=${clientId}`, client);
 
   return response.data;

frontend/src/components/clientForm/ClientForm.tsx

@@ -1,43 +1,89 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import InputLabel from '../input/Input';
 import './style.css';
 import ErrorCard from '../errorCard/ErrorCard';
+import * as createClientSchema from '../../validations/createClientValidation';
+import { ClientDto } from '../../utils/dtos/Client.dto';
 
 interface ClientFormProps {
   onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
-  errorList: {
-    name: string;
-    email: string;
-    cpf: string;
-    phoneNumber: string;
-    status: string;
-  };
   clientValues: {
     name: string;
     email: string;
     cpf: string;
     phoneNumber: string;
     status: string;
   };
+  submitFormBtnName: string;
+  submitForm: () => void;
 }
 
-function ClientForm({ onChange, errorList, clientValues }: ClientFormProps) {
+function ClientForm({ onChange, clientValues, submitFormBtnName, submitForm }: ClientFormProps) {
+  const [formDataErros, setFormDataErros] = useState({ name: '', email: '', cpf: '', phoneNumber: '', status: '' });
+  const errorRef = useRef(false);
+  const navigate = useNavigate();
+
+  const validateClientInfo = (client: ClientDto) => {
+    const cpfSchema = createClientSchema.cpf.validate(client.cpf);
+    const emailSchema = createClientSchema.email.validate(client.email);
+    const nameSchema = createClientSchema.name.validate(client.name);
+    const phoneNumberSchema = createClientSchema.phoneNumber.validate(client.phoneNumber);
+    const statusSchema = createClientSchema.status.validate(client.status.name);
+
+    if (cpfSchema.error || emailSchema.error || nameSchema.error || phoneNumberSchema.error || statusSchema.error) {
+      errorRef.current = true;
+    } else {
+      errorRef.current = false;
+    }
+
+    setFormDataErros({
+      cpf: cpfSchema.error?.message || '',
+      email: emailSchema.error?.message || '',
+      name: nameSchema.error?.message || '',
+      phoneNumber: phoneNumberSchema.error?.message || '',
+      status: statusSchema.error?.message || '',
+    });
+  };
+
+  const handleSubmit = () => {
+    const client = new ClientDto(
+      clientValues.name,
+      clientValues.cpf,
+      clientValues.email,
+      clientValues.phoneNumber,
+      clientValues.status,
+    );
+
+    validateClientInfo(client);
+
+    if (!errorRef.current) {
+      submitForm();
+    }
+  };
+
   return (
     <div className="client-form">
-      <InputLabel name="name" placeholder="Nome" onChange={onChange} error={errorList.name} value={clientValues.name} />
+      <InputLabel
+        name="name"
+        placeholder="Nome"
+        onChange={onChange}
+        error={formDataErros.name}
+        value={clientValues.name}
+      />
       <InputLabel
         name="email"
         placeholder="E-Mail"
         onChange={onChange}
-        error={errorList.email}
+        error={formDataErros.email}
         value={clientValues.email}
       />
-      <InputLabel name="cpf" placeholder="Cpf" onChange={onChange} error={errorList.cpf} value={clientValues.cpf} />
+      <InputLabel name="cpf" placeholder="Cpf" onChange={onChange} error={formDataErros.cpf} value={clientValues.cpf} />
       <InputLabel
         name="phoneNumber"
         placeholder="Telefone"
         onChange={onChange}
-        error={errorList.phoneNumber}
+        error={formDataErros.phoneNumber}
         value={clientValues.phoneNumber}
       />
       <div>
@@ -50,7 +96,19 @@ function ClientForm({ onChange, errorList, clientValues }: ClientFormProps) {
           <option value="Inativo">Inativo</option>
           <option value="Aguardando ativação">Aguardando ativação</option>
         </select>
-        <ErrorCard message={errorList.status} />
+        <ErrorCard message={formDataErros.status} />
+      </div>
+      <div className="client-form-btn-container">
+        <button className="client-form-submit-btn" onClick={handleSubmit}>
+          {submitFormBtnName}
+        </button>
+        <button
+          className="client-form-back-btn"
+          onClick={() => {
+            navigate('/');
+          }}>
+          Voltar
+        </button>
       </div>
     </div>
   );

frontend/src/components/clientForm/style.css

@@ -15,3 +15,34 @@
   background-color: white;
   color: #888888;
 }
+
+.client-form-btn-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 30px;
+}
+
+.client-form-submit-btn {
+  padding: 10px 30px;
+  border-radius: 3px;
+  background-color: #E29934;
+  color: #fff;
+  cursor: pointer;
+  border: 1px solid #E29934;
+  margin-right: 20px;
+}
+
+.client-form-back-btn {
+  background-color: #fff;
+  color: #E29934;
+  padding: 10px 30px;
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid #E29934;
+}
+
+.client-form-back-btn:hover {
+  background-color: #E29934;
+  color: #fff;
+}
+

frontend/src/pages/createClient/CreateClient.tsx

@@ -1,18 +1,14 @@
 import React, { ChangeEvent, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import ClientForm from '../../components/clientForm/ClientForm';
 import ClientListingHeader from '../../components/clientListingHeader/ClientListingHeader';
 import './style.css';
-import { CreateClientDto } from '../../utils/dtos/CreateClient.dto';
-import * as createClientSchema from '../../validations/createClientValidation';
 import createClient from '../../api/routes/clients/createClient';
 import handleApiErrors from '../../utils/handleApiErrors';
 import ErrorCard from '../../components/errorCard/ErrorCard';
+import { ClientDto } from '../../utils/dtos/Client.dto';
 
 function CreateClient() {
-  const navigate = useNavigate();
   const [formData, setFormData] = useState({ name: '', email: '', cpf: '', phoneNumber: '', status: '' });
-  const [formDataErros, setFormDataErros] = useState({ name: '', email: '', cpf: '', phoneNumber: '', status: '' });
   const [apiErrorMsg, setApiErrorMsg] = useState('');
   const errorRef = useRef(false);
 
@@ -24,36 +20,12 @@ function CreateClient() {
     }));
   };
 
-  const validateClientInfo = (client: CreateClientDto) => {
-    const cpfSchema = createClientSchema.cpf.validate(client.cpf);
-    const emailSchema = createClientSchema.email.validate(client.email);
-    const nameSchema = createClientSchema.name.validate(client.name);
-    const phoneNumberSchema = createClientSchema.phoneNumber.validate(client.phoneNumber);
-    const statusSchema = createClientSchema.status.validate(client.status.name);
-
-    if (cpfSchema.error || emailSchema.error || nameSchema.error || phoneNumberSchema.error || statusSchema.error) {
-      errorRef.current = true;
-    } else {
-      errorRef.current = false;
-    }
-
-    setFormDataErros({
-      cpf: cpfSchema.error?.message || '',
-      email: emailSchema.error?.message || '',
-      name: nameSchema.error?.message || '',
-      phoneNumber: phoneNumberSchema.error?.message || '',
-      status: statusSchema.error?.message || '',
-    });
-  };
-
   const subimitClient = async () => {
     const { cpf, email, name, phoneNumber, status } = formData;
 
-    const client = new CreateClientDto(name, cpf, email, phoneNumber, status);
+    const client = new ClientDto(name, cpf, email, phoneNumber, status);
 
     try {
-      validateClientInfo(client);
-
       if (!errorRef.current) {
         await createClient(client);
 
@@ -75,21 +47,14 @@ function CreateClient() {
             <h3>Novo usuário</h3>
             <p>Informe os campos a seguir para criar novo usuário</p>
           </div>
-          <ClientForm onChange={handleChange} errorList={formDataErros} clientValues={formData} />
+          <ClientForm
+            submitFormBtnName="Criar"
+            onChange={handleChange}
+            submitForm={subimitClient}
+            clientValues={formData}
+          />
         </div>
         <ErrorCard message={apiErrorMsg} />
-        <div className="create-client-create-back-btn">
-          <button className="create-client-create-btn" onClick={subimitClient}>
-            Criar
-          </button>
-          <button
-            className="create-client-back-btn"
-            onClick={() => {
-              navigate('/');
-            }}>
-            Voltar
-          </button>
-        </div>
       </section>
     </main>
   );

frontend/src/pages/createClient/style.css

@@ -29,31 +29,3 @@
   margin-bottom: 10px;
   padding-top: 20px;
 }
-
-.create-client-create-back-btn {
-  margin-top: 30px;
-}
-
-.create-client-create-btn {
-  padding: 10px 30px;
-  border-radius: 3px;
-  background-color: #E29934;
-  color: #fff;
-  cursor: pointer;
-  border: 1px solid #E29934;
-  margin-right: 20px;
-}
-
-.create-client-back-btn {
-  background-color: #fff;
-  color: #E29934;
-  padding: 10px 30px;
-  cursor: pointer;
-  border-radius: 3px;
-  border: 1px solid #E29934;
-}
-
-.create-client-back-btn:hover {
-  background-color: #E29934;
-  color: #fff;
-}

frontend/src/pages/editClient/EditClient.tsx

@@ -1,24 +1,21 @@
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import ClientListingHeader from '../../components/clientListingHeader/ClientListingHeader';
 import './style.css';
 import getClientAndStatusById from '../../api/routes/clients/getClientAndStatusById';
 import ClientForm from '../../components/clientForm/ClientForm';
-import * as createClientSchema from '../../validations/createClientValidation';
-import { UpdateClientDto } from '../../utils/dtos/UpdateClient.dto';
 import updateClient from '../../api/routes/clients/editClient';
 import handleApiErrors from '../../utils/handleApiErrors';
 import ErrorCard from '../../components/errorCard/ErrorCard';
+import { ClientDto } from '../../utils/dtos/Client.dto';
 
 function EditClient() {
   const [clientInfo, setClientInfo] = useState({ name: 'Pedro', email: '', cpf: '', phoneNumber: '', status: '' });
-  const [formDataErros, setFormDataErros] = useState({ name: '', email: '', cpf: '', phoneNumber: '', status: '' });
   const [apiErrorMsg, setApiErrorMsg] = useState('');
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const clientId = queryParams.get('clientId');
   const errorRef = useRef(false);
-  const navigate = useNavigate();
 
   useEffect(() => {
     (async () => {
@@ -42,36 +39,12 @@ function EditClient() {
     }));
   };
 
-  const validateClientInfo = (client: UpdateClientDto) => {
-    const cpfSchema = createClientSchema.cpf.validate(client.cpf);
-    const emailSchema = createClientSchema.email.validate(client.email);
-    const nameSchema = createClientSchema.name.validate(client.name);
-    const phoneNumberSchema = createClientSchema.phoneNumber.validate(client.phoneNumber);
-    const statusSchema = createClientSchema.status.validate(client.status.name);
-
-    if (cpfSchema.error || emailSchema.error || nameSchema.error || phoneNumberSchema.error || statusSchema.error) {
-      errorRef.current = true;
-    } else {
-      errorRef.current = false;
-    }
-
-    setFormDataErros({
-      cpf: cpfSchema.error?.message || '',
-      email: emailSchema.error?.message || '',
-      name: nameSchema.error?.message || '',
-      phoneNumber: phoneNumberSchema.error?.message || '',
-      status: statusSchema.error?.message || '',
-    });
-  };
-
   const handleSubmit = async () => {
     const { cpf, email, name, phoneNumber, status } = clientInfo;
 
-    const client = new UpdateClientDto(name, cpf, email, phoneNumber, status);
+    const client = new ClientDto(name, cpf, email, phoneNumber, status);
 
     try {
-      validateClientInfo(client);
-
       if (!errorRef.current && clientId) {
         await updateClient(client, clientId);
 
@@ -95,20 +68,13 @@ function EditClient() {
               <p>Informe os campos a seguir para editar um usuário</p>
             </div>
           </div>
-          <ClientForm clientValues={clientInfo} errorList={formDataErros} onChange={handleChange} />
+          <ClientForm
+            submitFormBtnName="Confirmar edição"
+            clientValues={clientInfo}
+            onChange={handleChange}
+            submitForm={handleSubmit}
+          />
           <ErrorCard message={apiErrorMsg} />
-          <div className="edit-client-btn-container">
-            <button onClick={handleSubmit} className="edit-client-edit-btn">
-              Confirmar edição
-            </button>
-            <button
-              className="edit-client-back-btn"
-              onClick={() => {
-                navigate('/');
-              }}>
-              Voltar
-            </button>
-          </div>
         </section>
       </main>
     </div>