Finish Implementatinos Refresh Token Authtenticaton

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,

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,
@@ -143,7 +126,7 @@ export const Categorias: React.FC = () => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  });
+  }, []);
 
   const initializeCategorias = (): void => {
     if (values.idTipoCategoria === 0) {

src/pages/Configuracoes.tsx

@@ -1,12 +1,6 @@
 import { useState, MouseEvent, ChangeEvent, useEffect } from "react";
 import { useAppThemeContext } from "../shared/contexts";
-import {
-  Box,
-  Typography,
-  Paper,
-  ToggleButtonGroup,
-  ToggleButton,
-} from "@mui/material";
+import { Box, Typography, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import { LayoutMasterPage } from "../shared/layouts";
 import ChangePassword from "../shared/components/Configuracoes/ChangePassword";
 import ChangeAvatar from "../shared/components/Configuracoes/ChangeAvatar";

src/pages/Despesas.tsx

@@ -1,14 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import {
-  Box,
-  FormControl,
-  InputAdornment,
-  InputLabel,
-  OutlinedInput,
-  Paper,
-  TextField,
-} from "@mui/material";
+import { Box, FormControl, InputAdornment, InputLabel, OutlinedInput, Paper, TextField } from "@mui/material";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import Stack from "@mui/material/Stack";
@@ -20,11 +12,11 @@ import { BarraFerramentas } from "../shared/components";
 import { LayoutMasterPage } from "../shared/layouts";
 import { CategoriasService, DespesasService } from "../shared/services/api";
 import { useDebounce } from "../shared/hooks";
-import { ICategoriaVM, IDespesaVM } from "../shared/interfaces";
+import { Categoria, Despesa } from "../shared/models";
 
 interface State {
   id: number;
-  categoria: ICategoriaVM | undefined | null;
+  categoria: Categoria | undefined | null;
   data: Dayjs | null;
   descricao: string;
   dtVencimento: Dayjs | null;
@@ -36,7 +28,7 @@ export const Despesas: React.FC = () => {
   const { debounce } = useDebounce(true, true);
   const [height, setHeight] = useState(0);
   const { id = 0 } = useParams<"id">();
-  const [categorias, setCategorias] = useState<Omit<ICategoriaVM, "">[]>([]);
+  const [categorias, setCategorias] = useState<Omit<Categoria, "">[]>([]);
   const [values, setValues] = useState<State>({
     id: 0,
     valor: 0,
@@ -72,10 +64,10 @@ export const Despesas: React.FC = () => {
   };
 
   const handleSave = () => {
-    let dados: IDespesaVM;
+    let dados: Despesa;
     dados = {
       id: Number(id),
-      categoria: values.categoria as ICategoriaVM,
+      categoria: values.categoria as Categoria,
       data: values.data,
       descricao: values.descricao,
       valor: values.valor,
@@ -123,9 +115,9 @@ export const Despesas: React.FC = () => {
     }
   };
 
-  const handleEdit = async (desp: IDespesaVM) => {
+  const handleEdit = async (desp: Despesa) => {
     await CategoriasService.getByTipoCategoria(1).then(
-      (result: ICategoriaVM[]) => {
+      (result: Categoria[]) => {
         setCategorias(result);
         const categoriaDespesa = result.find(
           (categoria) => categoria.id === desp.categoria.id

src/pages/Lancamentos.tsx

@@ -1,35 +1,21 @@
 import { useEffect, useState } from "react";
-import {
-  Box,
-  IconButton,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@mui/material";
+import { Box, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import { LayoutMasterPage } from "../shared/layouts";
 import { BarraFerramentas } from "../shared/components";
-import {
-  LancamentosService,
-  DespesasService,
-  ReceitasService,
-} from "../shared/services/api";
+import { LancamentosService, DespesasService, ReceitasService } from "../shared/services/api";
 import { useDebounce } from "../shared/hooks";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import { useNavigate } from "react-router-dom";
 import dayjs, { Dayjs } from "dayjs";
-import { ILancamentoVM } from "../shared/interfaces";
+import { Lancamento } from "../shared/models";
 
 export const Lancamentos = () => {
   const navigate = useNavigate();
   const { debounce } = useDebounce(true, false);
   const [height, setHeight] = useState(0);
   const [lancamentoMesAno, setLancamentoMesAno] = useState<Dayjs>(dayjs());
-  const [rows, setRows] = useState<Omit<ILancamentoVM, "id">[]>([]);
+  const [rows, setRows] = useState<Omit<Lancamento, "id">[]>([]);
   const handleAtualizarLancamento = (valorMesAno: Dayjs) => {
     setLancamentoMesAno(valorMesAno);
     LancamentosService.getByMesAnoByIdUsuario(valorMesAno).then((result) => {