Deploy in Production new Features (#40)

* Finish Implementatinos Refresh Token Authtenticaton

* feature/Documentations-Swagger-and-HATEOAS

* Update LancamentosService.ts

* Update environment.dev.ts

* Update environment.prod.ts

* Atualização da URL_BASE da API

.github/workflows/publish_prod_project.yml

@@ -33,28 +33,28 @@ jobs:
         uses: actions/checkout@v2
       - name: Build Docker image
         env:
-           DOCKER_CLI_AGGREGATE: 1  
+          DOCKER_CLI_AGGREGATE: 1  
         run: |          
           docker-compose -f docker-compose.prod.yml build          
         continue-on-error: false
 
       - name: Push Docker image to Docker Hub
         env:
-           DOCKER_LOGIN: ${{ secrets.DOCKER_LOGIN }}
-           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
-           DOCKER_CLI_AGGREGATE: 1  
+          DOCKER_LOGIN: ${{ secrets.DOCKER_LOGIN }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+          DOCKER_CLI_AGGREGATE: 1  
         run: |
             docker login -u ${{ secrets.DOCKER_LOGIN }} -p ${{ secrets.DOCKER_PASSWORD }}    
             docker push ${{ secrets.DOCKER_IMAGE_PROD }}
         continue-on-error: false
 
       - name: Execute SSH Commands into EC2 
         env:
-           EC2_HOST: ${{ secrets.EC2_HOST }}
-           EC2_USERNAME: ${{ secrets.EC2_USERNAME }}
-           AWS_SSH_KEY: ${{ secrets.AWS_SSH_KEY }}
-           DOCKER_LOGIN: ${{ secrets.DOCKER_LOGIN }}
-           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+          EC2_HOST: ${{ secrets.EC2_HOST }}
+          EC2_USERNAME: ${{ secrets.EC2_USERNAME }}
+          AWS_SSH_KEY: ${{ secrets.AWS_SSH_KEY }}
+          DOCKER_LOGIN: ${{ secrets.DOCKER_LOGIN }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
 
         uses: appleboy/ssh-action@master
         with:

Dockerfile-Development → Dockerfile.Development

@@ -9,12 +9,12 @@ RUN npm install && mv node_modules ../
 COPY . ./
 RUN npm run build
 
-# Production Server NGINX
+# Development Server NGINX
 FROM nginx:stable-alpine
-
 COPY --from=build /app/build /usr/share/nginx/html
 COPY nginx.dev.conf /etc/nginx/conf.d/default.conf
 
+# Generate an Install open certifcates ssl
 RUN apk add --no-cache openssl
 COPY ./certificate/openssl.cnf /etc/nginx/certificate/openssl.cnf
 RUN openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -keyout /etc/nginx/certificate/ssl_certificate_key.pem -out /etc/nginx/certificate/ssl_certificate.pem  -config /etc/nginx/certificate/openssl.cnf

Dockerfile.Local

@@ -0,0 +1,23 @@
+FROM node:lts-alpine as build
+ENV NODE_ENV=development
+WORKDIR /app
+
+COPY ["package.json", "package-lock.json*", "./"]
+RUN npm install -P react react-dom @types/react-dom
+RUN npm install react-scripts 
+RUN npm install
+COPY . ./
+RUN npm run build
+
+# Local Development Server NGINX
+FROM nginx:stable-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Generate an Install open certifcates ssl
+#RUN apk add --no-cache openssl
+#COPY ./certificate/openssl.cnf /etc/nginx/certificate/openssl.cnf
+#RUN openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -keyout /etc/nginx/certificate/ssl_certificate_key.pem -out /etc/nginx/certificate/ssl_certificate.pem  -config /etc/nginx/certificate/openssl.cnf
+
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile-Production → Dockerfile.Production

@@ -9,8 +9,8 @@ RUN npm install && mv node_modules ../
 COPY . ./
 RUN npm run build
 
-EXPOSE 3000
-# production env
+
+# Production Server NGINX
 FROM nginx:stable-alpine
 COPY --from=build /app/build /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
@@ -19,4 +19,6 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
 #RUN apk add --no-cache openssl
 #COPY ./certificate/openssl.cnf /etc/nginx/certificate/openssl.cnf
 #RUN openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -keyout /etc/nginx/certificate/ssl_certificate_key.pem -out /etc/nginx/certificate/ssl_certificate.pem  -config /etc/nginx/certificate/openssl.cnf
+
+EXPOSE 3000
 CMD ["nginx", "-g", "daemon off;"]

__tests__/Categoria.service.test.tsx

@@ -1,4 +1,4 @@
-import { ICategoriaVM } from "../src/shared/interfaces";
+import { ICategoria } from "../src/shared/interfaces";
 import { CategoriasService } from "../src/shared/services/api";
 
 const execTests = false;
@@ -28,7 +28,7 @@ jest.mock("../__mocks__/axios-config", () => ({
 }));
 
 describe("CategoriasService", () => {
-  const mockCategoria: ICategoriaVM = {
+  const mockCategoria: ICategoria = {
     id: 1,
     descricao: "Categoria 1",
     idTipoCategoria: 1,

despesas-frontend-react.code-workspace

@@ -12,7 +12,7 @@
             "name": "Debugger In Chrome",
             "request": "launch",
             "type": "chrome",
-            "url": "http://localhost:80",
+            "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}",
             "address": "localhost",
             "port": 9229, // Porta de depuração 

docker-compose.debug.yml

@@ -6,7 +6,7 @@ services:
     image: despesas-frontend-react-debug-img
     build:
       context: .
-      dockerfile: ./Dockerfile-Debug
+      dockerfile: ./Dockerfile.Debug
     environment:
       NODE_ENV: development
       NODE_OPTIONS: "--inspect=0.0.0.0:9229"

docker-compose.dev.yml

@@ -7,7 +7,7 @@ services:
     working_dir: /usr/share/nginx/html
     build:
       context: .
-      dockerfile: ./Dockerfile-Development
+      dockerfile: ./Dockerfile.Development
     ports:
       - 3001:80
       - 443:443

docker-compose.local.yml

@@ -0,0 +1,17 @@
+version: '3.4'
+
+services:
+  despesas-frontend-react:
+    container_name: local
+    image: alexfariakof/despesas-pessoais-react-local-img
+    working_dir: /usr/share/nginx/html
+    build:
+      context: .
+      dockerfile: ./Dockerfile.Local
+    ports:
+      - 3000:3000
+    restart: always
+    environment:
+      NODE_ENV: development
+      DOMAINS: http://alexfariakof.dev.com
+      STAGE: development      

docker-compose.prod.yml

@@ -7,7 +7,7 @@ services:
     working_dir: /usr/share/nginx/html
     build:
       context: .
-      dockerfile: ./Dockerfile-Production
+      dockerfile: ./Dockerfile.Production
     ports:
       - 3000:3000
     restart: always

docker-compose.proto.yml

@@ -6,7 +6,7 @@ services:
     image: alexfariakof/despesas-pessoais-frontend-react-prototipo-img
     build:
       context: .
-      dockerfile: ./Dockerfile-Prototipo
+      dockerfile: ./Dockerfile.Prototipo
     environment:
       NODE_ENV: production
     ports:

nginx.dev.conf

@@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen 80 default_server;
     server_name _;
 
     location / {

package.json

@@ -26,7 +26,8 @@
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

src/App.tsx

@@ -4,6 +4,7 @@ import { Login, MenuLateral } from "./shared/components";
 import { AuthProvider, AppThemeProvider, DrawerProvider } from "./shared/contexts";
 
 export const App = () => {
+
     return (
         <AuthProvider>
             <AppThemeProvider >

src/pages/Categorias.tsx

@@ -1,29 +1,12 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import {
-  Box,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  SelectChangeEvent,
-  TextField,
-  IconButton,
-} from "@mui/material";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@mui/material";
+import { Box, FormControl, InputLabel, MenuItem, Paper, Select, SelectChangeEvent, TextField, IconButton } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import { BarraFerramentas } from "../shared/components";
 import { LayoutMasterPage } from "../shared/layouts";
 import { CategoriasService } from "../shared/services/api";
 import { Delete, Edit } from "@mui/icons-material";
-import { ICategoriaVM } from "../shared/interfaces";
+import { Categoria } from "../shared/models";
 interface State {
   id: number;
   descricao: string;
@@ -33,7 +16,7 @@ interface State {
 export const Categorias: React.FC = () => {
   const navigate = useNavigate();
   const [height, setHeight] = useState(0);
-  const [rows, setRows] = useState<ICategoriaVM[]>([]);
+  const [rows, setRows] = useState<Categoria[]>([]);
   const [values, setValues] = useState<State>({
     id: 0,
     descricao: "",
@@ -50,7 +33,7 @@ export const Categorias: React.FC = () => {
   };
 
   const handleSave = () => {
-    let dados: ICategoriaVM;
+    let dados: Categoria;
     dados = {
       id: values.id,
       descricao: values.descricao,
@@ -59,33 +42,33 @@ export const Categorias: React.FC = () => {
 
     if (dados.id === 0) {
       CategoriasService.create(dados)
-        .then((result) => {
+        .then((response : Categoria) => {
           if (
-            result.message === true &&
-            result.categoria !== undefined &&
-            result.categoria !== null
+            response &&
+            response !== undefined &&
+            response !== null
           ) {
             alert("Categotia cadastrada com sucesso!");
             handleClear();
             initializeCategorias();
           }
         })
-        .catch((error) => {
+        .catch(() => {
           alert("Erro ao cadastrar categoria!");
         });
     } else {
       CategoriasService.updateById(dados.id, dados)
-        .then((result) => {
+        .then((response: Categoria) => {
           if (
-            result.message === true &&
-            result.categoria !== undefined &&
-            result.categoria !== null
+            response &&
+            response !== undefined &&
+            response !== null
           ) {
             initializeCategorias();
             alert("Categoria atualizada com sucesso!");
           }
         })
-        .catch((error) => {
+        .catch(() => {
           alert("Erro ao atualizar categoria!");
         });
     }
@@ -107,12 +90,12 @@ export const Categorias: React.FC = () => {
 
   const handleDelete = (id: number, idTipoCategoria: number) => {
     if (idTipoCategoria !== 0) {
-      CategoriasService.deleteById(id).then((result) => {
-        if (result instanceof Error) {
-          alert(result.message);
-        } else if (result === true) {
+      CategoriasService.deleteById(id).then((response: boolean | Error) => {
+        if (response instanceof Error) {
+          alert(response);
+        } else if (response) {
           handleClear();
-          alert("Despesa exluída com sucesso!");
+          alert("Categoria exluída com sucesso!");
         }
       });
     } else {
@@ -143,24 +126,24 @@ export const Categorias: React.FC = () => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  });
+  }, [rows]);
 
   const initializeCategorias = (): void => {
     if (values.idTipoCategoria === 0) {
-      CategoriasService.getAll().then((result) => {
-        if (result instanceof Error) {
-          alert(result.message);
+      CategoriasService.getAll().then((response: Categoria[] | Error) => {
+        if (response instanceof Error) {
+          alert(response);
         } else {
-          setRows(result);
+          setRows(response);
         }
       });
     } else {
       CategoriasService.getByTipoCategoria(values.idTipoCategoria).then(
-        (result) => {
-          if (result instanceof Error) {
-            alert(result.message);
+        (response: Categoria[] | Error) => {
+          if (response instanceof Error) {
+            alert(response.message);
           } else {
-            setRows(result);
+            setRows(response);
           }
         }
       );