➕ feat: handleDeleteTask

linder3hs · Apr 11, 2024 · 351998b · 351998b
1 parent ca45829
commit 351998b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/semana-9/todolist/src/App.jsx b/semana-9/todolist/src/App.jsx
@@ -32,7 +32,7 @@ export default function App() {
     setCurrentTask(task);
   };
 
-  const handleDeleteTask = (task) => {
+  const handleCurrentDeleteTask = (task) => {
     setCurrentTask(task);
     setIsOpenDelete(true);
   };
@@ -46,6 +46,15 @@ export default function App() {
     setIsOpen(false);
   };
 
+  const handleDeleteTask = (task) => {
+    const filteredTasks = listTasks.filter((element) => element.id !== task.id);
+    saveTasksInLocalStorage(filteredTasks);
+    setListTask(filteredTasks);
+    setIsOpenDelete(false);
+  };
+
+  const handleDeleteCancel = () => setIsOpenDelete(false);
+
   return (
     <>
       <main className="max-w-md mx-auto p-6">
@@ -68,7 +77,9 @@ export default function App() {
                   handleCurrentTask(task)
                 }}>✏️</button> */}
                 <button onClick={() => handleCurrentTask(task)}>✏️</button>
-                <button onClick={() => handleDeleteTask(task)}>🗑️</button>
+                <button onClick={() => handleCurrentDeleteTask(task)}>
+                  🗑️
+                </button>
               </div>
             </div>
           ))}
@@ -87,7 +98,11 @@ export default function App() {
             setIsOpen={setIsOpenDelete}
             title="Eliminar tarea"
           >
-            <DeleteForm currentTask={currentTask} />
+            <DeleteForm
+              currentTask={currentTask}
+              handleDeleteTask={handleDeleteTask}
+              handleDeleteCancel={handleDeleteCancel}
+            />
           </Modal>
         )}
       </main>

diff --git a/semana-9/todolist/src/components/DeleteForm/index.jsx b/semana-9/todolist/src/components/DeleteForm/index.jsx
@@ -4,10 +4,16 @@ export default function DeleteForm(props) {
     <>
       <h2>Esta seguro de eliminar la tarea {props.currentTask?.text}</h2>
       <div className="flex justify-between my-7">
-        <button className="bg-red-500 px-4 py-2 text-white rounded-md">
+        <button
+          onClick={props.handleDeleteCancel}
+          className="bg-red-500 px-4 py-2 text-white rounded-md"
+        >
           No, estoy seguro
         </button>
-        <button className="bg-green-500 px-4 py-2 text-white rounded-md">
+        <button
+          onClick={() => props.handleDeleteTask(props.currentTask)}
+          className="bg-green-500 px-4 py-2 text-white rounded-md"
+        >
           Si, estoy seguro
         </button>
       </div>