Dev main

README.md

@@ -23,10 +23,8 @@ DataBase:
 
 ## Executando a Aplicação
 
-A execução local pode ser dada das seguintes formas: Docker 
-
 <details>
-  <summary><b>Iniciando o projeto com docker 🐳</b></summary>
+  <summary><b>Iniciando o projeto com docker-compose 🐳</b></summary>
 
   ***⚠️ Para garantir um bom funcionamento é necessário que tenha instalado o docker e o docker-compose nas versões 24.0.5 e 1.29 ou superior respectivamente⚠️***
 

backend/README.md

@@ -0,0 +1,125 @@
+# Aplicativo de Gerenciamento de Clientes Backend
+
+![Arquitetura do backend](../assets/architecture-api.png)
+
+## Executando a Aplicação
+
+A execução local pode ser dada das seguintes formas: Docker ou Node
+
+<details>
+  <summary><b>Iniciando o projeto com docker 🐳</b></summary>
+
+  ***⚠️ Para garantir um bom funcionamento é necessário que tenha instalado o docker na versão 24.0.5 e 1.29 ou superior ⚠️***
+
+  1. Clone o projeto
+
+  2. Entre no diretório do projeto
+
+  3. No diretório raiz do backend suba criei a imagem
+
+  ```bash
+$ docker build . -t client-management-api -f Dockerfile.dev
+  ```
+
+  4. Ainda diretório raiz do backend suba suba o container
+
+  ```bash
+$ docker run --name client-management-api -p 3001:3001 client-management-api
+  ```
+
+  5. Quando o processo do container estiver acabado acesse a aplicação usando o seguinte endereço
+
+  ```bash
+http://localhost:3001
+  ```
+
+</details>
+
+<br />
+
+<details>
+  <summary><b>Iniciando o projeto com Node</b></summary>
+
+  ***⚠️ Para garantir um bom funcionamento é necessário que tenha instalado o node na versão 16 ⚠️***
+
+  1. Clone o projeto
+
+  2. Entre no diretório do projeto
+
+  3. No diretório raiz do backend instale as dependências
+
+  ```bash
+$ npm install
+  ```
+
+  4. Para configurar o projeto rode os seguintes comandos
+
+  ```bash
+$ npx prisma generate && echo "DATABASE_URL=file:./dev.db" > .env && npx prisma migrate dev
+  ```
+
+  5. Para iniciar o projeto rode
+
+  ```bash
+$ npm run start
+  ```
+
+  6. Quando o processo do container estiver acabado acesse a aplicação usando o seguinte endereço
+
+  ```bash
+http://localhost:3001
+  ```
+
+</details>
+
+<br />
+
+## Testes
+
+Para a criação dos testes foi usando as seguintes bibliotecas
+
+- Jest
+- @nestjs/testing
+- supertest
+
+### Executando os testes 🧪
+
+<details>
+  <summary><b>Rodando testes com docker</b></summary>
+
+  1. Garanta que o container já esteja ativo 
+
+  2. Para rodar os testes unitários
+
+  ```bash
+$ docker exec -t <nome-do-container> npm run test
+  ```
+
+  3. Para rodar os testes e2e
+
+  ```bash
+$ docker exec -t <nome-do-container> npm run test:e2e
+  ```
+
+</details>
+
+<br />
+
+<details>
+  <summary><b>Rodando testes localmente</b></summary>
+
+  1. Garanta que as dependêcias já estejam instaladas e funionando 
+
+  2. Para rodar os testes unitários
+
+  ```bash
+$ npm run test
+  ```
+
+  3. Para rodar os testes e2e
+
+  ```bash
+$ npm run test:e2e
+  ```
+
+</details>

frontend/Dockerfile.dev

@@ -4,6 +4,8 @@ WORKDIR /usr/src/app
 
 COPY . .
 
+ENV REACT_APP_PUBLIC_API=http://localhost:3001
+
 EXPOSE 3000
 
 RUN npm install

frontend/README.md

@@ -1,46 +1,69 @@
-# Getting Started with Create React App
+# Aplicativo de Gerenciamento de Clientes Frontend
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+![Apresentação do projeto](../assets/presentation.gif)
 
-## Available Scripts
+## Executando a Aplicação
 
-In the project directory, you can run:
+A execução local pode ser dada das seguintes formas: Docker ou Node
 
-### `npm start`
+<details>
+  <summary><b>Iniciando o projeto com docker 🐳</b></summary>
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+  ***⚠️ Para garantir um bom funcionamento é necessário que tenha instalado o docker na versão 24.0.5 e 1.29 ou superior ⚠️***
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+  1. Clone o projeto
 
-### `npm test`
+  2. Entre no diretório do projeto
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+  3. No diretório raiz do frontend suba criei a imagem
 
