added subtask check functionality

src/components/shared/Body.tsx

@@ -18,8 +18,6 @@ const Body: React.FC<{
   const modalType = useStore(state => state.modalType)
   const colorTheme = useStore(state => state.theme())
 
-  console.log(colorTheme)
-
   return (
     <motion.main layout className="body">
       {!currentBoard.status.every(el => !el.tasks.length) && (

src/components/shared/ViewTask.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useState } from 'react'
+import React, { useEffect, useId, useState } from 'react'
 import { nanoid } from 'nanoid'
 import { AnimatePresence, motion } from 'framer-motion'
 
@@ -7,12 +7,19 @@ import '../../sass/shared/viewtask.scss'
 import chevron from '../../assets/icon-chevron-down.svg'
 import useStore from '../store/store'
 
-const SubTask: React.FC<{ task: string; completed: boolean }> = function ({
-  task,
-  completed,
-}) {
+const SubTask: React.FC<{
+  idx: number
+  subtasks: { task: string; completed: boolean }[]
+  setSubtaskM: React.Dispatch<
+    React.SetStateAction<
+      {
+        task: string
+        completed: boolean
+      }[]
+    >
+  >
+}> = function ({ idx, subtasks, setSubtaskM }) {
   const id = useId()
-  const [isChecked, setIsChecked] = useState(completed)
   const theme = useStore(state => state.theme())
   const tickVariants = {
     // pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.2 }),
@@ -26,20 +33,23 @@ const SubTask: React.FC<{ task: string; completed: boolean }> = function ({
   return (
     <label className="subtask" htmlFor={id}>
       <input
-        checked={isChecked}
+        checked={subtasks[idx].completed}
         onChange={e => {
-          setIsChecked(e.target.checked)
+          const newCompleted = subtasks.map((el, i) =>
+            i === idx ? { task: el.task, completed: e.target.checked } : el
+          )
+          setSubtaskM(newCompleted)
         }}
         type="checkbox"
         id={id}
       />
       <motion.div
         variants={boxVariants}
         initial={false}
-        animate={isChecked ? 'checked' : 'unchecked'}
+        animate={subtasks[idx].completed ? 'checked' : 'unchecked'}
         className="custom-checkbox"
       >
-        {isChecked && (
+        {subtasks[idx].completed && (
           <motion.svg
             transition={{ when: 'beforeChildren' }}
             xmlns="http://www.w3.org/2000/svg"
@@ -56,7 +66,7 @@ const SubTask: React.FC<{ task: string; completed: boolean }> = function ({
           </motion.svg>
         )}
       </motion.div>
-      {task}
+      {subtasks[idx].task}
     </label>
   )
 }
@@ -65,16 +75,18 @@ const ViewTask: React.FC<{
   description?: string
   subtasks: { task: string; completed: boolean }[]
 }> = function ({ name, description, subtasks }) {
-  const completed = subtasks.filter(el => el.completed).length
-
   const currentBoard = useStore(state => state.currentBoard())
   const setModalType = useStore(state => state.setModalType)
   const modalType = useStore(state => state.modalType)
+  const toggleTaskCompleted = useStore(state => state.toggleTaskCompleted)
   const theme = useStore(state => state.theme())
 
+  const [subtasksM, setSubtaskM] = useState(subtasks)
   const [isStatusOpen, setIsStatusOpen] = useState(false)
   const [isDropDownOpen, setIsDropDownOpen] = useState(false)
 
+  const completed = subtasksM.filter(el => el.completed).length
+
   const statusVariants = {
     initial: { scale: 0 },
     animate: {
@@ -93,6 +105,18 @@ const ViewTask: React.FC<{
     exit: { y: '-20px', opacity: 0 },
   }
 
+  useEffect(
+    () => {
+      toggleTaskCompleted(
+        currentBoard.id,
+        modalType.modalInfo!.statusId!,
+        modalType.modalInfo!.id,
+        subtasksM
+      )
+    },
+    subtasksM.map(el => el.completed)
+  )
+
   return (
     <>
       <motion.div
@@ -143,10 +167,16 @@ const ViewTask: React.FC<{
         </div>
         <p className="view-task__description">{description}</p>
         <p className="view-task__subtasks">
-          Subtasks ({completed} of {subtasks.length})
+          Subtasks ({completed} of {subtasksM.length})
         </p>
-        {subtasks.map(el => (
-          <SubTask key={nanoid()} {...el} />
+        {subtasks.map((el, idx) => (
+          <SubTask
+            idx={idx}
+            subtasks={subtasksM}
+            setSubtaskM={setSubtaskM}
+            key={nanoid()}
+            {...el}
+          />
         ))}
         <p className="view-task__current">current status</p>
         <div className="view-task__status">

src/components/store/store.tsx

@@ -57,6 +57,12 @@ type State = {
     columns: { columnName: string; columnId: number }[]
   ) => void
   toggleTheme: () => void
+  toggleTaskCompleted: (
+    boardId: number,
+    statusId: number,
+    taskId: number,
+    subtasks: { task: string; completed: boolean }[]
+  ) => void
   setCurrentBoard: (id: number) => void
   setModalType: (newType: Modal) => void
 }
@@ -412,10 +418,27 @@ const useStore = create<State & Action>((set, get) => ({
   currentBoard: () => get().boards[0],
   toggleTheme: function () {
     set(() => {
-      if (get().theme() === 'light') return { theme: () => 'dark' }
+      if (get().theme() === 'light') {
+        document.body.style.backgroundColor = '#20212c'
+        return { theme: () => 'dark' }
+      }
+      document.body.style.backgroundColor = '#f4f7fd'
       return { theme: () => 'light' }
     })
   },
+  toggleTaskCompleted: function (boardId, statusId, taskId, subtasks) {
+    const otherBoards = get().boards.filter(board => board.id !== boardId)!
+    const currentBoard = {
+      ...get().boards.find(board => board.id === boardId)!,
+    }
+
+    const task = currentBoard!
+      .status!.find(stat => stat.id === statusId)!
+      .tasks.find(task => task.id === taskId)!
+    task!.subtasks = subtasks
+
+    set(() => ({ boards: [...otherBoards, currentBoard] }))
+  },
   setCurrentBoard: function (id) {
     const setter = () => {
       const board = get().boards.find(board => board.id === id)!

src/sass/index.scss

@@ -10,9 +10,11 @@ body {
 
   @media (prefers-color-scheme: light) {
     content: 'light';
+    background-color: $gray-100;
   }
   @media (prefers-color-scheme: dark) {
     content: 'dark';
+    background-color: $dark-300;
   }
   @media (max-width: 700px) {
     display: block;

src/sass/shared/viewtask.scss

@@ -136,26 +136,10 @@
       &:has(input:checked) {
         color: rgba($white, 0.5);
       }
+      &:hover {
+        background-color: $dark-400;
+      }
     }
-    // .status__header,
-    // .status-dropdown p {
-    //   color: $white;
-    // }
-    // .status-menu {
-    //   background-color: $dark-300;
-    // }
-    // label {
-    //   color: $white;
-
-    //   input,
-    //   textarea {
-    //     background-color: $dark-200;
-    //     color: $white;
-    //     &::placeholder {
-    //       color: rgba($white, 0.25);
-    //     }
-    //   }
-    // }
   }
 }
 .status-menu {