refactor: use mobx instead of Context API

Mnigos · Aug 27, 2024 · cbea6f2 · cbea6f2
1 parent 94fbf82
commit cbea6f2
Show file tree

Hide file tree

Showing 16 changed files with 520 additions and 777 deletions.
diff --git a/app/board/components/tasks/modals/add-task-modal.tsx b/app/board/components/tasks/modals/add-task-modal.tsx
@@ -6,7 +6,7 @@ import { LuPlusCircle } from 'react-icons/lu'
 
 import { TaskModal, type TaskSchema } from './task-modal'
 
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 
 export function AddTaskModal() {
  const { onOpen, onOpenChange, isOpen, onClose } = useDisclosure()

diff --git a/app/board/components/tasks/modals/update-task-modal.tsx b/app/board/components/tasks/modals/update-task-modal.tsx
@@ -3,7 +3,7 @@ import type { SetOptional } from 'type-fest'
 
 import { TaskModal, type TaskSchema } from './task-modal'
 
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 
 namespace UpdateTaskModal {
  export type Props = Readonly<

diff --git a/app/board/components/tasks/reschedule-overdue-tasks.spec.tsx b/app/board/components/tasks/reschedule-overdue-tasks.spec.tsx
@@ -3,9 +3,9 @@ import { userEvent, type UserEvent } from '@testing-library/user-event'
 
 import { RescheduleOverdueTasks } from './reschedule-overdue-tasks'
 
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 
-vi.mock('@app/board/context')
+vi.mock('@app/board/hooks')
 
 describe('RescheduleOverdueTasks', () => {
  const rescheduleOverdueTasksSpy = vi.fn().mockResolvedValue(undefined)

diff --git a/app/board/components/tasks/reschedule-overdue-tasks.tsx b/app/board/components/tasks/reschedule-overdue-tasks.tsx
@@ -10,7 +10,7 @@ import { LuCalendarClock } from 'react-icons/lu'
 import { CalendarPresets } from '../misc'
 
 import { now } from '@app/board/helpers/date'
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 
 export function RescheduleOverdueTasks() {
  const [dueDateValue, setDueDateValue] = useState<DateValue | undefined>()

diff --git a/app/board/components/tasks/task-card.tsx b/app/board/components/tasks/task-card.tsx
@@ -10,7 +10,7 @@ import { LuCalendarDays } from 'react-icons/lu'
 
 import { UpdateTaskModal } from './modals'
 
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 import { formatDateValue, isOverdue } from '@app/board/helpers/date'
 import type { BoardKeyWithoutOverdue, PickedTask } from '@app/board/types'
 
@@ -64,7 +64,7 @@ function TaskCard({
 
  if (!isDone && task && sourceKey !== 'done')
  setTimeout(async () => {
- await markTaskAsDone(task, sourceKey)
+ await markTaskAsDone(task)
  }, 500)
  }}
  />

diff --git a/app/board/components/tasks/tasks-board.tsx b/app/board/components/tasks/tasks-board.tsx
@@ -2,10 +2,11 @@
 
 import { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd'
 import { Fragment } from 'react'
+import { observer } from 'mobx-react-lite'
 
 import { TasksList } from './tasks-list'
 
-import { useTasksBoard } from '@app/board/context'
+import { useTasksBoard } from '@app/board/hooks'
 import type { BoardKey, BoardKeyWithoutOverdue } from '@app/board/types'
 
 namespace TasksBoard {
@@ -14,7 +15,7 @@ namespace TasksBoard {
  }>
 }
 
-function TasksBoard({ showDone }: TasksBoard.Props) {
+const TasksBoard = observer(({ showDone }: TasksBoard.Props) => {
  const { tasksBoard, reorderTasks, changeTaskTable } = useTasksBoard()
 
  const tasksBoardEntries = Object.entries(tasksBoard).filter(([key]) =>
@@ -42,7 +43,7 @@ function TasksBoard({ showDone }: TasksBoard.Props) {
  if (destination.droppableId === 'overdue') return
 
  if (itemToDrop) {
- await changeTaskTable(itemToDrop, source, destination)
+ await changeTaskTable(itemToDrop, destination)
  }
  }
  }
@@ -73,6 +74,6 @@ function TasksBoard({ showDone }: TasksBoard.Props) {
  </DragDropContext>
  </>
  )
-}
+})
 
 export { TasksBoard }
diff --git a/app/board/components/tasks/tasks-list.spec.tsx b/app/board/components/tasks/tasks-list.spec.tsx
@@ -6,6 +6,13 @@ import type { ReactNode } from 'react'
 
 import { TasksList } from './tasks-list'
 
+vi.mock('@app/board/hooks', () => ({
+ useTasksBoard: () => ({
+ tasksBoard: vi.fn(),
+ markTaskAsDone: vi.fn(),
+ }),
+}))
+
 const Wrapper = ({ children }: Readonly<{ children: ReactNode }>) => (
  <DragDropContext onDragEnd={vi.fn()}>
  <Droppable droppableId="today">