feat(address): implementation of address search with viacep

.eslintrc.json

@@ -34,6 +34,7 @@
     "import/no-unresolved": 0,
     "import/prefer-default-export": "off",
     "no-use-before-define": "off",
+    "no-useless-constructor": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off"

package.json

@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.0",
     "polished": "^4.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -17,6 +18,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.1",
     "@testing-library/user-event": "^12.2.2",
+    "@types/axios": "^0.14.0",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.19.6",
     "@types/react": "^16.9.56",

src/miragejs/index.ts

@@ -4,18 +4,14 @@ createServer({
   routes() {
     this.namespace = 'api';
 
-    this.get('/persons', () => [
-      {
-        name: 'Lucas',
-        dateOfBirth: '30/06/1997',
-        cpf: '0000',
-        cep: '919281982',
-        publicPlace: 'Algum lugar',
-        neighborhood: 'Outro lugar',
-        number: 345,
-        city: 'Alguma cidade',
-        state: 'SP',
-      },
-    ]);
+    this.get('/persons', () => []);
+
+    this.post('/persons', (_: void, request: any) => {
+      const attrs = JSON.parse(request.requestBody);
+
+      return attrs;
+    });
+
+    this.passthrough('https://viacep.com.br/ws/**');
   },
 });

src/modules/Address/dtos/IAddressDto.ts

@@ -0,0 +1,7 @@
+export interface IAddressDto {
+  cep: number;
+  publicPlace: string;
+  neighborhood: string;
+  city: string;
+  state: string;
+}

src/modules/Address/dtos/IViaCepDto.ts

@@ -0,0 +1,8 @@
+export interface IViaCepDto {
+  cep: string;
+  logradouro: string;
+  complemento: string;
+  bairro: string;
+  localidade: string;
+  uf: string;
+}

src/modules/Address/infra/http/AxiosRepository.ts

@@ -0,0 +1,31 @@
+import { IAddressDto } from 'modules/Address/dtos/IAddressDto';
+import { IViaCepDto } from 'modules/Address/dtos/IViaCepDto';
+import { IAddressRepository } from 'modules/Address/repositories/IAddressRepository';
+
+import { axios } from 'shared/infra/http/HttpAxios';
+
+class AxiosRepository implements IAddressRepository {
+  searchAddress(cep: string): Promise<IAddressDto> {
+    const url = process.env.REACT_APP_SEARCH_ADDRESS?.replace(
+      '{CEP}',
+      cep,
+    ) as string;
+
+    const address: Promise<IAddressDto> = axios
+      .get<IViaCepDto>(url)
+      .then(({ data }) => ({
+        cep: Number(data.cep.replace('-', '')),
+        publicPlace: data.logradouro,
+        neighborhood: data.bairro,
+        city: data.localidade,
+        state: data.uf,
+      }))
+      .catch(err => {
+        throw new Error(err);
+      });
+
+    return address;
+  }
+}
+
+export default AxiosRepository;

src/modules/Address/repositories/IAddressRepository.ts

@@ -0,0 +1,5 @@
+import { IAddressDto } from '../dtos/IAddressDto';
+
+export interface IAddressRepository {
+  searchAddress(cep: string): Promise<IAddressDto>;
+}

src/modules/Address/services/SearchAddressService.ts

@@ -0,0 +1,20 @@
+import { IAddressDto } from '../dtos/IAddressDto';
+import AxiosRepository from '../infra/http/AxiosRepository';
+import { IAddressRepository } from '../repositories/IAddressRepository';
+
+class SearchAddressService {
+  constructor(private readonly addressRepository: IAddressRepository) {}
+
+  execute(cep: string): Promise<IAddressDto> {
+    const address = this.addressRepository
+      .searchAddress(cep)
+      .then(data => data)
+      .catch(err => {
+        throw new Error(err);
+      });
+
+    return address;
+  }
+}
+
+export default new SearchAddressService(new AxiosRepository());

src/pages/Home/ModalAddPerson/index.tsx

@@ -1,7 +1,9 @@
 import { useState, useCallback, useEffect, FormEvent } from 'react';
 import { MdClose } from 'react-icons/md';
 
-import { Input } from '../../../components/Input';
+import searchAddressService from 'modules/Address/services/SearchAddressService';
+
+import { Input } from 'components/Input';
 
 import { IModalAddPersonProps } from './IModalAddPerson';
 
@@ -57,6 +59,24 @@ const ModalAddPerson = ({ instanceModal }: IModalAddPersonProps) => {
     ],
   );
 
+  const getAddress = useCallback((cep: string) => {
+    searchAddressService
+      .execute(cep)
+      .then(({ publicPlace, neighborhood, city, state }) => {
+        setPublicPlace(publicPlace);
+        setNeighborhood(neighborhood);
+        setCity(city);
+        setState(state);
+      })
+      .catch(err => console.error(err));
+  }, []);
+
+  useEffect(() => {
+    if (cep.length === 8 || cep.length === 9) {
+      getAddress(cep);
+    }
+  }, [cep, getAddress]);
+
   useEffect(() => {
     setIsCenterContent(true);
   }, [setIsCenterContent]);

src/shared/infra/http/HttpAxios.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.REACT_APP_API,
+});
+
+export { api, axios };

tsconfig.json

@@ -19,7 +19,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "baseUrl": "src",
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"