adds task delete functionality

Author: johnlcos

server/controllers/tasksController.ts

@@ -123,6 +123,22 @@ const tasksController = {
       });
     }
   },
+  deleteTask: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const deletedTask = await Card.findOneAndDelete({
+        _id: req.params.taskId,
+      });
+      res.locals.task = deletedTask;
+      return next();
+    } catch (err) {
+      // pass error through to global error handler
+      return next({
+        log: `tasksController.deleteTask ERROR: ${err}`,
+        status: 500,
+        message: { err: "Error deleting Task" },
+      });
+    }
+  },
 };
 
 export default tasksController;

server/routes/tasksRouter.ts

@@ -28,4 +28,14 @@ router.post(
   }
 );
 
+// route for deleting a task card
+router.delete(
+  "/delete/:taskId",
+  tasksController.deleteTask,
+  tasksController.pullTask,
+  (_req: Request, res: Response) => {
+    return res.status(200).json();
+  }
+);
+
 export default router;

src/components/EditTaskModal.tsx

@@ -81,6 +81,27 @@ const EditTaskModal = ({
     setFormData((prevData: TaskFormState) => ({ ...prevData, [name]: value }));
   };
 
+  const handleDeleteTask = () => {
+    const fetchDeleteTask = async () => {
+      const response: Response = await fetch(`/tasks/delete/${task._id}`, {
+        method: "DELETE",
+      });
+      if (response.status === 200) {
+        setBoardState((prevState: BoardState) => {
+          const column = [...prevState[startColumn]];
+          const idx = column.indexOf(task);
+          column.splice(idx, 1);
+          return {
+            ...prevState,
+            [startColumn]: column,
+          };
+        });
+      }
+    };
+    fetchDeleteTask().catch(console.error);
+    setEditingTask(null);
+  };
+
   return createPortal(
     <div className="modal-overlay">
       <div className="modal">
@@ -154,6 +175,9 @@ const EditTaskModal = ({
             >
               Cancel
             </button>
+            <button className="modal-delete" onClick={handleDeleteTask}>
+              Delete
+            </button>
           </div>
         </form>
       </div>

src/scss/mainContainer.scss

@@ -8,5 +8,6 @@
   .board-title {
     height: 5%;
     margin: 0;
+    margin-top: 10px;
   }
 }

src/scss/modal.scss

@@ -58,10 +58,6 @@
           padding: 10px 20px;
           border: none;
           border-radius: 5px;
-        }
-
-        .modal-submit {
-          background-color: #c3ff0e;
           width: 100px;
           cursor: pointer;
           transition: all 0.3s ease-in-out;
@@ -73,14 +69,16 @@
           }
         }
 
+        .modal-submit {
+          background-color: #c3ff0e;
+        }
+
         .modal-cancel {
           background-color: goldenrod;
-          width: 100px;
-          cursor: pointer;
-          transition: all 0.3s ease-in-out;
-          &:hover {
-            transform: scale(1.1);
-          }
+        }
+
+        .modal-delete {
+          background-color: rgb(206, 61, 61);
         }
       }
     }