Agregando Boton de eliminar Gasto

jutaga · Apr 1, 2023 · 88e40b2 · 88e40b2
1 parent 8e1f527
commit 88e40b2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,7 +41,6 @@ export const App = () => {
 
 
 
-
   return (
     <div className="container">
       <header >
@@ -59,8 +58,8 @@ export const App = () => {
                   <Formulario setcrearGasto={setcrearGasto} setGastoApp={setGastoApp} />
                 </div>
                 <div className="col-md-6">
-                  <Listado gastos={gastos} />
-                  <ControlPresupuesto total={total} presupuesto={presupuesto} />
+                  <Listado total={total} setTotal={setTotal} gastos={gastos} setGastos={setGastos} />
+                  <ControlPresupuesto  total={total} presupuesto={presupuesto} />
                 </div>
               </div>
           }

diff --git a/src/components/ControlPresupuesto.tsx b/src/components/ControlPresupuesto.tsx
@@ -3,15 +3,13 @@ import { revisarPresupuesto } from "../helpers"
 export const ControlPresupuesto = ({ total, presupuesto }: any) => {
     return (
         <>
-
             <div className="alert alert-info">
                 Presupuesto: $ {presupuesto}
             </div>
 
             <div className={`alert ${revisarPresupuesto(presupuesto, total)}`}>
                 Restante : $ {total}
             </div>
-
         </>
     )
 }
diff --git a/src/components/GastoIndividual.tsx b/src/components/GastoIndividual.tsx
@@ -2,29 +2,33 @@ import { Gasto } from "../interfaces/Gasto.interface"
 
 
 interface Props {
-  gasto: Gasto
+  gasto: Gasto;
+  eliminarGasto: React.Dispatch<React.SetStateAction<any>>;
+  setTotal: React.Dispatch<React.SetStateAction<number>>; 
+  total: number;
+
 }
 
 
-export const GastoIndividual = ({ gasto }: Props) => {
+export const GastoIndividual = ({ gasto, eliminarGasto, setTotal, total }: Props) => {
+
   return (
-    <li className="list-group ">
-      <div className="d-flex justify-content-between m-2 ">
-        <p className="p-1 m-2 text-capitalize">{gasto.nombre}</p>
-        <span className=" p-2 m-2 rounded-3 bg-dark text-light"><i className="bi bi-currency-dollar"></i> {gasto.cantidad}</span>
+    <li className="list-group">
+      <div className="d-flex justify-content-between align-items-center m-2">
+        <p className="p-1 m-0 text-capitalize">{gasto.nombre}</p>
+        <div className="d-flex align-items-center">
+          <span className=" p-2 m-2 rounded-3 bg-dark text-light"><i className="bi bi-currency-dollar"></i> {gasto.cantidad}</span>
+          <button onClick={()=> {
+            eliminarGasto(gasto.id);
+            setTotal(total + parseInt(gasto.cantidad.toString()));
+            }}
+
+             className="btn btn-danger">X</button>
+        </div>
       </div>
     </li>
   )
 }
 
-/* 
-<li className="list-group">
-  <div className="d-flex justify-content-between align-items-center m-2">
-    <p className="p-1 m-0 text-capitalize">{gasto.nombre}</p>
-    <div className="d-flex align-items-center">
-      <span className=" p-2 m-2 rounded-3 bg-dark text-light"><i className="bi bi-currency-dollar"></i> {gasto.cantidad}</span>
-      <button className="btn btn-danger">X</button>
-    </div>
-  </div>
-</li>
- */
+
+
diff --git a/src/components/Listado.tsx b/src/components/Listado.tsx
@@ -3,15 +3,25 @@ import { GastoIndividual } from "./GastoIndividual";
 
 interface Props {
     gastos: Gasto[];
+    setGastos : React.Dispatch<React.SetStateAction<Gasto[]>>;
+    setTotal: React.Dispatch<React.SetStateAction<number>>;
+    total: number;
 }
 
-export const Listado = ({ gastos }: Props) => {
+export const Listado = ({ gastos, setGastos, setTotal, total}: Props) => {
+
+
+    const eliminarGasto = (gastoId: string) => {
+        const nuevosGastos = gastos.filter((gasto) => gasto.id !== gastoId);
+        setGastos(nuevosGastos);
+    }
+
     return (
         <div>
 
             <h2 className="text-center ">Gastos Realizados <i className="bi bi-cash"></i></h2>
             {gastos.map((gasto) => (
-                <GastoIndividual key={gasto.id} gasto={gasto} />
+                <GastoIndividual total={total} setTotal={setTotal} eliminarGasto = {eliminarGasto} key={gasto.id} gasto={gasto} />
             ))}
 
         </div>