-### `npm run build`
+  ```bash
+$ docker build . -t client-management-web -f Dockerfile.dev
+  ```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+  4. Ainda diretório raiz do frontend suba suba o container
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+  ```bash
+$ docker run --name client-management-web -p 3000:3000 client-management-web
+  ```
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+  5. Quando o processo do container estiver acabado acesse a aplicação usando o seguinte endereço
 
-### `npm run eject`
+  ```bash
+http://localhost:3000
+  ```
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+</details>
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+<br />
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+<details>
+  <summary><b>Iniciando o projeto com Node</b></summary>
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+  ***⚠️ Para garantir um bom funcionamento é necessário que tenha instalado o node na versão 16 ⚠️***
 
-## Learn More
+  1. Clone o projeto
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+  2. Entre no diretório do projeto
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+  3. No diretório raiz do frontend instale as dependências
+
+  ```bash
+$ npm install
+  ```
+
+  5. Para iniciar o projeto rode
+
+  ```bash
+$ npm start
+  ```
+
+  6. Quando o processo do container estiver acabado acesse a aplicação usando o seguinte endereço
+
+  ```bash
+http://localhost:3000
+  ```
+
+</details>
+
+<br />

frontend/src/components/clientForm/ClientForm.tsx

@@ -16,10 +16,19 @@ interface ClientFormProps {
     status: string;
   };
   submitFormBtnName: string;
-  submitForm: () => void;
+  submitForm: () => Promise<void>;
+  btnDisabled: boolean;
+  setBtnDisabled: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-function ClientForm({ onChange, clientValues, submitFormBtnName, submitForm }: ClientFormProps) {
+function ClientForm({
+  onChange,
+  clientValues,
+  submitFormBtnName,
+  submitForm,
+  setBtnDisabled,
+  btnDisabled,
+}: ClientFormProps) {
   const [formDataErros, setFormDataErros] = useState({ name: '', email: '', cpf: '', phoneNumber: '', status: '' });
   const errorRef = useRef(false);
   const navigate = useNavigate();
@@ -47,6 +56,7 @@ function ClientForm({ onChange, clientValues, submitFormBtnName, submitForm }: C
   };
 
   const handleSubmit = () => {
+    setBtnDisabled(true);
     const client = new ClientDto(
       clientValues.name,
       clientValues.cpf,
@@ -57,9 +67,12 @@ function ClientForm({ onChange, clientValues, submitFormBtnName, submitForm }: C
 
     validateClientInfo(client);
 
-    if (!errorRef.current) {
-      submitForm();
+    if (errorRef.current) {
+      setBtnDisabled(false);
+      return;
     }
+
+    submitForm();
   };
 
   return (
@@ -99,7 +112,7 @@ function ClientForm({ onChange, clientValues, submitFormBtnName, submitForm }: C
         <ErrorCard message={formDataErros.status} />
       </div>
       <div className="client-form-btn-container">
-        <button className="client-form-submit-btn" onClick={handleSubmit}>
+        <button className="client-form-submit-btn" onClick={handleSubmit} disabled={btnDisabled}>
           {submitFormBtnName}
         </button>
         <button

frontend/src/components/clientForm/style.css

@@ -32,6 +32,12 @@
   margin-right: 20px;
 }
 
+.client-form-submit-btn:disabled {
+  cursor: wait;
+  background-color: #e29934b7;
+  border: 1px solid #e29934b7;
+}
+
 .client-form-back-btn {
   background-color: #fff;
   color: #E29934;
@@ -45,4 +51,3 @@
   background-color: #E29934;
   color: #fff;
 }
-

frontend/src/components/clientList/ClientList.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import IClientsStatus from '../../interfaces/IClientsStatus';
 import ClientCard from '../clientCard/ClientCard';
+import { ClientContext } from '../../context/ClientContext';
+import Loading from '../loading/Loading';
+import './style.css';
 
 interface ClientListProps {
   clients: IClientsStatus[];
 }
 
 function ClientList({ clients }: ClientListProps) {
+  const { clientsIsLoading } = useContext(ClientContext);
   return (
-    <section>
-      {clients.map(e => (
-        <ClientCard key={e.id} client={e} />
-      ))}
+    <section className="client-list-container">
+      {clientsIsLoading ? <Loading /> : clients.map(e => <ClientCard key={e.id} client={e} />)}
     </section>
   );
 }

frontend/src/components/clientList/style.css

@@ -0,0 +1,8 @@
+.client-list-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.client-list-container .custom-loader {
+  align-self: center;
+}

frontend/src/components/loading/Loading.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.css';
+
+function Loading() {
+  return <div className="custom-loader" />;
+}
+
+export default Loading;

frontend/src/components/loading/style.css

@@ -0,0 +1,15 @@
+.custom-loader {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 8px solid;
+  border-color: #E4E4ED;
+  border-right-color: #000000;
+  animation: rotate 0.5s infinite linear;
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}