feat: Task 생성 직후 업데이트 안되는 버그 해결(#59)

dnd-side-project · Mar 2, 2023 · 758e9ac · 758e9ac
1 parent ef642d9
commit 758e9ac
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/components/Block/AddTaskButton/index.tsx b/src/components/Block/AddTaskButton/index.tsx
@@ -1,16 +1,25 @@
 import { dayBlockAPI } from '@/api'
+import { CreateTaskInBlockParams } from '@/api/types/base.types'
 import Button from '@/components/Button'
 import { AddIcon } from '@/components/Icons'
+import useHttpRequest from '@/hooks/useHttpRequest'
 import useBlockListStore from '@/store/blocks'
 
 const AddTaskButton = ({ blockId }: { blockId: number }) => {
   const addNewTaskStore = useBlockListStore((state) => state.addNewTask)
+  const [, createTask] = useHttpRequest((params: CreateTaskInBlockParams) =>
+    dayBlockAPI.createTaskInBlock(params).then(({ data }) => data),
+  )
+
   const handleClick = () => {
-    addNewTaskStore(blockId)
-    dayBlockAPI.createTaskInBlock({
-      blockId,
-      content: '',
-    })
+    createTask(
+      { blockId, content: '' },
+      {
+        onSuccess: ({ taskId: newTaskId }) => {
+          addNewTaskStore(blockId, newTaskId)
+        },
+      },
+    )
   }
 
   return (

diff --git a/src/store/blocks.ts b/src/store/blocks.ts
@@ -17,7 +17,7 @@ const INITIAL_STATE: State['blockList'] = {
 
 type Actions = {
   setBlockList: (data: State['blockList']) => void
-  addNewTask: (blockId: number) => void
+  addNewTask: (blockId: number, newTaskId: number) => void
   updateTask: (blockId: number, taskId: number, content: string) => void
   updateTaskStatus: (blockId: number, taskId: number, isDone: boolean) => void
   deleteTask: (blockId: number, taskId: number) => void
@@ -32,17 +32,17 @@ const useBlockListStore = create(
         state.blockList = data
       }),
 
-    addNewTask: (blockId) =>
-      set(({ blockList: { blocks, totalTask } }) => {
-        const { block } = getItem(blocks, blockId)
+    addNewTask: (blockId, newTaskId) =>
+      set(({ blockList }) => {
+        const { block } = getItem(blockList.blocks, blockId)
         const newTask = {
-          taskId: block.tasks.length + 1,
+          taskId: newTaskId,
           task: '',
           isDone: false,
         }
         block.tasks.push(newTask)
         block.sumOfTask += 1
-        totalTask += 1
+        blockList.totalTask += 1
       }),
 
     updateTask: (blockId, taskId, content) =>
@@ -60,11 +60,11 @@ const useBlockListStore = create(
       }),
 
     deleteTask: (blockId, taskId) => {
-      set(({ blockList: { blocks, totalTask } }) => {
-        const { block, taskIndex } = getItem(blocks, blockId, taskId)
+      set(({ blockList }) => {
+        const { block, taskIndex } = getItem(blockList.blocks, blockId, taskId)
         block.tasks.splice(taskIndex, 1)
         block.sumOfTask -= 1
-        totalTask -= 1
+        blockList.totalTask -= 1
       })
     },
   })),