Add editing & delete card with Swipe Actions

Ivowainer · Apr 14, 2022 · ef8fc90 · ef8fc90
1 parent 69208c3
commit ef8fc90
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 24 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Header from './components/Header'
 import ListadoGastos from './components/ListadoGastos';
 import Modal from './components/Modal';
@@ -15,8 +15,26 @@ function App() {
 
   const [gastos, setGastos] = useState([])
 
+  const [gastoEditar, setGastoEditar] = useState({})
+
+  useEffect(() => {
+    if(Object.keys(gastoEditar).length > 0){
+
+      const handleEditarGasto = () => {
+        setModal(true)
+
+        setTimeout(() => {
+          setAnimarModal(true)
+        }, 500)
+      }
+
+      handleEditarGasto()
+    }
+  }, [gastoEditar])
+
   const handleNuevoGasto = () => {
     setModal(true)
+    setGastoEditar({})
 
     setTimeout(() => {
       setAnimarModal(true)
@@ -25,9 +43,24 @@ function App() {
 
 
   const guardarGasto = gasto => {
-    gasto.id = generarId();
-    gasto.fecha = Date.now();
-    setGastos([...gastos, gasto])
+    if(gasto.id) {
+      //Actualizar
+      const gastosActualizados = gastos.map( gastoState => gastoState.id === gasto.id ? gasto : gastoState)
+      setGastos(gastosActualizados)
+
+
+    }else{
+      //Nuevo gasto
+      gasto.id = generarId();
+      gasto.fecha = Date.now();
+      setGastos([...gastos, gasto])
+    }
+  }
+
+  const eliminarGasto = id => {
+    const gastosActualizados = gastos.filter( gasto => gasto.id !== id);
+
+    setGastos(gastosActualizados)
   }
 
   return (
@@ -44,7 +77,9 @@ function App() {
       <>
         <main>
           <ListadoGastos 
+            setGastoEditar={setGastoEditar}
             gastos={gastos}
+            eliminarGasto={eliminarGasto}
           />
         </main>
         <div className="nuevo-gasto">
@@ -57,7 +92,14 @@ function App() {
       </>
       )}
 
-      {modal && <Modal guardarGasto={guardarGasto} setModal={setModal} animarModal={animarModal} setAnimarModal={setAnimarModal}/>}
+      {modal && <Modal 
+                  guardarGasto={guardarGasto} 
+                  setModal={setModal} 
+                  animarModal={animarModal} 
+                  setAnimarModal={setAnimarModal} 
+                  gastoEditar={gastoEditar}
+                  setGastoEditar={setGastoEditar}
+                />}
 
     </div>
   )  

diff --git a/src/components/Gasto.jsx b/src/components/Gasto.jsx
@@ -21,20 +21,31 @@ const diccionarioIconos = {
     suscripciones: IconoSuscripciones
 }
 
-const Gasto = ({ gasto }) => {
+const Gasto = ({ gasto, setGastoEditar, eliminarGasto }) => {
 
-    const leadingActions = () => {
-        console.log('Editar..')
-    }
-    const trailingActions = () => {
-        console.log('Editar..')
-    }
+    const leadingActions = () => (
+        <LeadingActions>
+            <SwipeAction onClick={() => setGastoEditar(gasto)}>
+                Editar
+            </SwipeAction>
+        </LeadingActions>
+    )
+    const trailingActions = () => (
+        <TrailingActions>
+            <SwipeAction 
+                onClick={() => eliminarGasto(gasto.id)}
+                destructive={true}
+            >
+                Eliminar
+            </SwipeAction>
+        </TrailingActions>
+    )
 
     return (
         <SwipeableList>
             <SwipeableListItem
-                leadingActions={leadingActions}
-                trailingActions={trailingActions}
+                leadingActions={leadingActions()}
+                trailingActions={trailingActions()}
             >
                 <div className="gasto sombra">
                     <div className="contenido-gasto">

diff --git a/src/components/ListadoGastos.jsx b/src/components/ListadoGastos.jsx
@@ -1,6 +1,6 @@
 import Gasto from "./Gasto"
 
-const ListadoGastos = ({ gastos }) => {
+const ListadoGastos = ({ gastos, setGastoEditar, eliminarGasto }) => {
   return (
     <div className="listado-gastos contenedor">
         <h2>{gastos.length ? 'Gastos' : 'No hay gastos aún'}</h2>
@@ -9,6 +9,8 @@ const ListadoGastos = ({ gastos }) => {
             <Gasto 
                 key={gasto.id}
                 gasto={gasto}
+                setGastoEditar={setGastoEditar}
+                eliminarGasto={eliminarGasto}
             />
         ))}
     </div>

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -1,20 +1,33 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Mensaje from './Mensaje';
 import cerrarBtn from '../img/cerrar.svg'
 
-const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto }) => {
+const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto, gastoEditar, setGastoEditar }) => {
 
     const [mensaje, setMensaje] = useState('');
 
-    const[nombre, setNombre] = useState('');
-    const[cantidad, setCantidad] = useState('');
-    const[categoria, setCategoria] = useState('');
+    const [nombre, setNombre] = useState('');
+    const [cantidad, setCantidad] = useState('');
+    const [categoria, setCategoria] = useState('');
+    const [id, setId] = useState('')
+    const [fecha, setFecha] = useState('')
+
+    useEffect(() => {
+        if(Object.keys(gastoEditar).length > 0){
+            setNombre(gastoEditar.nombre)
+            setCantidad(gastoEditar.cantidad)
+            setCategoria(gastoEditar.categoria)
+            setId(gastoEditar.id)
+            setFecha(gastoEditar.fecha)
+        }
+    }, [])
 
     const handleOcultarModal = () => {
         setAnimarModal(false)
- 
+
         setTimeout(() => {
             setModal(false)
+            setGastoEditar({})
         }, 500)
     }
 
@@ -30,7 +43,7 @@ const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto }) => {
             return;
         }
 
-        guardarGasto({nombre, cantidad, categoria})
+        guardarGasto({nombre, cantidad, categoria, id, fecha})
 
         setNombre('')
         setCantidad('')
@@ -53,7 +66,7 @@ const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto }) => {
                 onSubmit={handleSubmit}
                 className={`formulario ${animarModal ? "animar" : "cerrar"}`}
             >
-                <legend>Nuevo gasto</legend>
+                <legend>{gastoEditar.nombre ? 'Editar gasto' : 'Nuevo gasto'}</legend>
                 {mensaje && <Mensaje tipo="error">{mensaje}</Mensaje>}
 
                 <div className="campo">
@@ -96,7 +109,7 @@ const Modal = ({ setModal, animarModal, setAnimarModal, guardarGasto }) => {
 
                 <input 
                     type="submit" 
-                    value="Añadir gasto"
+                    value={gastoEditar.nombre ? 'Guardar Cambios' : 'Nuevo gasto'}
                 />
             </form>
         </div>