fixed edit-task bug and added edit board feature

src/components/shared/Board.tsx

@@ -9,7 +9,7 @@ const Board: React.FC<{
   colorTag: string
   tasks: {
     name: string
-    id: string
+    id: number
     description: string
     subtasks: { task: string; completed: boolean }[]
   }[]

src/components/shared/Body.tsx

@@ -45,7 +45,10 @@ const Body: React.FC<{
       <div className="hide-sidebar" onClick={() => setIsSideBarHidden(false)}>
         <img src={eye} alt="eye" />
       </div>
-      {ReactDOM.createPortal(<Modal />, document.getElementById('modal-root')!)}
+      {ReactDOM.createPortal(
+        modalType.showModal ? <Modal /> : <></>,
+        document.getElementById('modal-root')!
+      )}
     </motion.main>
   )
 }

src/components/shared/Modal.tsx

@@ -8,41 +8,41 @@ import useStore from '../store/store'
 import ModifyBoards from './ModifyBoards'
 
 const Modal: React.FC = function () {
-  const currentBoard = useStore(state => state.currentBoard)
   const [modalType, setModalType] = useStore(state => [
     state.modalType,
     state.setModalType,
   ])
   return (
-    <AnimatePresence>
+    <>
       {modalType.modalType === 'task-info' && (
         <ViewTask {...modalType.modalInfo!} />
       )}
       {modalType.modalType === 'add-task' && (
         <ModifyTask title="add new task" button="create task" />
       )}
-      {modalType.modalType === 'edit-task' && (
-        <ModifyTask title="edit task" button="save changes" />
+      {modalType.modalType === 'edit-task' && modalType.showModal && (
+        <ModifyTask editTask title="edit task" button="save changes" />
       )}
       {modalType.modalType === 'create-board' && (
         <ModifyBoards title="add new board" button="create new board" />
       )}
       {modalType.modalType === 'edit-board' && (
-        <ModifyBoards title="edit board" button="save changes" />
+        <ModifyBoards editBoard title="edit board" button="save changes" />
       )}
-      {modalType.showModal && (
-        <motion.div
-          key={nanoid()}
-          className="backdrop"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          onClick={() => {
-            setModalType({ showModal: false, modalType: '' })
-          }}
-        ></motion.div>
-      )}
-    </AnimatePresence>
+      <motion.div
+        key={nanoid()}
+        className="backdrop"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={() => {
+          setModalType({
+            showModal: false,
+            modalType: '',
+          })
+        }}
+      ></motion.div>
+    </>
   )
 }
 

src/components/shared/ModifyBoards.tsx

@@ -1,22 +1,34 @@
-import React, { useId, useRef, useState } from 'react'
+import React, { useId, useState } from 'react'
 import { nanoid } from 'nanoid'
 import { motion, AnimatePresence } from 'framer-motion'
 
 import cancelImg from '../../assets/icon-cross.svg'
 import '../../sass/shared/modify-boards.scss'
 import useStore from '../store/store'
 
-const ModifyBoards: React.FC<{ title: string; button: string }> = function ({
-  title,
-  button,
-}) {
+const ModifyBoards: React.FC<{
+  title: string
+  button: string
+  editBoard?: boolean
+}> = function ({ title, button, editBoard = false }) {
   const id = useId()
-  const [boardName, setBoardName] = useState('')
-  const [boardColumns, setBoardColumns] = useState([
-    ['', nanoid()],
-    ['', nanoid()],
+  const modalType = useStore(state => state.modalType)
+  const currentBoard = useStore(state => state.currentBoard)
+  const [boardName, setBoardName] = useState(
+    editBoard ? currentBoard().name : ''
+  )
+  const [boardColumns, setBoardColumns] = useState<[string, number][]>(
+    editBoard
+      ? currentBoard().status.map(el => [el.name, el.id])
+      : [
+          ['', Date.now() + 1],
+          ['', Date.now() + 1],
+        ]
+  )
+  const [createBoard, editBoardHandler] = useStore(state => [
+    state.createBoard,
+    state.editBoard,
   ])
-  const createBoard = useStore(state => state.createBoard)
   return (
     <div className="modify-boards">
       <p className="modify-boards__title">{title}</p>
@@ -72,7 +84,7 @@ const ModifyBoards: React.FC<{ title: string; button: string }> = function ({
         </AnimatePresence>
       </div>
       <button
-        onClick={() => setBoardColumns(prev => [...prev, ['', nanoid()]])}
+        onClick={() => setBoardColumns(prev => [...prev, ['', Date.now()]])}
       >
         + add new column
       </button>
@@ -82,10 +94,19 @@ const ModifyBoards: React.FC<{ title: string; button: string }> = function ({
           boardColumns.some(columns => columns[0].trim() === '')
         }
         onClick={() =>
-          createBoard(
-            boardName,
-            boardColumns.map(el => el[0])
-          )
+          editBoard
+            ? editBoardHandler(
+                boardName,
+                currentBoard().id,
+                boardColumns.map(([columnName, columnId]) => ({
+                  columnName,
+                  columnId,
+                }))
+              )
+            : createBoard(
+                boardName,
+                boardColumns.map(el => el[0])
+              )
         }
       >
         {button}

src/components/shared/ModifyTask.tsx

@@ -83,6 +83,8 @@ const ModifyTask: React.FC<{
   const createTask = useStore(state => state.createTask)
   const editTaskHandler = useStore(state => state.editTask)
 
+  console.log(editTask)
+
   const [taskInfo, dispatchTaskInfo] = useReducer(modifyTaskReducer, {
     title: editTask ? modalType.modalInfo!.name : '',
     description: editTask ? modalType.modalInfo!.description : '',

src/components/shared/NavBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { nanoid } from 'nanoid'
 import { motion } from 'framer-motion'
 
 import useStore from '../store/store'
@@ -25,11 +24,34 @@ const NavBar: React.FC<{
   ])
   const setModalType = useStore(state => state.setModalType)
 
+  const navVariant = {
+    initial: {
+      opacity: 0,
+    },
+    animate: {
+      opacity: Number(isNavOpened),
+      transition: {
+        when: 'beforeChildren',
+        staggerChildren: 0.08,
+      },
+    },
+  }
+  const boardVariants = {
+    initial: {
+      opacity: 0,
+      scaleX: 0,
+    },
+    animate: {
+      opacity: 1,
+      scaleX: 1,
+    },
+  }
   return (
     <motion.nav
       layout
-      initial={{ opacity: 0 }}
-      animate={{ opacity: Number(isNavOpened) }}
+      variants={navVariant}
+      initial="initial"
+      animate="animate"
       // transition={{ type: 'spring', stiffness: 900, damping: 30 }}
       className={`navbar ${isNavOpened ? 'active' : ''}`}
     >
@@ -40,17 +62,18 @@ const NavBar: React.FC<{
         </div>
         <p className="navbar__title">All boards({boards.length})</p>
         <div className="navbar__boards">
-          {boards.map(board => (
-            <div
-              key={nanoid()}
+          {boards.map((board, idx) => (
+            <motion.div
+              variants={boardVariants}
+              key={idx}
               className={`navbar__board ${
                 board.id === currentBoard.id ? 'active' : ''
               }`}
               onClick={() => setCurrentBoard(board.id)}
             >
               <img src={boardIcon} alt="board" />
               <p>{board.name}</p>
-            </div>
+            </motion.div>
           ))}
           <div className="navbar__add-board navbar__board">
             <img src={boardIconP} alt="board" />