Merge pull request #25 from JackDev21/develop

add compo confirmDelete and functionailty #17

app/src/component/ConfirmDelete.jsx

@@ -0,0 +1,13 @@
+function ConfirmDelete({ onConfirmDelete, onCancelDelete }) {
+	return (
+		<>
+			<div>
+				<h6>¿Estás seguro de eliminar esta tarea?</h6>
+				<button onClick={onConfirmDelete}>Aceptar</button>
+				<button onClick={onCancelDelete}>Cancelar</button>
+			</div>
+		</>
+	)
+}
+
+export default ConfirmDelete

app/src/component/TaskList.jsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react"
 import logic from "../logic"
 
 import Title from "./Title"
+import ConfirmDelete from "./ConfirmDelete"
 
 import "./Title.css"
 import "./TaskList.css"
@@ -11,6 +12,11 @@ function TaskList() {
 	const [tasks, setTasks] = useState([])
 	const [task, setTask] = useState("")
 
+	const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+
+	const [taskIdToDelete, setTaskIdToDelete] = useState(null)
+	const [indexToDelete, setIndexToDelete] = useState(null)
+
 	const handleInput = (event) => {
 		const input = event.target.value
 		setTask(input)
@@ -22,7 +28,7 @@ function TaskList() {
 		try {
 			logic.createTask(task, (error) => {
 				if (error) {
-					alert(error.meessage)
+					alert(error.message)
 
 					return
 				}
@@ -61,9 +67,9 @@ function TaskList() {
 		}
 	}
 
-	const handleDeleteTask = (indexToDelete, taskId) => {
+	const confirmDelete = () => {
 		try {
-			logic.deleteTask(taskId, (error) => {
+			logic.deleteTask(taskIdToDelete, (error) => {
 				if (error) {
 					console.error(error)
 					alert(error.message)
@@ -76,6 +82,11 @@ function TaskList() {
 			console.error(error)
 			alert(error.message)
 		}
+		setShowConfirmDelete(false)
+	}
+
+	const cancelDelete = () => {
+		setShowConfirmDelete(false)
 	}
 
 	const handleTaskCompleted = (indexToComplete) => {
@@ -84,6 +95,12 @@ function TaskList() {
 		setTasks(taskUpdated)
 	}
 
+	const handleDeletePost = (index, taskId) => {
+		setShowConfirmDelete(true)
+		setTaskIdToDelete(taskId)
+		setIndexToDelete(index)
+	}
+
 	return (
 		<>
 			<Title />
@@ -102,10 +119,11 @@ function TaskList() {
 								<p onClick={() => handleTaskCompleted(index)} className={task.completed ? "Completed" : ""}>
 									{task.text}
 								</p>
-								<span onClick={() => handleDeleteTask(index, task.id)}>❌</span>
+								<span onClick={() => handleDeletePost(index, task.id)}>❌</span>
 							</li>
 						))}
 					</ul>
+					{showConfirmDelete && <ConfirmDelete onConfirmDelete={confirmDelete} onCancelDelete={cancelDelete} />}
 				</div>
 			</div>
 		</>

app/src/logic.js

@@ -61,29 +61,21 @@ logic.getAllTasks = (callback) => {
 
 logic.deleteTask = (taskId, callback) => {
 
-  const confirmDelete = confirm("¿Estas seguro de querer borrar esta tarea?")
-
-  if (!confirmDelete) {
-    return
-  } else {
-
-    const xhr = new XMLHttpRequest
-
-    xhr.onload = () => {
-      if (xhr.status === (204)) {
-        callback(null)
-        return
-      }
-
-      const { error, message } = JSON.parse(xhr.response)
+  const xhr = new XMLHttpRequest
 
-      callback({ error, message })
+  xhr.onload = () => {
+    if (xhr.status === (204)) {
+      callback(null)
+      return
     }
 
-    xhr.open("DELETE", `http://localhost:3001/tasks/${taskId}`)
-    xhr.send()
+    const { error, message } = JSON.parse(xhr.response)
+
+    callback({ error, message })
   }
 
+  xhr.open("DELETE", `http://localhost:3001/tasks/${taskId}`)
+  xhr.send()
 }
 
 export default logic