From c8e6ccf539491f1a9dc8c3ea410c00b6cd48f664 Mon Sep 17 00:00:00 2001
From: Alex Ribeiro de Faria <42475620+alexfariakof@users.noreply.github.com>
Date: Thu, 14 Dec 2023 19:40:47 -0300
Subject: [PATCH] Hotfix/Implementations Add Required in ViewModels Objects
 props #117 (#39)

---
 package.json                        |  2 +-
 src/pages/Despesas.tsx              | 54 +++++++++++++++++++----------
 src/pages/Receitas.tsx              | 30 +++++++++++-----
 src/shared/interfaces/IDespesaVM.ts |  4 +--
 src/shared/interfaces/IReceitaVM.ts |  4 +--
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 5119a78..38dd27c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "despesas-pessoaisfrontend-react",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": true,
   "scripts": {
     "start": "set PORT=80 && react-scripts start",
diff --git a/src/pages/Despesas.tsx b/src/pages/Despesas.tsx
index 1482822..80baf10 100644
--- a/src/pages/Despesas.tsx
+++ b/src/pages/Despesas.tsx
@@ -23,7 +23,8 @@ import { useDebounce } from "../shared/hooks";
 import { ICategoriaVM, IDespesaVM } from "../shared/interfaces";
 
 interface State {
-  idCategoria: string;
+  id: number;
+  categoria: ICategoriaVM | undefined | null;
   data: Dayjs | null;
   descricao: string;
   dtVencimento: Dayjs | null;
@@ -37,9 +38,10 @@ export const Despesas: React.FC = () => {
   const { id = 0 } = useParams<"id">();
   const [categorias, setCategorias] = useState<Omit<ICategoriaVM, "">[]>([]);
   const [values, setValues] = useState<State>({
+    id: 0,
     valor: 0,
     descricao: "",
-    idCategoria: "0",
+    categoria: null,
     data: dayjs(),
     dtVencimento: null,
   });
@@ -50,7 +52,15 @@ export const Despesas: React.FC = () => {
     };
 
   const handleChangeCategoria = (event: SelectChangeEvent) => {
-    setValues({ ...values, idCategoria: event.target.value });
+    const categoriaId = event.target.value;
+    const categoriaSelecionada = categorias.find(
+      (categoria) => categoria.id === Number(categoriaId)
+    );
+
+    setValues((prevValues) => ({
+      ...prevValues,
+      categoria: categoriaSelecionada || null,
+    }));
   };
 
   const handleChangeData = (newValue: Dayjs | null) => {
@@ -65,14 +75,14 @@ export const Despesas: React.FC = () => {
     let dados: IDespesaVM;
     dados = {
       id: Number(id),
-      idCategoria: Number(values.idCategoria),
+      categoria: values.categoria as ICategoriaVM,
       data: values.data,
       descricao: values.descricao,
       valor: values.valor,
       dataVencimento: values.dtVencimento,
     };
 
-    if (id === 0 && dados.idCategoria !== 0) {
+    if (id === 0 && dados.categoria !== null) {
       DespesasService.create(dados)
         .then((result) => {
           if (result instanceof Error) {
@@ -91,7 +101,7 @@ export const Despesas: React.FC = () => {
         .catch((error) => {
           alert("Erro ao cadastrar despesa!");
         });
-    } else if (dados.idCategoria !== 0) {
+    } else if (dados.categoria !== null) {
       DespesasService.updateById(Number(id), dados)
         .then((result) => {
           if (result instanceof Error) {
@@ -114,22 +124,30 @@ export const Despesas: React.FC = () => {
   };
 
   const handleEdit = async (desp: IDespesaVM) => {
-    await CategoriasService.getByTipoCategoria(1).then((result: any) => {
-      setCategorias(result);
-    });
-    setValues({
-      idCategoria: desp.idCategoria.toString(),
-      data: desp.data,
-      descricao: desp.descricao,
-      dtVencimento: desp.dataVencimento,
-      valor: desp.valor,
-    });
+    await CategoriasService.getByTipoCategoria(1).then(
+      (result: ICategoriaVM[]) => {
+        setCategorias(result);
+        const categoriaDespesa = result.find(
+          (categoria) => categoria.id === desp.categoria.id
+        );
+
+        setValues({
+          id: desp.id,
+          categoria: categoriaDespesa,
+          data: desp.data,
+          descricao: desp.descricao,
+          dtVencimento: desp.dataVencimento,
+          valor: desp.valor,
+        });
+      }
+    );
   };
 
   const handleClear = () => {
     setValues({
       ...values,
-      idCategoria: "0",
+      id: 0,
+      categoria: null,
       data: dayjs("2014-08-18T21:11:54"),
       descricao: "",
       dtVencimento: dayjs("2014-08-18T21:11:54"),
@@ -199,7 +217,7 @@ export const Despesas: React.FC = () => {
           <Select
             labelId="txtCategoria"
             id="txtCategoria"
-            value={values.idCategoria}
+            value={values.categoria ? values.categoria?.id.toString() : "null"}
             label="Categoria"
             onChange={handleChangeCategoria}
           >
diff --git a/src/pages/Receitas.tsx b/src/pages/Receitas.tsx
index c5b400c..15237b3 100644
--- a/src/pages/Receitas.tsx
+++ b/src/pages/Receitas.tsx
@@ -21,7 +21,8 @@ import { LayoutMasterPage } from "../shared/layouts";
 import { ReceitasService, CategoriasService } from "../shared/services/api";
 import { ICategoriaVM, IReceitaVM } from "../shared/interfaces";
 interface State {
-  idCategoria: string;
+  id: number;
+  categoria: ICategoriaVM | null;
   data: Dayjs | null;
   descricao: string;
   valor: number;
@@ -33,9 +34,10 @@ export const Receitas: React.FC = () => {
   const { id = 0 } = useParams<"id">();
   const [categorias, setCategorias] = useState<Omit<ICategoriaVM, "">[]>([]);
   const [values, setValues] = useState<State>({
+    id: 0,
+    categoria: null,
     valor: 0,
     descricao: "",
-    idCategoria: "0",
     data: dayjs("2014-08-18T21:11:54"),
   });
 
@@ -45,7 +47,15 @@ export const Receitas: React.FC = () => {
     };
 
   const handleChangeCategoria = (event: SelectChangeEvent) => {
-    setValues({ ...values, idCategoria: event.target.value });
+    const categoriaId = event.target.value;
+    const categoriaSelecionada = categorias.find(
+      (categoria) => categoria.id === Number(categoriaId)
+    );
+
+    setValues((prevValues) => ({
+      ...prevValues,
+      categoria: categoriaSelecionada || null,
+    }));
   };
 
   const handleChangeData = (newValue: Dayjs | null) => {
@@ -56,13 +66,13 @@ export const Receitas: React.FC = () => {
     let dados: IReceitaVM;
     dados = {
       id: Number(id),
-      idCategoria: Number(values.idCategoria),
+      categoria: values.categoria as ICategoriaVM,
       data: values.data,
       descricao: values.descricao,
       valor: values.valor,
     };
 
-    if (id === 0 && dados.idCategoria !== 0) {
+    if (id === 0 && dados.categoria !== null) {
       ReceitasService.create(dados)
         .then((result) => {
           if (result instanceof Error) {
@@ -81,7 +91,7 @@ export const Receitas: React.FC = () => {
         .catch((error) => {
           alert("Erro ao cadastrar receita!");
         });
-    } else if (dados.idCategoria !== 0) {
+    } else if (dados.categoria !== null) {
       ReceitasService.updateById(Number(id), dados)
         .then((result) => {
           if (result instanceof Error) {
@@ -106,7 +116,8 @@ export const Receitas: React.FC = () => {
 
   const handleEdit = (recetita: IReceitaVM) => {
     setValues({
-      idCategoria: recetita.idCategoria.toString(),
+      id: recetita.id,
+      categoria: recetita.categoria,
       data: recetita.data,
       descricao: recetita.descricao,
       valor: recetita.valor,
@@ -116,7 +127,8 @@ export const Receitas: React.FC = () => {
   const handleClear = () => {
     setValues({
       ...values,
-      idCategoria: "0",
+      id: 0,
+      categoria: null,
       data: dayjs("2014-08-18T21:11:54"),
       descricao: "",
       valor: 0,
@@ -185,7 +197,7 @@ export const Receitas: React.FC = () => {
           <Select
             labelId="txtCategoria"
             id="txtCategoria"
-            value={values.idCategoria}
+            value={values.categoria ? values.categoria?.id.toString() : "null"}
             label="Categoria"
             onChange={handleChangeCategoria}
           >
diff --git a/src/shared/interfaces/IDespesaVM.ts b/src/shared/interfaces/IDespesaVM.ts
index c0272b9..511459a 100644
--- a/src/shared/interfaces/IDespesaVM.ts
+++ b/src/shared/interfaces/IDespesaVM.ts
@@ -1,8 +1,8 @@
 import { Dayjs } from "dayjs";
-
+import { ICategoriaVM } from "./ICategoriaVM";
 export interface IDespesaVM {
   id: number;
-  idCategoria: number;
+  categoria: ICategoriaVM;
   data: Dayjs | null;
   descricao: string;
   valor: number;
diff --git a/src/shared/interfaces/IReceitaVM.ts b/src/shared/interfaces/IReceitaVM.ts
index 2dea1c5..a85e932 100644
--- a/src/shared/interfaces/IReceitaVM.ts
+++ b/src/shared/interfaces/IReceitaVM.ts
@@ -1,8 +1,8 @@
 import { Dayjs } from "dayjs";
-
+import { ICategoriaVM } from "./ICategoriaVM";
 export interface IReceitaVM {
   id: number;
-  idCategoria: Number;
+  categoria: ICategoriaVM;
   data: Dayjs | null;
   descricao: string;
   valor: number;