Added the ability to delete a task

Author: jonniebigodes

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>
   );

src/InboxScreen.stories.jsx

@@ -91,3 +91,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);
+  },
+};

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,
 };

src/components/Task.stories.jsx

@@ -7,6 +7,7 @@ export default {
     onArchiveTask: { action: "onArchiveTask" },
     onTogglePinTask: { action: "onTogglePinTask" },
     onEditTitle: { action: "onEditTitle" },
+    onDeleteTask: { action: "onDeleteTask" },
   },
 };
 

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 = {