added delete board and task functionality

src/components/shared/Delete.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import useStore from '../store/store'
+import Button from '../ui/Button'
+import '../../sass/shared/delete.scss'
+
+const Delete: React.FC<{ isBoard: boolean }> = function ({ isBoard }) {
+  const [
+    modalType,
+    setModalType,
+    currentBoard,
+    theme,
+    deleteBoard,
+    deleteTask,
+  ] = useStore(state => [
+    state.modalType,
+    state.setModalType,
+    state.currentBoard,
+    state.theme(),
+    state.deleteBoard,
+    state.deleteTask,
+  ])
+
+  return (
+    <div className="delete" data-theme={theme}>
+      <p className="delete__header">
+        Delete this {isBoard ? 'board' : 'task'}?
+      </p>
+      <p className="delete__message">
+        {isBoard
+          ? `Are you sure you want to delete the ‘${
+              currentBoard().name
+            }’ board? This action will remove all columns and tasks and cannot be reversed.`
+          : `Are you sure you want to delete the ‘${modalType.modalInfo?.name}’ task and its subtasks? This action cannot be reversed.`}
+      </p>
+      <div className="delete__btn-container">
+        <Button
+          className="del"
+          onClick={() =>
+            isBoard
+              ? deleteBoard(currentBoard().id)
+              : deleteTask(currentBoard().id, modalType.modalInfo!.id)
+          }
+        >
+          Delete
+        </Button>
+        <Button
+          className=" del del--cancel"
+          onClick={() => setModalType({ modalType: '', showModal: false })}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default Delete

src/components/shared/Header.tsx

@@ -100,7 +100,14 @@ const Header: React.FC<{
             >
               edit board
             </p>
-            <p className="dropdown__option">delete board</p>
+            <p
+              className="dropdown__option"
+              onClick={() =>
+                setModalType({ modalType: 'delete-board', showModal: true })
+              }
+            >
+              delete board
+            </p>
           </motion.div>
         )}
       </AnimatePresence>

src/components/shared/Modal.tsx

@@ -6,6 +6,7 @@ import ModifyTask from './ModifyTask'
 import ViewTask from './ViewTask'
 import useStore from '../store/store'
 import ModifyBoards from './ModifyBoards'
+import Delete from './Delete'
 
 const Modal: React.FC = function () {
   const [modalType, setModalType] = useStore(state => [
@@ -29,6 +30,8 @@ const Modal: React.FC = function () {
       {modalType.modalType === 'edit-board' && (
         <ModifyBoards editBoard title="edit board" button="save changes" />
       )}
+      {modalType.modalType === 'delete-task' && <Delete isBoard={false} />}
+      {modalType.modalType === 'delete-board' && <Delete isBoard />}
       {modalType.modalType === 'new-column' && (
         <ModifyBoards
           editBoard

src/components/shared/ModifyTask.tsx

@@ -91,7 +91,6 @@ const ModifyTask: React.FC<{
           ['', nanoid(), false],
           ['', nanoid(), false],
         ],
-    // column: editTask ? modalType.modalInfo!.status : currentBoard.status[0].name ? currentBoard.status[0].name : ''
     column: editTask
       ? modalType.modalInfo!.statusId!
       : currentBoard.status[0].id,

src/components/shared/ViewTask.tsx

@@ -165,7 +165,13 @@ const ViewTask: React.FC<{
                 >
                   edit task
                 </p>
-                <p>delete task</p>
+                <p
+                  onClick={() =>
+                    setModalType({ ...modalType, modalType: 'delete-task' })
+                  }
+                >
+                  delete task
+                </p>
               </motion.div>
             )}
           </AnimatePresence>

src/components/store/store.tsx

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
+import { persist } from 'zustand/middleware'
 
 export type Modal = {
   modalType: string
@@ -36,6 +36,8 @@ type State = {
   currentBoard: () => Board
   modalType: Modal
   createBoard: (boardName: string, boardColumns: string[]) => void
+  deleteBoard: (boardId: number) => void
+  deleteTask: (boardId: number, taskId: number) => void
   createTask: (
     title: string,
     description: string,
@@ -78,6 +80,29 @@ const useStore = create<State & Action>()(
           | 'light'
           | 'dark'
           | 'normal',
+      deleteBoard: function (boardId) {
+        const newBoards = get().boards.filter(board => board.id !== boardId)
+
+        set(() => ({ boards: newBoards }))
+        get().setCurrentBoard(0)
+        get().setModalType({ modalType: '', showModal: false })
+      },
+      deleteTask: function (boardId, taskId) {
+        const currentBoard = get().currentBoard()
+        const otherBoards = get().boards.filter(board => board.id !== boardId)
+
+        currentBoard.status.forEach(stat => {
+          if (stat.tasks.some(task => task.id === taskId)) {
+            stat.tasks = stat.tasks.filter(task => task.id !== taskId)
+          }
+        })
+
+        set(() => ({
+          boards: [...otherBoards, currentBoard].sort((a, b) => a.id! - b.id!),
+        }))
+        get().setCurrentBoard(boardId)
+        get().setModalType({ modalType: '', showModal: false })
+      },
       createTask: function (title, description, subtasks, status, boardId) {
         const otherBoards = get().boards.filter(board => board.id !== boardId)
         const currentBoard = get().boards.find(board => board.id === boardId)
@@ -258,7 +283,6 @@ const useStore = create<State & Action>()(
     }),
     {
       name: 'kanban-task-manager',
-      // storage: createJSONStorage(() => sessionStorage),
     }
   )
 )

src/sass/shared/delete.scss

@@ -0,0 +1,46 @@
+@use '../variables' as *;
+
+.delete {
+  width: min(95%, 480px);
+  background-color: $white;
+  border-radius: 6px;
+  padding: $spacer * 1.5;
+  margin-inline: auto;
+
+  &__header {
+    color: $red-200;
+    font-weight: 700;
+    font-size: 1.1rem;
+  }
+  &__message {
+    margin-block: $spacer $spacer * 1.5;
+    color: $gray-200;
+    line-height: 25px;
+    font-weight: 500;
+  }
+
+  &__btn-container {
+    display: flex;
+    gap: $spacer;
+
+    .del {
+      flex: 1;
+      display: block;
+      text-align: center;
+      background-color: $red-200;
+
+      &--cancel {
+        background-color: rgba(99, 95, 199, 0.1);
+        color: $purple-main;
+      }
+    }
+  }
+
+  &[data-theme='dark'] {
+    background-color: $dark-200;
+
+    .del--cancel {
+      background-color: $white;
+    }
+  }
+}