removed static board data, added zustand persist store

Keith-Web3 · Apr 30, 2023 · 078b250 · 078b250
1 parent d0c8f72
commit 078b250
Show file tree

Hide file tree

Showing 7 changed files with 454 additions and 409 deletions.
diff --git a/src/components/shared/Body.tsx b/src/components/shared/Body.tsx
@@ -23,24 +23,25 @@ const Body: React.FC<{
 
   return (
     <motion.main layout className="body">
-      {!currentBoard.status.every(el => !el.tasks.length) && (
-        <motion.div layout className="body__boards">
-          {currentBoard.status
-            .filter(el => el.tasks.length)
-            .map(el => (
-              <Board key={nanoid()} {...el} />
-            ))}
-          <motion.div
-            layout
-            onClick={() =>
-              setModalType({ modalType: 'new-column', showModal: true })
-            }
-            className="body__add-board"
-          >
-            <motion.p layout>+ new column</motion.p>
+      {currentBoard?.status &&
+        !currentBoard.status.every(el => el.tasks.length === 0) && (
+          <motion.div layout className="body__boards">
+            {currentBoard.status
+              .filter(el => el.tasks.length)
+              .map(el => (
+                <Board key={nanoid()} {...el} />
+              ))}
+            <motion.div
+              layout
+              onClick={() =>
+                setModalType({ modalType: 'new-column', showModal: true })
+              }
+              className="body__add-board"
+            >
+              <motion.p layout>+ new column</motion.p>
+            </motion.div>
           </motion.div>
-        </motion.div>
-      )}
+        )}
       <div className="empty">
         <p className="empty__message">
           This board is empty. Create a new column to get started.
@@ -50,6 +51,7 @@ const Body: React.FC<{
           onClick={() =>
             setModalType({ modalType: 'new-column', showModal: true })
           }
+          disabled={!currentBoard}
         >
           <img src={plus} alt="add" />
           Add New Column

diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -51,7 +51,6 @@ const Header: React.FC<{
       className="header"
     >
       <motion.div
-        // layout
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         className="header__sidebar-hidden"
@@ -60,7 +59,7 @@ const Header: React.FC<{
         <p>kanban</p>
       </motion.div>
       <img className="header__logo" src={logo} alt="logo" />
-      <p className="header__title">{currentBoard.name}</p>
+      <p className="header__title">{currentBoard?.name}</p>
       <motion.img
         onClick={() => setIsNavOpened(prev => !prev)}
         variants={variants}
@@ -73,7 +72,7 @@ const Header: React.FC<{
       <Button
         onClick={() => setModalType({ modalType: 'add-task', showModal: true })}
         className="header__add-task btn--on"
-        disabled={currentBoard.status.length === 0}
+        disabled={!Boolean(currentBoard?.status.length)}
       >
         <img src={add} alt="add board" />
         <p>add new task</p>

diff --git a/src/components/shared/ModifyBoards.tsx b/src/components/shared/ModifyBoards.tsx
@@ -14,7 +14,6 @@ const ModifyBoards: React.FC<{
 }> = function ({ title, button, editBoard = false, newColumn = false }) {
   const id = useId()
 
-  const modalType = useStore(state => state.modalType)
   const currentBoard = useStore(state => state.currentBoard)
   const theme = useStore(state => state.theme())
   const [createBoard, editBoardHandler] = useStore(state => [
@@ -70,7 +69,7 @@ const ModifyBoards: React.FC<{
               animate={{ scaleY: 1, opacity: 1 }}
               exit={{ x: '-100%', opacity: 0 }}
               layout
-              key={el[1]}
+              key={idx}
               htmlFor={`subtask${id}${idx}`}
               className="columns__input"
             >

diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -61,19 +61,21 @@ const NavBar: React.FC<{
         </motion.div>
         <p className="navbar__title">All boards({boards.length})</p>
         <div className="navbar__boards">
-          {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>
-            </motion.div>
-          ))}
+          {boards.length
+            ? 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 title={board.name}>{board.name}</p>
+                </motion.div>
+              ))
+            : []}
           <div className="navbar__add-board navbar__board">
             <img src={boardIconP} alt="board" />
             <img src={plusP} alt="add board" />