Budget card added with category img

src/App.jsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import Header from './components/Header'
+import ListadoGastos from './components/ListadoGastos';
 import Modal from './components/Modal';
+import { generarId } from './helpers/index'
 import IconoNuevoGasto from './img/nuevo-gasto.svg';
 
 
@@ -11,37 +13,53 @@ function App() {
   const [modal, setModal] = useState(false)
   const [animarModal, setAnimarModal] = useState(false)
 
+  const [gastos, setGastos] = useState([])
+
   const handleNuevoGasto = () => {
     setModal(true)
 
     setTimeout(() => {
       setAnimarModal(true)
-    }, 400)
+    }, 500)
   }
 
-    return (
-      <div>
-        <Header 
-          presupuesto={presupuesto}
-          setPresupuesto={setPresupuesto}
-          isValidPresupuesto={isValidPresupuesto}
-          setIsValidPresupuesto={setIsValidPresupuesto}
-        />
 
-        {isValidPresupuesto && (
+  const guardarGasto = gasto => {
+    gasto.id = generarId();
+    gasto.fecha = Date.now();
+    setGastos([...gastos, gasto])
+  }
+
+  return (
+    <div className={modal && 'fijar'}>
+      <Header 
+        presupuesto={presupuesto}
+        setPresupuesto={setPresupuesto}
+        isValidPresupuesto={isValidPresupuesto}
+        setIsValidPresupuesto={setIsValidPresupuesto}
+      />
+
+      {isValidPresupuesto && (
+      <>
+        <main>
+          <ListadoGastos 
+            gastos={gastos}
+          />
+        </main>
         <div className="nuevo-gasto">
           <img 
             src={IconoNuevoGasto} 
             alt="icono nuevo gasto"
             onClick={handleNuevoGasto}
           />
-        </div>)}
+        </div>
+      </>
+      )}
 
-        {modal && <Modal setModal={setModal} animarModal={animarModal} setAnimarModal={setAnimarModal}/>}
+      {modal && <Modal guardarGasto={guardarGasto} setModal={setModal} animarModal={animarModal} setAnimarModal={setAnimarModal}/>}
 
-      </div>
-    )
-
+    </div>
+  )  
 }
 
 export default App

src/components/Gasto.jsx

@@ -0,0 +1,43 @@
+import { formatearFecha } from "../helpers"
+
+import IconoAhorro from '../img/icono_ahorro.svg'
+import IconoCasa from '../img/icono_casa.svg'
+import IconoComida from '../img/icono_comida.svg'
+import IconoGastos from '../img/icono_gastos.svg'
+import IconoOcio from '../img/icono_ocio.svg'
+import IconoSalud from '../img/icono_salud.svg'
+import IconoSuscripciones from '../img/icono_suscripciones.svg'
+
+const diccionarioIconos = {
+    ahorro: IconoAhorro,
+    comida: IconoComida,
+    casa: IconoCasa,
+    gastos: IconoGastos,
+    ocio: IconoOcio,
+    salud: IconoSalud,
+    suscripciones: IconoSuscripciones
+}
+
+const Gasto = ({ gasto }) => {
+  return (
+    <div className="gasto sombra">
+        <div className="contenido-gasto">
+            <img 
+                src={diccionarioIconos[gasto.categoria]} 
+                alt="Icono gasto" 
+            />
+            <div className="descripcion-gasto">
+                <p className="categoria">{gasto.categoria}</p>
+                <p className="nombre-gasto">{gasto.nombre}</p>
+                <p className="fecha-gasto">
+                    Agreado el: {""}
+                    <span>{formatearFecha(gasto.fecha)}</span>
+                </p>
+            </div>
+        </div>
+        <p className="cantidad-gasto">${gasto.cantidad}</p>
+    </div>
+  )
+}
+
+export default Gasto

src/components/ListadoGastos.jsx

@@ -0,0 +1,18 @@
+import Gasto from "./Gasto"
+
+const ListadoGastos = ({ gastos }) => {
+  return (
+    <div className="listado-gastos contenedor">
+        <h2>{gastos.length ? 'Gastos' : 'No hay gastos aún'}</h2>
+
+        {gastos.map( gasto => (
+            <Gasto 
+                key={gasto.id}
+                gasto={gasto}
+            />
+        ))}
+    </div>
+  )
+}
+
+export default ListadoGastos

src/components/Modal.jsx

@@ -1,18 +1,42 @@
 import { useState } from 'react'
+import Mensaje from './Mensaje';
 import cerrarBtn from '../img/cerrar.svg'
 
-const Modal = ({ setModal, animarModal, setAnimarModal }) => {
+const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto }) => {
+
+    const [mensaje, setMensaje] = useState('');
 
     const[nombre, setNombre] = useState('');
     const[cantidad, setCantidad] = useState('');
     const[categoria, setCategoria] = useState('');
 
     const handleOcultarModal = () => {
         setAnimarModal(false)
-
+ 
         setTimeout(() => {
             setModal(false)
-        }, 350)
+        }, 500)
+    }
+
+    const handleSubmit = e => {
+        e.preventDefault();
+
+        if([ nombre, cantidad, categoria].includes('')){
+            setMensaje('Todos los campos son obligatorios')
+
+            setTimeout(() => {
+                setMensaje('')
+            }, 2000)
+            return;
+        }
+
+        guardarGasto({nombre, cantidad, categoria})
+
+        setNombre('')
+        setCantidad('')
+        setCategoria('')
+
+        handleOcultarModal()
     }
 
     return (
@@ -25,8 +49,12 @@ const Modal = ({ setModal, animarModal, setAnimarModal }) => {
                 />
             </div>
 
-            <form className={`formulario ${animarModal ? "animar" : "cerrar"}`}>
+            <form 
+                onSubmit={handleSubmit}
+                className={`formulario ${animarModal ? "animar" : "cerrar"}`}
+            >
                 <legend>Nuevo gasto</legend>
+                {mensaje && <Mensaje tipo="error">{mensaje}</Mensaje>}
 
                 <div className="campo">
                     <label htmlFor="nombre">Nombre Gasto</label>

src/helpers/index.js

@@ -0,0 +1,16 @@
+export const generarId = () => {
+    const random = Math.random().toString(36).substr(2)
+    const fecha = Date.now().toString(36)
+    return random + fecha
+}
+
+export const formatearFecha = (fecha)  => {
+    const fechaNueva = new Date(fecha);
+    const opciones = {
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit'
+    }
+
+    return fechaNueva.toLocaleDateString('es-ES', opciones);
+}