From 910607eb1d6c9a593c9577ad6eb0e074a9b762d8 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 3 Nov 2023 13:04:26 +0000
Subject: [PATCH] Added the ability to delete a task

---
 src/InboxScreen.jsx             |  4 ++++
 src/InboxScreen.stories.jsx     | 19 +++++++++++++++++++
 src/components/Task.jsx         | 11 ++++++++++-
 src/components/Task.stories.jsx |  1 +
 src/components/TaskList.jsx     |  3 +++
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/InboxScreen.jsx b/src/InboxScreen.jsx
index 19726d4..8cf1b0f 100644
--- a/src/InboxScreen.jsx
+++ b/src/InboxScreen.jsx
@@ -8,6 +8,9 @@ export default function InboxScreen({ error }) {
   const archiveTask = (archive, id) => {
     dispatch({ type: archive ? "ARCHIVE_TASK" : "INBOX_TASK", id });
   };
+  const deleteTask = (id) => {
+    dispatch({ type: "DELETE_TASK", id });
+  };
 
   const togglePinTask = (state, id) => {
     dispatch({
@@ -41,6 +44,7 @@ export default function InboxScreen({ error }) {
         onArchiveTask={archiveTask}
         onTogglePinTask={togglePinTask}
         onEditTitle={editTitle}
+        onDeleteTask={deleteTask}
       />
     </div>
   );
diff --git a/src/InboxScreen.stories.jsx b/src/InboxScreen.stories.jsx
index a86d46a..2c04962 100644
--- a/src/InboxScreen.stories.jsx
+++ b/src/InboxScreen.stories.jsx
@@ -92,3 +92,22 @@ export const EditTask = {
     );
   },
 };
+
+export const DeleteTask = {
+  parameters: {
+    ...Default.parameters,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const getTask = (id) => canvas.findByRole("listitem", { name: id });
+
+    const itemToDelete = await getTask("task-1");
+    const deleteButton = await findByRole(itemToDelete, "button", {
+      name: "delete",
+    });
+
+    // Click the pin button
+    await userEvent.click(deleteButton);
+    await expect(canvas.getAllByRole("listitem").length).toBe(5);
+  },
+};
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index 0391018..461411a 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -4,6 +4,7 @@ export default function Task({
   onArchiveTask,
   onTogglePinTask,
   onEditTitle,
+  onDeleteTask,
 }) {
   return (
     <div
@@ -41,7 +42,13 @@ export default function Task({
           onChange={(e) => onEditTitle(e.target.value, id)}
         />
       </label>
-
+      <button
+        aria-label="delete"
+        className="delete-button"
+        onClick={() => onDeleteTask(id)}
+      >
+        <span className="icon-trash" />
+      </button>
       {state !== "TASK_ARCHIVED" && (
         <button
           className="pin-button"
@@ -73,4 +80,6 @@ Task.propTypes = {
   onTogglePinTask: PropTypes.func.isRequired,
   /** Event to change the task title */
   onEditTitle: PropTypes.func.isRequired,
+  /** Event to delete the task */
+  onDeleteTask: PropTypes.func.isRequired,
 };
diff --git a/src/components/Task.stories.jsx b/src/components/Task.stories.jsx
index 77ee10b..e855ac1 100644
--- a/src/components/Task.stories.jsx
+++ b/src/components/Task.stories.jsx
@@ -7,6 +7,7 @@ export default {
     onArchiveTask: { action: "onArchiveTask" },
     onTogglePinTask: { action: "onTogglePinTask" },
     onEditTitle: { action: "onEditTitle" },
+    onDeleteTask: { action: "onDeleteTask" },
   },
 };
 
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index e609699..27efb2f 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -6,11 +6,13 @@ export default function TaskList({
   onTogglePinTask,
   onArchiveTask,
   onEditTitle,
+  onDeleteTask,
 }) {
   const events = {
     onTogglePinTask,
     onArchiveTask,
     onEditTitle,
+    onDeleteTask,
   };
 
   const LoadingRow = (
@@ -69,6 +71,7 @@ TaskList.propTypes = {
   onTogglePinTask: PropTypes.func.isRequired,
   onArchiveTask: PropTypes.func.isRequired,
   onEditTitle: PropTypes.func.isRequired,
+  onDeleteTask: PropTypes.func.isRequired,
 };
 
 TaskList.defaultProps = {