fixed inability to give different board columns the same name

Keith-Web3 · Apr 25, 2023 · 4a4bd3f · 4a4bd3f
1 parent 0b72aad
commit 4a4bd3f
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 37 deletions.
diff --git a/src/components/shared/Board.tsx b/src/components/shared/Board.tsx
@@ -7,26 +7,28 @@ import { motion } from 'framer-motion'
 const Board: React.FC<{
   name: string
   colorTag: string
+  id: number
   tasks: {
     name: string
     id: number
     description: string
     subtasks: { task: string; completed: boolean }[]
   }[]
-}> = function ({ name, tasks, colorTag }) {
+}> = function ({ name, tasks, id, colorTag }) {
   const setModalType = useStore(state => state.setModalType)
   return (
     <div className="board">
-      <div className="board__header">
-        <div
+      <motion.div layout className="board__header">
+        <motion.div
+          layout
           style={{
             backgroundColor: colorTag,
           }}
-        ></div>
-        <p>
+        ></motion.div>
+        <motion.p layout>
           {name} ({tasks.length})
-        </p>
-      </div>
+        </motion.p>
+      </motion.div>
       {tasks && (
         <div className="board__tasks">
           {tasks.map(task => (
@@ -38,7 +40,7 @@ const Board: React.FC<{
                 setModalType({
                   modalType: 'task-info',
                   showModal: true,
-                  modalInfo: { ...task, status: name },
+                  modalInfo: { ...task, statusId: id, status: name },
                 })
               }
             >

diff --git a/src/components/shared/Body.tsx b/src/components/shared/Body.tsx
@@ -29,7 +29,7 @@ const Body: React.FC<{
               <Board key={nanoid()} {...el} />
             ))}
           <motion.div layout className="body__add-board">
-            <p>+ new column</p>
+            <motion.p layout>+ new column</motion.p>
           </motion.div>
         </motion.div>
       )}

diff --git a/src/components/shared/ModifyTask.tsx b/src/components/shared/ModifyTask.tsx
@@ -11,21 +11,17 @@ type Task = {
   title: string
   description: string
   subtasks: [string, string, boolean][]
-  column: string
+  column: number
 }
 const modifyTaskReducer: (
   state: Task,
   action:
     | {
         payload: string
-        type:
-          | 'TITLE'
-          | 'DESCRIPTION'
-          | 'COLUMN'
-          | 'ADD-SUBTASK'
-          | 'REMOVE-SUBTASK'
+        type: 'TITLE' | 'DESCRIPTION' | 'ADD-SUBTASK' | 'REMOVE-SUBTASK'
       }
     | { payload: [string, number]; type: 'EDIT-SUBTASK' }
+    | { payload: number; type: 'COLUMN' }
 ) => Task = function (state, action) {
   switch (action.type) {
     case 'TITLE': {
@@ -83,8 +79,6 @@ 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 : '',
@@ -98,8 +92,8 @@ const ModifyTask: React.FC<{
         ],
     // column: editTask ? modalType.modalInfo!.status : currentBoard.status[0].name ? currentBoard.status[0].name : ''
     column: editTask
-      ? modalType.modalInfo!.status!
-      : currentBoard.status[0].name,
+      ? modalType.modalInfo!.statusId!
+      : currentBoard.status[0].id,
   })
 
   const statusVariants = {
@@ -197,7 +191,12 @@ const ModifyTask: React.FC<{
           className="status-dropdown"
           onClick={() => setIsStatusOpen(prev => !prev)}
         >
-          <p>{taskInfo.column}</p>
+          <p>
+            {
+              currentBoard.status.find(stat => stat.id === taskInfo.column)
+                ?.name
+            }
+          </p>
           <motion.img
             initial={{ rotate: '180deg' }}
             animate={{ rotate: isStatusOpen ? '0deg' : '180deg' }}
@@ -218,7 +217,7 @@ const ModifyTask: React.FC<{
               {currentBoard.status.map(el => (
                 <motion.p
                   onClick={() => {
-                    dispatchTaskInfo({ payload: el.name, type: 'COLUMN' })
+                    dispatchTaskInfo({ payload: el.id, type: 'COLUMN' })
                     setIsStatusOpen(false)
                   }}
                   key={nanoid()}

diff --git a/src/components/shared/ViewTask.tsx b/src/components/shared/ViewTask.tsx
@@ -122,6 +122,7 @@ const ViewTask: React.FC<{
                         name,
                         description: description || '',
                         subtasks,
+                        statusId: modalType.modalInfo?.statusId,
                         id: modalType.modalInfo!.id,
                         status: modalType.modalInfo?.status,
                       },

diff --git a/src/components/store/store.tsx b/src/components/store/store.tsx
@@ -10,6 +10,7 @@ export type Modal = {
     id: number
     subtasks: { task: string; completed: boolean }[]
     status?: string
+    statusId?: number
   }
 }
 type Board = {
@@ -39,14 +40,14 @@ type State = {
     title: string,
     description: string,
     subtasks: [string, string, boolean][] | [],
-    status: string,
+    status: number,
     boardId: number
   ) => void
   editTask: (
     title: string,
     description: string,
     subtasks: [string, string, boolean][] | [],
-    status: string,
+    status: number,
     boardId: number,
     taskId: number
   ) => void
@@ -286,8 +287,9 @@ const useStore = create<State & Action>((set, get) => ({
   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)
-    const otherStatuses = currentBoard!.status.filter(el => el.name !== status)
-    const currentStatus = currentBoard!.status.find(el => el.name === status)
+    const otherStatuses = currentBoard!.status.filter(el => el.id !== status)
+    const currentStatus = currentBoard!.status.find(el => el.id === status)
+
     const newTask = {
       name: title,
       description: description,
@@ -302,7 +304,9 @@ const useStore = create<State & Action>((set, get) => ({
           ...otherStatuses,
           {
             ...currentStatus,
-            tasks: [...currentStatus!.tasks, newTask],
+            tasks: [...currentStatus!.tasks, newTask].sort(
+              (a, b) => b.id - a.id
+            ),
           },
         ],
       },
@@ -332,13 +336,16 @@ const useStore = create<State & Action>((set, get) => ({
         status.tasks.some(task => task.id === taskId)
           ? {
               ...status,
-              tasks: status.tasks.filter(el => el.id !== taskId),
+              tasks: status.tasks
+                .filter(el => el.id !== taskId)
+                .sort((a, b) => b.id - a.id),
             }
           : status
       )
       .map(el =>
-        el.name === status ? { ...el, tasks: [...el.tasks, task] } : el
+        el.id === status ? { ...el, tasks: [...el.tasks, task] } : el
       )
+      .sort((a, b) => a.id - b.id)
 
     const setter = function () {
       return {
@@ -359,13 +366,13 @@ const useStore = create<State & Action>((set, get) => ({
     const board: Board = {
       name: boardName,
       id: Date.now(),
-      status: boardColumns.map(column => ({
+      status: boardColumns.map((column, idx) => ({
         name: column,
         colorTag: `#${(0x1000000 + Math.random() * 0xffffff)
           .toString(16)
           .substr(1, 6)}`,
         tasks: [],
-        id: Date.now(),
+        id: Date.now() + idx,
       })),
     }
     set(() => ({
@@ -380,7 +387,7 @@ const useStore = create<State & Action>((set, get) => ({
     const newBoard: Board = {
       name: boardName,
       id: currentBoard!.id,
-      status: allColumns.map(({ columnName, columnId }) => {
+      status: allColumns.map(({ columnName, columnId }, idx) => {
         const status = currentBoard?.status.find(el => el.id === columnId)
         if (status) return { ...status, name: columnName }
         return {
@@ -389,7 +396,7 @@ const useStore = create<State & Action>((set, get) => ({
             .toString(16)
             .substr(1, 6)}`,
           tasks: [],
-          id: Date.now(),
+          id: Date.now() + idx,
         }
       }),
     }

diff --git a/src/main.tsx b/src/main.tsx
@@ -5,7 +5,7 @@ import App from './App'
 import './sass/index.scss'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
+  // <React.StrictMode>
+  // </React.StrictMode>
 )
diff --git a/src/sass/shared/modify-boards.scss b/src/sass/shared/modify-boards.scss
@@ -1,7 +1,7 @@
 @use '../variables' as *;
 
 .modify-boards {
-  width: min(90%, 480px);
+  width: min(95%, 480px);
   background-color: $white;
   padding: $spacer * 2;
   border-radius: 6px;