TaskCard - Add delete button

src/features/TaskCard/CreateOrEditTaskCard.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
-import { createTask, editTask } from "../../storeSlices/boardSlice";
+import { createTask, editTask, deleteTask } from "../../storeSlices/boardSlice";
 import useAutoHeightTextArea from "../../utils/useAutoHeightTextArea";
 
 import styles from "./TaskCard.module.css";
@@ -62,6 +62,16 @@ export function CreateOrEditTaskCard({
     parentOnCancel();
   };
 
+  const onDelete = () => {
+    const confirmDelete = window.confirm(
+      "Do you really want to delete the task?"
+    );
+    if (confirmDelete) {
+      const payload = { cardID: cardID, listID };
+      dispatch(deleteTask(payload));
+    }
+  };
+
   /*
   ---------
   Render here
@@ -88,8 +98,21 @@ export function CreateOrEditTaskCard({
             onChange={e => setNewCardText(e.target.value)}
           ></textarea>
           <div className={styles.createActionBtnContainer}>
-            <input type="submit" value="Save" disabled={!isTextNonEmpty} />
+            <div className={styles.createActionBtnRow}>
-            <input type="button" value="Cancel" onClick={onCancel} />
+              <input type="submit" value="Save" disabled={!isTextNonEmpty} />
+              <input type="button" value="Cancel" onClick={onCancel} />
+            </div>
+            {/* Show delete button onlyin edit mode */}
+            {!isCreateMode ? (
+              <div className={styles.createActionBtnRow}>
+                <input
+                  className={styles.deleteTaskBtn}
+                  type="button"
+                  value="Delete task"
+                  onClick={onDelete}
+                />
+              </div>
+            ) : null}
           </div>
         </form>
       )}

src/features/TaskCard/TaskCard.module.css

@@ -26,20 +26,34 @@
 }
 
 .createActionBtnContainer {
-  display: flex;
+  margin-bottom: 12px;
-  justify-content: space-evenly;
 }
 
-.createActionBtnContainer > input {
+.createActionBtnRow {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 4px 0;
+}
+
+.createActionBtnRow:first-child {
+  margin-top: 0;
+}
+
+.createActionBtnRow > input {
   flex: 1 0 50px;
   margin: 0 8px;
   padding: 4px 0;
 }
 
-.createActionBtnContainer > input:first-child {
+.createActionBtnRow > input:first-child {
   margin-left: 0;
 }
 
-.createActionBtnContainer > input:last-child {
+.createActionBtnRow > input:last-child {
   margin-right: 0;
 }
+
+.deleteTaskBtn {
+  color: #f44335;
+  font-size: 0.85em;
+}

src/storeSlices/boardSlice.js

@@ -75,10 +75,21 @@ export const slice = createSlice({
       const existingCard = parentList.cards.find(({ id }) => id === cardID);
 
       existingCard.text = cardText;
+    },
+
+    deleteTask: (state, action) => {
+      const { text: cardText, cardID, listID: parentListID } = action.payload;
+
+      const parentList = state.lists.find(({ id }) => id === parentListID);
+      const existingCardIndex = parentList.cards.findIndex(({ id }) => id === cardID);
+
+      if (existingCardIndex > -1) {
+        parentList.cards.splice(existingCardIndex, 1);
+      }
     }
   }
 });
 
-export const { createList, createTask, editList, editTask } = slice.actions;
+export const { createList, createTask, editList, editTask, deleteTask } = slice.actions;
 
 export default slice.reducer;