Break useTask into 4 different files

THis was done to place each hook on its own file, a file called useTask
should only exist if there's a hook called useTask to go with it,
otherwise it makes more sense to have everything broken apart.

frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx

@@ -1,9 +1,12 @@
 import { CreateTask } from '../../components/CreateTask'
 import { screen, renderWithUser, act } from '@/test-utils/test-utils'
-import { useAddTask, useGetTasks } from '../../hooks/useTask'
+import { useCreateTask } from '../../hooks/useCreateTask'
+import { useGetTasks } from '../../hooks/useGetTasks'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
 
-jest.mock('../../hooks/useTask')
+jest.mock('../../hooks/useCreateTask')
+jest.mock('../../hooks/useGetTasks')
+
 jest.mock('@/hooks/useGetCurrentUser/useGetCurrentUser')
 
 const setupTaskForm = () => {
@@ -54,8 +57,8 @@ const setupTaskForm = () => {
 
 describe('TaskForm', () => {
   beforeEach(() => {
-    ;(useAddTask as jest.Mock).mockReturnValue({ addTask: () => {} })
-    ;(useGetTasks as jest.Mock).mockReturnValue([])
+    ;(useCreateTask as jest.Mock).mockReturnValue({ addTask: () => {} })
+    ;(useGetTasks as jest.Mock).mockReturnValue({ tasks: [] })
     ;(useGetCurrentUser as jest.Mock).mockReturnValue({ id: 0 })
 
     jest.useFakeTimers()
@@ -70,7 +73,7 @@ describe('TaskForm', () => {
   describe('required fields', () => {
     it("doesn't submit if it doesn't have a selected project", async () => {
       const addTask = jest.fn()
-      ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+      ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
       const { user } = setupTaskForm()
 
@@ -87,7 +90,7 @@ describe('TaskForm', () => {
 
     it("doesn't submit if it doesn't have a startTime", async () => {
       const addTask = jest.fn()
-      ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+      ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
       const { user } = setupTaskForm()
 
@@ -104,7 +107,7 @@ describe('TaskForm', () => {
 
     it("doesn't submit if it doesn't have a endTime", async () => {
       const addTask = jest.fn()
-      ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+      ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
       const { user } = setupTaskForm()
 
@@ -251,7 +254,7 @@ describe('TaskForm', () => {
 
   it('submits the form when clicking Save', async () => {
     const addTask = jest.fn()
-    ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+    ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
     const { user } = setupTaskForm()
 
@@ -287,7 +290,7 @@ describe('TaskForm', () => {
 
   it('submits the form when pressing ctrl+S', async () => {
     const addTask = jest.fn()
-    ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+    ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
     const { user } = setupTaskForm()
 
@@ -323,7 +326,7 @@ describe('TaskForm', () => {
 
   it('submits the form when pressing Enter', async () => {
     const addTask = jest.fn()
-    ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
+    ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
 
     const { user } = setupTaskForm()
 
@@ -359,22 +362,24 @@ describe('TaskForm', () => {
 
   it("doesn't submit if it has overlapping tasks", async () => {
     const addTask = jest.fn()
-    ;(useAddTask as jest.Mock).mockReturnValue({ addTask })
-    ;(useGetTasks as jest.Mock).mockReturnValue([
-      {
-        date: '2023-01-01',
-        story: '',
-        description: 'test',
-        taskType: null,
-        projectId: 1,
-        userId: 4,
-        startTime: '12:12',
-        endTime: '13:14',
-        id: 18,
-        projectName: 'Holidays',
-        customerName: 'Internal'
-      }
-    ])
+    ;(useCreateTask as jest.Mock).mockReturnValue({ addTask })
+    ;(useGetTasks as jest.Mock).mockReturnValue({
+      tasks: [
+        {
+          date: '2023-01-01',
+          story: '',
+          description: 'test',
+          taskType: null,
+          projectId: 1,
+          userId: 4,
+          startTime: '12:12',
+          endTime: '13:14',
+          id: 18,
+          projectName: 'Holidays',
+          customerName: 'Internal'
+        }
+      ]
+    })
 
     const { user } = setupTaskForm()
 

frontend/src/app/tasks/__tests__/components/EditTask.test.tsx

@@ -1,8 +1,8 @@
 import { EditTask } from '../../components/EditTask'
 import { screen, renderWithUser } from '@/test-utils/test-utils'
-import { useEditTask } from '../../hooks/useTask'
+import { useEditTask } from '../../hooks/useEditTask'
 
-jest.mock('../../hooks/useTask')
+jest.mock('../../hooks/useEditTask')
 
 const setupEditTaskForm = ({ closeForm = () => {} }: { closeForm?: () => void }) => {
   const tasks = [

frontend/src/app/tasks/__tests__/components/TaskList.test.tsx

@@ -1,9 +1,11 @@
 import { TaskList } from '../../components/TaskList'
 import { screen, renderWithUser, within } from '@/test-utils/test-utils'
-import { useGetTasks, useDeleteTask } from '../../hooks/useTask'
+import { useGetTasks } from '../../hooks/useGetTasks'
+import { useDeleteTask } from '../../hooks/useDeleteTask'
 import { Task } from '@/domain/Task'
 
-jest.mock('../../hooks/useTask')
+jest.mock('../../hooks/useGetTasks')
+jest.mock('../../hooks/useDeleteTask')
 
 const setupTaskList = () => {
   return renderWithUser(<TaskList projects={[]} taskTypes={[]} />)
@@ -41,7 +43,7 @@ describe('TaskList', () => {
         customerName: 'Igalia'
       }
     ]
-    ;(useGetTasks as jest.Mock).mockReturnValue(tasks)
+    ;(useGetTasks as jest.Mock).mockReturnValue({ tasks })
     ;(useDeleteTask as jest.Mock).mockReturnValue({ removeTask: () => {} })
   })
 

frontend/src/app/tasks/components/TaskBox.tsx

@@ -16,7 +16,7 @@ import { Task } from '@/domain/Task'
 import { getTimeDifference, convertTimeToMinutes } from '../utils/time'
 
 import { EditTask } from './EditTask'
-import { useDeleteTask } from '../hooks/useTask'
+import { useDeleteTask } from '../hooks/useDeleteTask'
 
 type TaskProps = {
   task: Task

frontend/src/app/tasks/components/TaskList.tsx

@@ -5,7 +5,7 @@ import Box from '@mui/joy/Box'
 import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
 
-import { useGetTasks } from '../hooks/useTask'
+import { useGetTasks } from '../hooks/useGetTasks'
 import { TaskBox } from './TaskBox'
 import { SxProps } from '@mui/joy/styles/types'
 
@@ -16,7 +16,7 @@ type TaskListProps = {
 }
 
 export const TaskList = ({ projects, taskTypes, sx }: TaskListProps) => {
-  const tasks = useGetTasks()
+  const { tasks } = useGetTasks()
 
   return (
     <Box

frontend/src/app/tasks/hooks/useCreateTask.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { TaskIntent } from '@/domain/Task'
+import { useAlert } from '@/ui/Alert/useAlert'
+import { createTask } from '@/infra/task/createTask'
+import { useClientFetch } from '@/infra/lib/useClientFetch'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+
+export const useCreateTask = () => {
+  const apiClient = useClientFetch()
+  const queryClient = useQueryClient()
+  const { showError, showSuccess } = useAlert()
+  const { id: userId } = useGetCurrentUser()
+
+  const { mutate } = useMutation((task: TaskIntent) => createTask(task, apiClient), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['tasks', userId])
+      showSuccess('Task added succesfully')
+    },
+    onError: () => {
+      showError('Failed to add task')
+    }
+  })
+
+  return { addTask: mutate }
+}

frontend/src/app/tasks/hooks/useCreateTaskForm.ts

@@ -1,19 +1,23 @@
-import { useForm } from '@/hooks/useForm/useForm'
-import { useTimer } from '@/hooks/useTimer/useTimer'
 import { format } from 'date-fns'
 import { useEffect, useRef, useCallback } from 'react'
-import { useAddTask, useGetTasks } from './useTask'
-import { TaskIntent, getOverlappingTasks } from '@/domain/Task'
-import { useAlert } from '@/ui/Alert/useAlert'
+
+import { useForm } from '@/hooks/useForm/useForm'
+import { useTimer } from '@/hooks/useTimer/useTimer'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+
+import { useGetTasks } from './useGetTasks'
+import { useCreateTask } from './useCreateTask'
+
+import { useAlert } from '@/ui/Alert/useAlert'
+import { TaskIntent, getOverlappingTasks } from '@/domain/Task'
 import { convertTimeToMinutes, getTimeDifference } from '../utils/time'
 
 export const useTaskForm = () => {
   const formRef = useRef<HTMLFormElement>(null)
   const { id: userId } = useGetCurrentUser()
-  const { addTask } = useAddTask()
+  const { addTask } = useCreateTask()
   const { showError } = useAlert()
-  const tasks = useGetTasks()
+  const { tasks } = useGetTasks()
 
   const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
   const { formState, handleChange, resetForm } = useForm<TaskIntent>({

frontend/src/app/tasks/hooks/useDeleteTask.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Task } from '@/domain/Task'
+import { useAlert } from '@/ui/Alert/useAlert'
+import { deleteTask } from '@/infra/task/deleteTask'
+import { useClientFetch } from '@/infra/lib/useClientFetch'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+
+export const useDeleteTask = () => {
+  const apiClient = useClientFetch()
+  const queryClient = useQueryClient()
+  const { id: userId } = useGetCurrentUser()
+  const { showError, showSuccess } = useAlert()
+
+  const { mutate } = useMutation((taskId: number) => deleteTask(taskId, apiClient), {
+    onSuccess: (_, taskId) => {
+      queryClient.setQueryData<Array<Task>>(['tasks', userId], (prevData) =>
+        prevData!.filter((prevData) => prevData.id !== taskId)
+      )
+      showSuccess('Task succesfully removed')
+    },
+    onError: () => {
+      showError('Failed to remove task')
+    }
+  })
+
+  return { deleteTask: mutate }
+}

frontend/src/app/tasks/hooks/useEditTask.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Task } from '@/domain/Task'
+import { useAlert } from '@/ui/Alert/useAlert'
+import { useClientFetch } from '@/infra/lib/useClientFetch'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+import { editTask } from '@/infra/task/editTask'
+
+export const useEditTask = ({ handleSuccess }: { handleSuccess: () => void }) => {
+  const apiClient = useClientFetch()
+  const { showError, showSuccess } = useAlert()
+  const { id: userId } = useGetCurrentUser()
+  const queryClient = useQueryClient()
+
+  const { mutate } = useMutation((task: Task) => editTask(task, apiClient), {
+    onSuccess: (data) => {
+      queryClient.setQueryData<Array<Task>>(['tasks', userId], (prevData) =>
+        prevData!.map((task) => {
+          if (task.id === data.id) {
+            return data
+          }
+
+          return task
+        })
+      )
+      showSuccess('Task succesfully edited')
+      handleSuccess()
+    },
+    onError: () => {
+      showError('Failed to edit task')
+    }
+  })
+
+  return { editTask: mutate }
+}

frontend/src/app/tasks/hooks/useEditTaskForm.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useForm } from '@/hooks/useForm/useForm'
 import { Task, getOverlappingTasks } from '@/domain/Task'
-import { useEditTask } from './useTask'
+import { useEditTask } from './useEditTask'
 import { Project } from '@/domain/Project'
 
 type UseEditTaskFormProps = {

frontend/src/app/tasks/hooks/useGetTasks.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+import { getTasks } from '@/infra/task/getTasks'
+import { useClientFetch } from '@/infra/lib/useClientFetch'
+import { format } from 'date-fns'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+
+export const useGetTasks = () => {
+  const apiClient = useClientFetch()
+  const { id: userId } = useGetCurrentUser()
+  const today = format(new Date(), 'yyyy-MM-dd')
+
+  const { data } = useQuery({
+    queryKey: ['tasks', userId],
+    queryFn: () => getTasks(apiClient, { userId, start: today, end: today }),
+    initialData: []
+  })
+
+  return { tasks: data }
+}