From 56f26c552ef055dfc956a6ecf949a17d704c196d Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:20:34 -0300
Subject: [PATCH 01/13] Move form save on ctr+s to useForm hook

Since this is a common behaviour to all forms it is being moved to the
general hook to make it DRYer
---
 .../src/app/tasks/hooks/useEditTaskForm.ts    | 19 ++----------------
 frontend/src/hooks/useForm/useForm.ts         | 20 +++++++++++++++++--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/tasks/hooks/useEditTaskForm.ts b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
index da6f9ef6a..159773281 100644
--- a/frontend/src/app/tasks/hooks/useEditTaskForm.ts
+++ b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback } from 'react'
 
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useForm } from '@/hooks/useForm/useForm'
@@ -12,10 +12,9 @@ type UseEditTaskFormProps = {
 }
 
 export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps) => {
-  const { formState, handleChange, resetForm } = useForm<TaskIntent>({
+  const { formState, handleChange, resetForm, formRef } = useForm<TaskIntent>({
     initialValues: task
   })
-  const formRef = useRef<HTMLFormElement>(null)
 
   const { showError } = useAlert()
   const { editTask } = useEditTask({ handleSuccess: closeForm })
@@ -44,19 +43,5 @@ export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps
     editTask(formState)
   }, [editTask, formState, showError, tasks])
 
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.key === 's' && event.ctrlKey && formRef.current?.contains(document.activeElement)) {
-        event.preventDefault()
-        formRef.current?.requestSubmit()
-      }
-    }
-    document.addEventListener('keydown', handleKeyPress)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress)
-    }
-  }, [handleSubmit])
-
   return { formState, handleChange, handleSubmit, resetForm, formRef }
 }
diff --git a/frontend/src/hooks/useForm/useForm.ts b/frontend/src/hooks/useForm/useForm.ts
index a6aa63bf3..eb5e56222 100644
--- a/frontend/src/hooks/useForm/useForm.ts
+++ b/frontend/src/hooks/useForm/useForm.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState, useRef, useEffect } from 'react'
 
 type UseFormProps<T> = {
   initialValues: T
@@ -13,5 +13,21 @@ export const useForm = <T>({ initialValues }: UseFormProps<T>) => {
 
   const resetForm = useCallback(() => setFormState(initialValues), [initialValues])
 
-  return { handleChange, formState, resetForm, setFormState }
+  const formRef = useRef<HTMLFormElement>(null)
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === 's' && event.ctrlKey && formRef.current?.contains(document.activeElement)) {
+        event.preventDefault()
+        formRef.current?.requestSubmit()
+      }
+    }
+    document.addEventListener('keydown', handleKeyPress)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress)
+    }
+  }, [])
+
+  return { handleChange, formState, resetForm, setFormState, formRef }
 }

From 6c6284aa92279499ed9a6509b7ee56ef26b73460 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:22:10 -0300
Subject: [PATCH 02/13] Move createTaskForm hook to a context

Since we need the form logic in different places of the page, a provider
will be use to avoid prop drilling and sending the required parts of the
form logic to where it is needed
---
 .../src/app/tasks/hooks/useCreateTaskForm.ts  | 137 +-----------------
 .../providers/CreateTaskFormProvider.tsx      | 115 +++++++++++++++
 2 files changed, 119 insertions(+), 133 deletions(-)
 create mode 100644 frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx

diff --git a/frontend/src/app/tasks/hooks/useCreateTaskForm.ts b/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
index cad9f9889..c70c18ceb 100644
--- a/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
+++ b/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
@@ -1,135 +1,6 @@
-import { format } from 'date-fns'
-import { useEffect, useRef, useCallback, useState } from 'react'
+import { useContext } from 'react'
+import { CreateTaskFormContext } from '../providers/CreateTaskFormProvider'
 
-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 { Template } from '@/domain/Template'
-
-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 } = useCreateTask()
-  const { showError } = useAlert()
-  const { tasks } = useGetTasks()
-  const [template, setTemplate] = useState<Template | null>(null)
-
-  const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
-  const { formState, handleChange, resetForm, setFormState } = useForm<TaskIntent>({
-    initialValues: {
-      userId,
-      projectId: null,
-      taskType: '',
-      story: '',
-      description: '',
-      startTime: '',
-      endTime: '',
-      date: format(new Date(), 'yyyy-MM-dd')
-    }
-  })
-
-  const handleSubmit = useCallback(() => {
-    const validation = TaskIntent.safeParse(formState)
-
-    if (!validation.success) {
-      validation.error.issues.map(({ message }) => {
-        showError(message)
-      })
-
-      return
-    }
-
-    const { message } = getOverlappingTasks(formState, tasks)
-
-    if (message.length > 0) {
-      showError(message)
-      return
-    }
-
-    addTask(formState)
-  }, [addTask, formState, showError, tasks])
-
-  const selectTemplate = (template: Template | null) => {
-    setTemplate(template)
-    if (template) {
-      setFormState((prevState) => ({
-        ...prevState,
-        taskType: template.taskType,
-        description: template.description || '',
-        startTime: template.startTime || '',
-        endTime: template.endTime || '',
-        projectId: template.projectId,
-        story: template.story || ''
-      }))
-    }
-  }
-
-  const onStartTimer = () => {
-    handleChange('startTime', format(new Date(), 'HH:mm'))
-    handleChange('endTime', '')
-
-    startTimer()
-  }
-
-  const selectStartTime = (option: string) => {
-    handleChange('startTime', option)
-  }
-
-  const onStopTimer = () => {
-    handleChange('endTime', format(new Date(), 'HH:mm'))
-    stopTimer()
-  }
-
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.key === 's' && event.ctrlKey && formRef.current?.contains(document.activeElement)) {
-        event.preventDefault()
-        formRef.current?.requestSubmit()
-      }
-    }
-    document.addEventListener('keydown', handleKeyPress)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress)
-    }
-  }, [handleSubmit])
-
-  const toggleTimer = () => (isTimerRunning ? onStopTimer() : onStartTimer())
-
-  const makeLoggedTime = () => {
-    if (isTimerRunning) {
-      return `${hours}h ${minutes}m ${seconds}s`
-    }
-
-    const startMinutes = convertTimeToMinutes(formState.startTime)
-    const endMinutes = convertTimeToMinutes(formState.endTime)
-
-    if (endMinutes - startMinutes <= 0 || Number.isNaN(endMinutes) || Number.isNaN(startMinutes)) {
-      return '0h 0m 0s'
-    }
-
-    return `${getTimeDifference(startMinutes, endMinutes)} 0s`
-  }
-
-  return {
-    task: formState,
-    handleChange,
-    resetForm,
-    toggleTimer,
-    loggedTime: makeLoggedTime(),
-    isTimerRunning,
-    selectStartTime,
-    handleSubmit,
-    formRef,
-    selectTemplate,
-    template
-  }
+export const useCreateTaskForm = () => {
+  return useContext(CreateTaskFormContext)
 }
diff --git a/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
new file mode 100644
index 000000000..866346739
--- /dev/null
+++ b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
@@ -0,0 +1,115 @@
+import { format } from 'date-fns'
+import { useCallback, useState, createContext, PropsWithChildren, RefObject, useMemo } from 'react'
+
+import { useForm } from '@/hooks/useForm/useForm'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+
+import { useGetTasks } from '../hooks/useGetTasks'
+import { useCreateTask } from '../hooks/useCreateTask'
+
+import { useAlert } from '@/ui/Alert/useAlert'
+import { Template } from '@/domain/Template'
+
+import { TaskIntent, Task, getOverlappingTasks } from '@/domain/Task'
+
+type CreateTaskFormContext = {
+  task: TaskIntent
+  handleChange: ReturnType<typeof useForm<TaskIntent>>['handleChange']
+  resetForm: ReturnType<typeof useForm<TaskIntent>>['resetForm']
+  handleSubmit: () => void
+  formRef: RefObject<HTMLFormElement>
+  selectTemplate: (template: Template | null) => void
+  template: Template | null
+  cloneTask: (task: Task) => void
+}
+
+export const CreateTaskFormContext = createContext({} as CreateTaskFormContext)
+
+export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
+  const { id: userId } = useGetCurrentUser()
+  const { addTask } = useCreateTask()
+  const { showError } = useAlert()
+  const { tasks } = useGetTasks()
+  const [template, setTemplate] = useState<Template | null>(null)
+
+  const { formState, handleChange, resetForm, setFormState, formRef } = useForm<TaskIntent>({
+    initialValues: {
+      userId,
+      projectId: null,
+      taskType: '',
+      story: '',
+      description: '',
+      startTime: '',
+      endTime: '',
+      date: format(new Date(), 'yyyy-MM-dd')
+    }
+  })
+
+  const handleSubmit = useCallback(() => {
+    const validation = TaskIntent.safeParse(formState)
+
+    if (!validation.success) {
+      validation.error.issues.map(({ message }) => {
+        showError(message)
+      })
+
+      return
+    }
+
+    const { message } = getOverlappingTasks(formState, tasks)
+
+    if (message.length > 0) {
+      showError(message)
+      return
+    }
+
+    addTask(formState)
+  }, [addTask, formState, showError, tasks])
+
+  const selectTemplate = useCallback(
+    (template: Template | null) => {
+      setTemplate(template)
+      if (template) {
+        setFormState((prevState) => ({
+          ...prevState,
+          taskType: template.taskType,
+          description: template.description || '',
+          startTime: template.startTime || '',
+          endTime: template.endTime || '',
+          projectId: template.projectId,
+          story: template.story || ''
+        }))
+      }
+    },
+    [setFormState]
+  )
+
+  const cloneTask = useCallback(
+    ({ taskType, projectId, story, description }: Task) => {
+      setFormState((prevState) => ({
+        ...prevState,
+        taskType,
+        projectId,
+        story,
+        description
+      }))
+    },
+    [setFormState]
+  )
+
+  const value = useMemo(
+    () => ({
+      task: formState,
+      handleChange,
+      resetForm,
+      handleSubmit,
+      formRef,
+      selectTemplate,
+      template,
+      cloneTask
+    }),
+    [cloneTask, formRef, formState, handleChange, handleSubmit, resetForm, selectTemplate, template]
+  )
+
+  return <CreateTaskFormContext.Provider value={value}>{children}</CreateTaskFormContext.Provider>
+}

From c044d7ea024170bd4d73df4bdc3badab34cd832d Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:23:36 -0300
Subject: [PATCH 03/13] Move taskForm timer logic to it's own hook

Since that piece of code is only used by the CreateTask component it is
being isolated to only be called where it is needed.
---
 .../src/app/tasks/hooks/useTaskFormTimer.ts   | 53 +++++++++++++++++++
 frontend/src/hooks/useTimer/useTimer.ts       |  8 +--
 2 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/tasks/hooks/useTaskFormTimer.ts

diff --git a/frontend/src/app/tasks/hooks/useTaskFormTimer.ts b/frontend/src/app/tasks/hooks/useTaskFormTimer.ts
new file mode 100644
index 000000000..b75b5c362
--- /dev/null
+++ b/frontend/src/app/tasks/hooks/useTaskFormTimer.ts
@@ -0,0 +1,53 @@
+import { format } from 'date-fns'
+import { useCallback } from 'react'
+import { TaskIntent } from '@/domain/Task'
+import { useForm } from '@/hooks/useForm/useForm'
+import { useTimer } from '@/hooks/useTimer/useTimer'
+import { convertTimeToMinutes, getTimeDifference } from '../utils/time'
+
+type UseTaskFormTimerProps = {
+  handleChange: ReturnType<typeof useForm<TaskIntent>>['handleChange']
+  startTime: TaskIntent['startTime']
+  endTime: TaskIntent['endTime']
+}
+
+export const useTaskFormTimer = ({ handleChange, startTime, endTime }: UseTaskFormTimerProps) => {
+  const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
+
+  const toggleTimer = useCallback(() => {
+    const onStartTimer = () => {
+      handleChange('startTime', format(new Date(), 'HH:mm'))
+      handleChange('endTime', '')
+
+      startTimer()
+    }
+
+    const onStopTimer = () => {
+      handleChange('endTime', format(new Date(), 'HH:mm'))
+      stopTimer()
+    }
+
+    return isTimerRunning ? onStopTimer() : onStartTimer()
+  }, [handleChange, isTimerRunning, startTimer, stopTimer])
+
+  const loggedTime = useCallback(() => {
+    if (isTimerRunning) {
+      return `${hours}h ${minutes}m ${seconds}s`
+    }
+
+    const startMinutes = convertTimeToMinutes(startTime)
+    const endMinutes = convertTimeToMinutes(endTime)
+
+    if (endMinutes - startMinutes <= 0 || Number.isNaN(endMinutes) || Number.isNaN(startMinutes)) {
+      return '0h 0m 0s'
+    }
+
+    return `${getTimeDifference(startMinutes, endMinutes)} 0s`
+  }, [endTime, hours, isTimerRunning, minutes, seconds, startTime])
+
+  return {
+    loggedTime: loggedTime(),
+    toggleTimer,
+    isTimerRunning
+  }
+}
diff --git a/frontend/src/hooks/useTimer/useTimer.ts b/frontend/src/hooks/useTimer/useTimer.ts
index 1c6bc9813..0e631f228 100644
--- a/frontend/src/hooks/useTimer/useTimer.ts
+++ b/frontend/src/hooks/useTimer/useTimer.ts
@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 
 export const useTimer = () => {
   const [time, setTime] = useState(0)
   const [isTimerRunning, setIsTimerRunning] = useState(false)
 
-  const startTimer = () => setIsTimerRunning(true)
-  const stopTimer = () => {
+  const startTimer = useCallback(() => setIsTimerRunning(true), [])
+  const stopTimer = useCallback(() => {
     setIsTimerRunning(false)
     setTime(0)
-  }
+  }, [])
 
   useEffect(() => {
     let intervalId: NodeJS.Timeout | undefined

From 610e659b8b8464c82d3c924aec658b2fe087a6cf Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:25:15 -0300
Subject: [PATCH 04/13] Add form changes to the React components

---
 frontend/src/app/tasks/DayView.tsx            |  9 ++++---
 .../src/app/tasks/components/CreateTask.tsx   | 27 +++++++++----------
 frontend/src/app/tasks/components/TaskBox.tsx | 20 +++++++++-----
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/tasks/DayView.tsx b/frontend/src/app/tasks/DayView.tsx
index 8672c19b7..f7bdf6b45 100644
--- a/frontend/src/app/tasks/DayView.tsx
+++ b/frontend/src/app/tasks/DayView.tsx
@@ -10,6 +10,7 @@ import { Template } from '@/domain/Template'
 
 import { TaskList } from './components/TaskList'
 import { CreateTask } from './components/CreateTask'
+import { CreateTaskFormProvider } from './providers/CreateTaskFormProvider'
 
 type DayViewProps = {
   projects: Array<Project>
@@ -37,11 +38,13 @@ export const DayView = ({ projects, taskTypes, templates }: DayViewProps) => {
         rowGap: '16px'
       }}
     >
-      <CreateTask projects={projects} taskTypes={taskTypes} templates={templates} />
+      <CreateTaskFormProvider>
+        <CreateTask projects={projects} taskTypes={taskTypes} templates={templates} />
 
-      <Divider sx={{ gridArea: 'divider' }} />
+        <Divider sx={{ gridArea: 'divider' }} />
 
-      <TaskList sx={{ gridArea: 'task-list' }} projects={projects} taskTypes={taskTypes} />
+        <TaskList sx={{ gridArea: 'task-list' }} projects={projects} taskTypes={taskTypes} />
+      </CreateTaskFormProvider>
     </Box>
   )
 }
diff --git a/frontend/src/app/tasks/components/CreateTask.tsx b/frontend/src/app/tasks/components/CreateTask.tsx
index 924fbefa8..2399e8884 100644
--- a/frontend/src/app/tasks/components/CreateTask.tsx
+++ b/frontend/src/app/tasks/components/CreateTask.tsx
@@ -7,7 +7,8 @@ import { TextArea } from '@/ui/TextArea/TextArea'
 import { Play16Filled, RecordStop24Regular } from '@fluentui/react-icons'
 
 import { TimePicker } from '../components/TimePicker'
-import { useTaskForm } from '../hooks/useCreateTaskForm'
+import { useCreateTaskForm } from '../hooks/useCreateTaskForm'
+import { useTaskFormTimer } from '../hooks/useTaskFormTimer'
 
 import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
@@ -20,19 +21,13 @@ type CreateTaskProps = {
 }
 
 export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps) => {
-  const {
-    task,
+  const { task, handleChange, resetForm, handleSubmit, formRef, selectTemplate, template } =
+    useCreateTaskForm()
+  const { loggedTime, toggleTimer, isTimerRunning } = useTaskFormTimer({
     handleChange,
-    resetForm,
-    toggleTimer,
-    loggedTime,
-    isTimerRunning,
-    selectStartTime,
-    handleSubmit,
-    formRef,
-    selectTemplate,
-    template
-  } = useTaskForm()
+    startTime: task.startTime,
+    endTime: task.endTime
+  })
 
   return (
     <>
@@ -51,7 +46,7 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
       />
       <Button
         sx={{
-          width: { xs: '100%', sm: '120px' },
+          width: { xs: '100%', sm: '125px' },
           display: 'flex',
           gap: '8px',
           gridArea: 'start-timer'
@@ -95,7 +90,9 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
             name="startTime"
             label="From"
             value={task.startTime}
-            onChange={selectStartTime}
+            onChange={(option: string) => {
+              handleChange('startTime', option)
+            }}
             sx={{ width: { xs: '120px', sm: '166px' } }}
             disabled={isTimerRunning}
             required
diff --git a/frontend/src/app/tasks/components/TaskBox.tsx b/frontend/src/app/tasks/components/TaskBox.tsx
index 3b8f22979..852e61a66 100644
--- a/frontend/src/app/tasks/components/TaskBox.tsx
+++ b/frontend/src/app/tasks/components/TaskBox.tsx
@@ -9,7 +9,8 @@ import {
   Edit24Filled,
   ArrowMaximize24Filled,
   ArrowMinimize24Filled,
-  SaveCopy24Filled
+  SaveCopy24Filled,
+  Copy24Filled
 } from '@fluentui/react-icons'
 
 import { Project } from '@/domain/Project'
@@ -24,6 +25,7 @@ import { getTimeDifference, convertTimeToMinutes } from '../utils/time'
 import { EditTask } from './EditTask'
 import { useDeleteTask } from '../hooks/useDeleteTask'
 import { SaveTemplateModal } from './SaveTemplateModal'
+import { useCreateTaskForm } from '../hooks/useCreateTaskForm'
 
 type TaskProps = {
   task: Task
@@ -34,6 +36,7 @@ type TaskProps = {
 
 export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
   const { deleteTask } = useDeleteTask()
+  const { cloneTask } = useCreateTaskForm()
 
   const [deleteModalOpen, setDeleteModalOpen] = useState(false)
   const [templateModalOpen, setTemplateModalOpen] = useState(false)
@@ -86,7 +89,7 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
           </>
         )}
       </Box>
-      <Box display="flex" gap="8px">
+      <Box display="flex" gap="8px" flexDirection={editMode ? 'column' : 'row'}>
         <IconButton
           onClick={() => {
             setEditMode(true)
@@ -100,7 +103,14 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
           <Delete24Filled color="#2f3338" />
           <ScreenReaderOnly>Delete task {task.id}</ScreenReaderOnly>
         </IconButton>
-
+        <IconButton onClick={() => setTemplateModalOpen(true)}>
+          <SaveCopy24Filled color="#2f3338" />
+          <ScreenReaderOnly>Save task as template</ScreenReaderOnly>
+        </IconButton>
+        <IconButton onClick={() => cloneTask(task)}>
+          <Copy24Filled color="#2f3338" />
+          <ScreenReaderOnly>Clone Task</ScreenReaderOnly>
+        </IconButton>
         <IconButton onClick={() => setExpandedTask((prevState) => !prevState)}>
           {expandedTask ? (
             <ArrowMinimize24Filled color="#2f3338" />
@@ -109,10 +119,6 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
           )}
           <ScreenReaderOnly>Expand Task</ScreenReaderOnly>
         </IconButton>
-        <IconButton onClick={() => setTemplateModalOpen(true)}>
-          <SaveCopy24Filled color="#2f3338" />
-          <ScreenReaderOnly>Save task as template</ScreenReaderOnly>
-        </IconButton>
         <SaveTemplateModal
           task={task}
           open={templateModalOpen}

From f538b6502b8201d4531ee396c11fb781e8a911bc Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:47:54 -0300
Subject: [PATCH 05/13] Move editTask api call to the factory pattern

---
 frontend/src/infra/task/editTask.ts | 54 ++++++++++++++++-------------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/frontend/src/infra/task/editTask.ts b/frontend/src/infra/task/editTask.ts
index 217ecd950..00e3642a0 100644
--- a/frontend/src/infra/task/editTask.ts
+++ b/frontend/src/infra/task/editTask.ts
@@ -1,28 +1,34 @@
-import { Task, TaskIntent } from '@/domain/Task'
+import { Task, TaskIntent, validateTask } from '@/domain/Task'
 import { ApiClient } from '../lib/apiClient'
 
-export const editTask = async (task: TaskIntent, apiClient: ApiClient): Promise<Task> => {
-  return apiClient(`/v1/timelog/tasks/${task.id}`, {
-    method: 'PUT',
-    body: JSON.stringify({
-      user_id: task.userId,
-      project_id: task.projectId,
-      story: task.story,
-      description: task.description,
-      task_type: task.taskType,
-      start_time: task.startTime,
-      end_time: task.endTime,
-      date: task.date
-    })
-  })
-    .then((response) => {
+import { BaseError } from '@/_lib/errors/BaseError'
+
+const editTaskError = (message = 'Failed to edit task') => {
+  const name = 'EditTaskError'
+
+  return new BaseError({ message, name, code: name })
+}
+
+export const makeEditTask =
+  (apiClient: ApiClient) => async (task: TaskIntent, tasks: Array<Task>) => {
+    const validation = validateTask(task, tasks)
+
+    if (!validation.success) {
+      throw editTaskError(validation.message)
+    }
+
+    try {
+      const response = await apiClient(`/v1/timelog/tasks/${task.id}`, {
+        method: 'PUT',
+        body: JSON.stringify(task)
+      })
+
       if (!response.ok) {
-        throw Error(response.statusText)
+        throw editTaskError()
       }
-      return response
-    })
-    .then((response) => response.json() as Promise<Task>)
-    .catch((e) => {
-      throw new Error(e)
-    })
-}
+
+      return (await response.json()) as Task
+    } catch (e) {
+      throw editTaskError()
+    }
+  }

From d0f7cef00ee2772fd6c5fa308be24041275b5748 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:50:40 -0300
Subject: [PATCH 06/13] Create method to validate Task

it unifies the check for overlapping tasks and test the schema
---
 frontend/src/domain/Task.ts | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/domain/Task.ts b/frontend/src/domain/Task.ts
index 66dad4bff..32bf1181f 100644
--- a/frontend/src/domain/Task.ts
+++ b/frontend/src/domain/Task.ts
@@ -49,13 +49,19 @@ export const TaskIntent = z
   })
 export type TaskIntent = z.infer<typeof TaskIntent>
 
+type AnyTask = Task | TaskIntent
+
 export const getOverlappingTasks = (
-  { startTime, endTime, date }: { startTime: string; endTime: string; date: string },
+  { startTime, endTime, date, id }: AnyTask,
   tasks: Array<Task>
 ) => {
   let message = ''
 
   const overlappingTasks = tasks.filter((task) => {
+    if (id === task.id) {
+      return false
+    }
+
     const haveEqualDate = task.date === date
     const overlapsTasksDuration =
       getMinutes(endTime) > getMinutes(task.startTime) &&
@@ -75,3 +81,21 @@ export const getOverlappingTasks = (
 
   return { overlappingTasks, message }
 }
+
+export const validateTask = (task: AnyTask, tasks: Array<Task>) => {
+  const validation = TaskIntent.safeParse(task)
+
+  if (!validation.success) {
+    const error = validation.error.issues.reduce((acc, issue) => `${acc} ${issue.message}`, '')
+
+    return { success: false, message: error }
+  }
+
+  const { overlappingTasks, message } = getOverlappingTasks(task, tasks)
+
+  if (overlappingTasks.length > 0) {
+    return { success: false, message }
+  }
+
+  return { success: true, message: 'Valid task' }
+}

From 13b63fc48c9e0fa061cfa58233551438a7dcbbd8 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 12:54:01 -0300
Subject: [PATCH 07/13] Simplify useEditTaskForm

It moves the validation from the handleSubmit to the editTask api call
and removes the tasks prop drilling to get it directly on the
useEditTask react query hook
---
 .../src/app/tasks/components/EditTask.tsx     |  4 +--
 frontend/src/app/tasks/components/TaskBox.tsx |  4 +--
 .../src/app/tasks/components/TaskList.tsx     |  8 +----
 frontend/src/app/tasks/hooks/useEditTask.ts   | 21 +++++++++---
 .../src/app/tasks/hooks/useEditTaskForm.ts    | 34 +++----------------
 5 files changed, 23 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/tasks/components/EditTask.tsx b/frontend/src/app/tasks/components/EditTask.tsx
index 49917266b..9c015980e 100644
--- a/frontend/src/app/tasks/components/EditTask.tsx
+++ b/frontend/src/app/tasks/components/EditTask.tsx
@@ -15,16 +15,14 @@ import { useEditTaskForm } from '../hooks/useEditTaskForm'
 
 type EditTaskProps = {
   task: Task
-  tasks: Array<Task>
   projects: Array<Project>
   taskTypes: Array<TaskType>
   closeForm: () => void
 }
 
-export const EditTask = ({ task, tasks, projects, taskTypes, closeForm }: EditTaskProps) => {
+export const EditTask = ({ task, projects, taskTypes, closeForm }: EditTaskProps) => {
   const { handleChange, formState, handleSubmit, resetForm, formRef } = useEditTaskForm({
     task,
-    tasks,
     closeForm
   })
 
diff --git a/frontend/src/app/tasks/components/TaskBox.tsx b/frontend/src/app/tasks/components/TaskBox.tsx
index 852e61a66..b69412d78 100644
--- a/frontend/src/app/tasks/components/TaskBox.tsx
+++ b/frontend/src/app/tasks/components/TaskBox.tsx
@@ -29,12 +29,11 @@ import { useCreateTaskForm } from '../hooks/useCreateTaskForm'
 
 type TaskProps = {
   task: Task
-  tasks: Array<Task>
   projects: Array<Project>
   taskTypes: Array<TaskType>
 }
 
-export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
+export const TaskBox = ({ task, projects, taskTypes }: TaskProps) => {
   const { deleteTask } = useDeleteTask()
   const { cloneTask } = useCreateTaskForm()
 
@@ -66,7 +65,6 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
         {editMode ? (
           <EditTask
             closeForm={() => setEditMode(false)}
-            tasks={tasks}
             task={task}
             projects={projects}
             taskTypes={taskTypes}
diff --git a/frontend/src/app/tasks/components/TaskList.tsx b/frontend/src/app/tasks/components/TaskList.tsx
index d170481c9..f6da3ed52 100644
--- a/frontend/src/app/tasks/components/TaskList.tsx
+++ b/frontend/src/app/tasks/components/TaskList.tsx
@@ -30,13 +30,7 @@ export const TaskList = ({ projects, taskTypes, sx }: TaskListProps) => {
       }}
     >
       {tasks.map((task) => (
-        <TaskBox
-          projects={projects}
-          taskTypes={taskTypes}
-          key={task.id}
-          task={task}
-          tasks={tasks}
-        />
+        <TaskBox projects={projects} taskTypes={taskTypes} key={task.id} task={task} />
       ))}
     </Box>
   )
diff --git a/frontend/src/app/tasks/hooks/useEditTask.ts b/frontend/src/app/tasks/hooks/useEditTask.ts
index efceb4b24..33926ec47 100644
--- a/frontend/src/app/tasks/hooks/useEditTask.ts
+++ b/frontend/src/app/tasks/hooks/useEditTask.ts
@@ -3,15 +3,21 @@ import { TaskIntent, 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'
+import { makeEditTask } from '@/infra/task/editTask'
+import { useGetTasks } from './useGetTasks'
+import { BaseError } from '@/_lib/errors/BaseError'
 
-export const useEditTask = ({ handleSuccess }: { handleSuccess: () => void }) => {
+type UseEditTaskProps = { handleSuccess: () => void }
+
+export const useEditTask = ({ handleSuccess }: UseEditTaskProps) => {
   const apiClient = useClientFetch()
+  const editTask = makeEditTask(apiClient)
+  const { tasks } = useGetTasks()
   const { showError, showSuccess } = useAlert()
   const { id: userId } = useGetCurrentUser()
   const queryClient = useQueryClient()
 
-  const { mutate } = useMutation((task: TaskIntent) => editTask(task, apiClient), {
+  const { mutate } = useMutation((task: TaskIntent) => editTask(task, tasks), {
     onSuccess: (data) => {
       queryClient.setQueryData<Array<Task>>(['tasks', userId], (prevData) =>
         prevData!.map((task) => {
@@ -25,8 +31,13 @@ export const useEditTask = ({ handleSuccess }: { handleSuccess: () => void }) =>
       showSuccess('Task succesfully edited')
       handleSuccess()
     },
-    onError: () => {
-      showError('Failed to edit task')
+    onError: (e) => {
+      if (e instanceof BaseError) {
+        showError(e.message)
+        return
+      }
+
+      throw e
     }
   })
 
diff --git a/frontend/src/app/tasks/hooks/useEditTaskForm.ts b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
index 159773281..79eeab2c8 100644
--- a/frontend/src/app/tasks/hooks/useEditTaskForm.ts
+++ b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
@@ -1,47 +1,21 @@
-import { useCallback } from 'react'
-
-import { useAlert } from '@/ui/Alert/useAlert'
 import { useForm } from '@/hooks/useForm/useForm'
-import { Task, TaskIntent, getOverlappingTasks } from '@/domain/Task'
+import { Task, TaskIntent } from '@/domain/Task'
 import { useEditTask } from './useEditTask'
 
 type UseEditTaskFormProps = {
   task: Task
-  tasks: Array<Task>
   closeForm: () => void
 }
 
-export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps) => {
+export const useEditTaskForm = ({ task, closeForm }: UseEditTaskFormProps) => {
   const { formState, handleChange, resetForm, formRef } = useForm<TaskIntent>({
     initialValues: task
   })
-
-  const { showError } = useAlert()
   const { editTask } = useEditTask({ handleSuccess: closeForm })
 
-  const handleSubmit = useCallback(() => {
-    const validation = TaskIntent.safeParse(formState)
-
-    if (!validation.success) {
-      validation.error.issues.map(({ message }) => {
-        showError(message)
-      })
-
-      return
-    }
-
-    const { message } = getOverlappingTasks(
-      formState,
-      tasks.filter(({ id }) => id !== formState.id)
-    )
-
-    if (message.length > 0) {
-      showError(message)
-      return
-    }
-
+  const handleSubmit = () => {
     editTask(formState)
-  }, [editTask, formState, showError, tasks])
+  }
 
   return { formState, handleChange, handleSubmit, resetForm, formRef }
 }

From d97859bb2cfd447796d52fcdb8b1f54eca8f078c Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 5 Jan 2024 13:06:22 -0300
Subject: [PATCH 08/13] Adjust creatTemplate return type

It should return Promise<Template> instead of  Promise<{data: Template}>
---
 frontend/src/infra/template/createTemplate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/infra/template/createTemplate.ts b/frontend/src/infra/template/createTemplate.ts
index 9d48ec1d7..e6398e3d7 100644
--- a/frontend/src/infra/template/createTemplate.ts
+++ b/frontend/src/infra/template/createTemplate.ts
@@ -27,7 +27,7 @@ export const makeCreateTemplate = (apiClient: ApiClient) => async (template: Tem
       throw createTemplateError()
     }
 
-    return { data: (await response.json()) as Template }
+    return (await response.json()) as Template
   } catch (e) {
     throw createTemplateError()
   }

From 31701032206beedfd05700b41d51e0b32eb72187 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Mon, 8 Jan 2024 10:44:09 -0300
Subject: [PATCH 09/13] Add conditional check to captureStackTrace

Error.captureStackTrace is a V8 api that is not common to all browsers,
this check is to ensure that it will not cause error in browsers that do
not support that api
---
 frontend/src/_lib/errors/BaseError.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/_lib/errors/BaseError.ts b/frontend/src/_lib/errors/BaseError.ts
index 09534462f..90b1328e6 100644
--- a/frontend/src/_lib/errors/BaseError.ts
+++ b/frontend/src/_lib/errors/BaseError.ts
@@ -18,6 +18,8 @@ export class BaseError<M> extends Error implements Exception<M> {
     this.meta = props.meta
     this.message = props.message
 
-    Error.captureStackTrace(this, BaseError)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, BaseError)
+    }
   }
 }

From cd492bdf8652d68bf15fb82dd292a272458eba05 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Mon, 8 Jan 2024 11:03:22 -0300
Subject: [PATCH 10/13] Simplify useCreateTask

This changes simplifies the useCreateTask hook and moves the validation
closer to the api call, centralizing the error handling for the endpoint
and reducing the logic on handleSubmit.
---
 frontend/src/app/tasks/hooks/useCreateTask.ts | 17 ++++--
 .../providers/CreateTaskFormProvider.tsx      | 25 +--------
 frontend/src/infra/task/createTask.ts         | 55 ++++++++++---------
 3 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/frontend/src/app/tasks/hooks/useCreateTask.ts b/frontend/src/app/tasks/hooks/useCreateTask.ts
index f8d30562f..4ec264837 100644
--- a/frontend/src/app/tasks/hooks/useCreateTask.ts
+++ b/frontend/src/app/tasks/hooks/useCreateTask.ts
@@ -1,23 +1,32 @@
 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 { makeCreateTask } from '@/infra/task/createTask'
 import { useClientFetch } from '@/infra/lib/useClientFetch'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+import { useGetTasks } from './useGetTasks'
+import { BaseError } from '@/_lib/errors/BaseError'
 
 export const useCreateTask = () => {
   const apiClient = useClientFetch()
+  const createTask = makeCreateTask(apiClient)
   const queryClient = useQueryClient()
   const { showError, showSuccess } = useAlert()
   const { id: userId } = useGetCurrentUser()
+  const { tasks } = useGetTasks()
 
-  const { mutate } = useMutation((task: TaskIntent) => createTask(task, apiClient), {
+  const { mutate } = useMutation((task: TaskIntent) => createTask(task, tasks), {
     onSuccess: () => {
       queryClient.invalidateQueries(['tasks', userId])
       showSuccess('Task added succesfully')
     },
-    onError: () => {
-      showError('Failed to add task')
+    onError: (e) => {
+      if (e instanceof BaseError) {
+        showError(e.message)
+        return
+      }
+
+      throw e
     }
   })
 
diff --git a/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
index 866346739..b464d486d 100644
--- a/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
+++ b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
@@ -4,13 +4,11 @@ import { useCallback, useState, createContext, PropsWithChildren, RefObject, use
 import { useForm } from '@/hooks/useForm/useForm'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
 
-import { useGetTasks } from '../hooks/useGetTasks'
 import { useCreateTask } from '../hooks/useCreateTask'
 
-import { useAlert } from '@/ui/Alert/useAlert'
 import { Template } from '@/domain/Template'
 
-import { TaskIntent, Task, getOverlappingTasks } from '@/domain/Task'
+import { TaskIntent, Task } from '@/domain/Task'
 
 type CreateTaskFormContext = {
   task: TaskIntent
@@ -28,8 +26,6 @@ export const CreateTaskFormContext = createContext({} as CreateTaskFormContext)
 export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
   const { id: userId } = useGetCurrentUser()
   const { addTask } = useCreateTask()
-  const { showError } = useAlert()
-  const { tasks } = useGetTasks()
   const [template, setTemplate] = useState<Template | null>(null)
 
   const { formState, handleChange, resetForm, setFormState, formRef } = useForm<TaskIntent>({
@@ -46,25 +42,8 @@ export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
   })
 
   const handleSubmit = useCallback(() => {
-    const validation = TaskIntent.safeParse(formState)
-
-    if (!validation.success) {
-      validation.error.issues.map(({ message }) => {
-        showError(message)
-      })
-
-      return
-    }
-
-    const { message } = getOverlappingTasks(formState, tasks)
-
-    if (message.length > 0) {
-      showError(message)
-      return
-    }
-
     addTask(formState)
-  }, [addTask, formState, showError, tasks])
+  }, [addTask, formState])
 
   const selectTemplate = useCallback(
     (template: Template | null) => {
diff --git a/frontend/src/infra/task/createTask.ts b/frontend/src/infra/task/createTask.ts
index d6aadc717..bbbccdb5f 100644
--- a/frontend/src/infra/task/createTask.ts
+++ b/frontend/src/infra/task/createTask.ts
@@ -1,29 +1,34 @@
-import { Task } from '@/domain/Task'
-import { TaskIntent } from '@/domain/Task'
+import { Task, TaskIntent, validateTask } from '@/domain/Task'
 import { ApiClient } from '../lib/apiClient'
 
-export const createTask = async (task: TaskIntent, apiClient: ApiClient): Promise<Task> => {
-  return apiClient('/v1/timelog/tasks', {
-    method: 'POST',
-    body: JSON.stringify({
-      user_id: task.userId,
-      project_id: task.projectId,
-      story: task.story,
-      description: task.description,
-      task_type: task.taskType,
-      start_time: task.startTime,
-      end_time: task.endTime,
-      date: task.date
-    })
-  })
-    .then((response) => {
+import { BaseError } from '@/_lib/errors/BaseError'
+
+const createTaskError = (message = 'Failed to create task') => {
+  const name = 'CreateTaskError'
+
+  return new BaseError({ message, name, code: name })
+}
+
+export const makeCreateTask =
+  (apiClient: ApiClient) => async (task: TaskIntent, tasks: Array<Task>) => {
+    const validation = validateTask(task, tasks)
+
+    if (!validation.success) {
+      throw createTaskError(validation.message)
+    }
+
+    try {
+      const response = await apiClient('/v1/timelog/tasks', {
+        method: 'POST',
+        body: JSON.stringify(task)
+      })
+
       if (!response.ok) {
-        throw Error(response.statusText)
+        throw createTaskError()
       }
-      return response
-    })
-    .then((response) => response.json() as Promise<Task>)
-    .catch((e) => {
-      throw new Error(e)
-    })
-}
+
+      return (await response.json()) as Task
+    } catch (e) {
+      throw createTaskError()
+    }
+  }

From b6d8f750807f09a06eb6b683104bf9ac4950cc9e Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Mon, 8 Jan 2024 15:00:59 -0300
Subject: [PATCH 11/13] Add CreateTaskProvider to CreateTask.test

---
 .../src/app/tasks/__tests__/components/CreateTask.test.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
index 2f2aec1d3..1bbe2de8d 100644
--- a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
+++ b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
@@ -3,6 +3,7 @@ import { screen, renderWithUser, act } from '@/test-utils/test-utils'
 import { useCreateTask } from '../../hooks/useCreateTask'
 import { useGetTasks } from '../../hooks/useGetTasks'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
+import { CreateTaskFormProvider } from '../../providers/CreateTaskFormProvider'
 
 jest.mock('../../hooks/useCreateTask')
 jest.mock('../../hooks/useGetTasks')
@@ -48,7 +49,9 @@ const setupTaskForm = () => {
   ]
 
   return renderWithUser(
-    <CreateTask projects={projects} templates={templates} taskTypes={taskTypes} />,
+    <CreateTaskFormProvider>
+      <CreateTask projects={projects} templates={templates} taskTypes={taskTypes} />
+    </CreateTaskFormProvider>,
     {
       advanceTimers: jest.advanceTimersByTime
     }

From a238bee4abf9e1f34f3714cb52dc3749c131da15 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Mon, 8 Jan 2024 17:51:21 -0300
Subject: [PATCH 12/13] Create TaskBox tests

TaskBox tests were included in the TaskList, since the component is
growing in complexity it should have it's own tests.
---
 .../__tests__/components/TaskBox.test.tsx     | 100 ++++++++++++++++++
 .../__tests__/components/TaskList.test.tsx    |  55 +---------
 2 files changed, 102 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/app/tasks/__tests__/components/TaskBox.test.tsx

diff --git a/frontend/src/app/tasks/__tests__/components/TaskBox.test.tsx b/frontend/src/app/tasks/__tests__/components/TaskBox.test.tsx
new file mode 100644
index 000000000..195c00251
--- /dev/null
+++ b/frontend/src/app/tasks/__tests__/components/TaskBox.test.tsx
@@ -0,0 +1,100 @@
+import { renderWithUser, screen } from '@/test-utils/test-utils'
+import { TaskBox } from '../../components/TaskBox'
+import { useDeleteTask } from '../../hooks/useDeleteTask'
+import { useCreateTaskForm } from '../../hooks/useCreateTaskForm'
+
+jest.mock('../../hooks/useDeleteTask')
+jest.mock('../../hooks/useCreateTaskForm')
+
+const setupTaskBox = () => {
+  const task = {
+    date: '2023-11-01',
+    story: 'task story',
+    description: 'task description',
+    taskType: 'task type one',
+    projectId: 1,
+    userId: 4,
+    startTime: '11:12',
+    endTime: '11:14',
+    id: 18,
+    projectName: 'Holidays',
+    customerName: 'Internal'
+  }
+
+  return renderWithUser(<TaskBox projects={[]} taskTypes={[]} task={task} />)
+}
+
+describe('TaskBox', () => {
+  beforeEach(() => {
+    ;(useDeleteTask as jest.Mock).mockReturnValue({ removeTask: () => {} })
+    ;(useCreateTaskForm as jest.Mock).mockReturnValue({ cloneTask: () => {} })
+  })
+
+  it('Shows the task info', () => {
+    setupTaskBox()
+
+    expect(screen.getByText('Holidays - Internal')).toBeInTheDocument()
+    expect(screen.getByText('task type one')).toBeInTheDocument()
+    expect(screen.getByText('11:12-11:14 (0h 2m)')).toBeInTheDocument()
+  })
+
+  describe('Clicking expand Button', () => {
+    it('shows the complete task information', async () => {
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Expand Task' }))
+
+      expect(screen.getByText('task description')).toBeInTheDocument()
+      expect(screen.getByText('task story')).toBeInTheDocument()
+    })
+  })
+
+  describe('Clicking delete button', () => {
+    it('Opens the delete confirmation modal', async () => {
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      expect(screen.getByRole('heading', { name: 'Confirm Deletion' })).toBeInTheDocument()
+    })
+
+    it('deletes the task from the list', async () => {
+      const deleteTask = jest.fn()
+      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
+
+      expect(deleteTask).toBeCalledWith(18)
+    })
+
+    it('closes the modal without submit if cancel is clicked', async () => {
+      const deleteTask = jest.fn()
+      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      expect(deleteTask).not.toBeCalled()
+    })
+  })
+
+  describe('Clicking clone task button', () => {
+    it('calls the clone task function', async () => {
+      const cloneTask = jest.fn()
+      ;(useCreateTaskForm as jest.Mock).mockReturnValue({ cloneTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Clone Task' }))
+
+      expect(cloneTask).toBeCalled()
+    })
+  })
+})
diff --git a/frontend/src/app/tasks/__tests__/components/TaskList.test.tsx b/frontend/src/app/tasks/__tests__/components/TaskList.test.tsx
index 0c4364cf7..470ef7dac 100644
--- a/frontend/src/app/tasks/__tests__/components/TaskList.test.tsx
+++ b/frontend/src/app/tasks/__tests__/components/TaskList.test.tsx
@@ -1,5 +1,5 @@
 import { TaskList } from '../../components/TaskList'
-import { screen, renderWithUser, within } from '@/test-utils/test-utils'
+import { screen, renderWithUser } from '@/test-utils/test-utils'
 import { useGetTasks } from '../../hooks/useGetTasks'
 import { useDeleteTask } from '../../hooks/useDeleteTask'
 import { Task } from '@/domain/Task'
@@ -47,62 +47,11 @@ describe('TaskList', () => {
     ;(useDeleteTask as jest.Mock).mockReturnValue({ removeTask: () => {} })
   })
 
-  it('renders a list of tasks with name, customer name, task type and the task duration', () => {
+  it('renders a list of tasks', () => {
     setupTaskList()
 
     const listItems = screen.getAllByRole('listitem')
 
     expect(listItems.length).toBe(2)
-
-    listItems.forEach((item, index) => {
-      const { getByText } = within(item)
-      const task = tasks[index]
-
-      const timeDifference = index === 0 ? '0h 2m' : '2h 2m'
-
-      expect(getByText(`${task.projectName} - ${task.customerName}`)).toBeInTheDocument()
-      expect(getByText(`${task.taskType}`)).toBeInTheDocument()
-      expect(
-        getByText(`${task.startTime}-${task.endTime} (${timeDifference})`, {
-          exact: false
-        })
-      ).toBeInTheDocument()
-    })
-  })
-
-  describe('When the trash icon is clicked', () => {
-    it('opens the delete confirmation modal', async () => {
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      expect(screen.getByRole('heading', { name: 'Confirm Deletion' })).toBeInTheDocument()
-    })
-
-    it('deletes the task from the list', async () => {
-      const deleteTask = jest.fn()
-      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
-
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      await user.click(screen.getByRole('button', { name: 'Delete' }))
-
-      expect(deleteTask).toBeCalledWith(18)
-    })
-
-    it('closes the modal without submit if cancel is clicked', async () => {
-      const deleteTask = jest.fn()
-      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
-
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      await user.click(screen.getByRole('button', { name: 'Cancel' }))
-
-      expect(deleteTask).not.toBeCalled()
-    })
   })
 })

From c07a74ab5496f7669530996172bafc61817b84de Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Tue, 9 Jan 2024 19:06:49 -0300
Subject: [PATCH 13/13] Clear form on task creation

---
 .../__tests__/components/CreateTask.test.tsx  |  6 ++--
 .../src/app/tasks/components/CreateTask.tsx   | 16 +++++++---
 frontend/src/app/tasks/hooks/useCreateTask.ts | 30 +++++++++++--------
 .../providers/CreateTaskFormProvider.tsx      | 22 ++++++++++----
 4 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
index 1bbe2de8d..2b53f089d 100644
--- a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
+++ b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
@@ -279,7 +279,7 @@ describe('TaskForm', () => {
 
     await user.click(screen.getByRole('button', { name: 'Save' }))
 
-    expect(addTask).toHaveBeenCalledWith({
+    expect(addTask.mock.lastCall[0].task).toEqual({
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
@@ -315,7 +315,7 @@ describe('TaskForm', () => {
 
     await user.keyboard('{Control>}s')
 
-    expect(addTask).toHaveBeenCalledWith({
+    expect(addTask.mock.lastCall[0].task).toEqual({
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
@@ -351,7 +351,7 @@ describe('TaskForm', () => {
 
     await user.keyboard('{Enter}')
 
-    expect(addTask).toHaveBeenCalledWith({
+    expect(addTask.mock.lastCall[0].task).toEqual({
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
diff --git a/frontend/src/app/tasks/components/CreateTask.tsx b/frontend/src/app/tasks/components/CreateTask.tsx
index 2399e8884..59f255e7d 100644
--- a/frontend/src/app/tasks/components/CreateTask.tsx
+++ b/frontend/src/app/tasks/components/CreateTask.tsx
@@ -21,8 +21,16 @@ type CreateTaskProps = {
 }
 
 export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps) => {
-  const { task, handleChange, resetForm, handleSubmit, formRef, selectTemplate, template } =
-    useCreateTaskForm()
+  const {
+    task,
+    handleChange,
+    resetForm,
+    handleSubmit,
+    formRef,
+    selectTemplate,
+    template,
+    isLoading
+  } = useCreateTaskForm()
   const { loggedTime, toggleTimer, isTimerRunning } = useTaskFormTimer({
     handleChange,
     startTime: task.startTime,
@@ -160,8 +168,8 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
             <Button variant="outlined" onClick={resetForm} sx={{ width: '82px' }}>
               Clear
             </Button>
-            <Button sx={{ width: '82px' }} type="submit">
-              Save
+            <Button disabled={isLoading} sx={{ width: '82px' }} type="submit">
+              {isLoading ? 'Saving...' : 'Save'}
             </Button>
           </Stack>
         </Stack>
diff --git a/frontend/src/app/tasks/hooks/useCreateTask.ts b/frontend/src/app/tasks/hooks/useCreateTask.ts
index 4ec264837..6f667e457 100644
--- a/frontend/src/app/tasks/hooks/useCreateTask.ts
+++ b/frontend/src/app/tasks/hooks/useCreateTask.ts
@@ -15,20 +15,24 @@ export const useCreateTask = () => {
   const { id: userId } = useGetCurrentUser()
   const { tasks } = useGetTasks()
 
-  const { mutate } = useMutation((task: TaskIntent) => createTask(task, tasks), {
-    onSuccess: () => {
-      queryClient.invalidateQueries(['tasks', userId])
-      showSuccess('Task added succesfully')
-    },
-    onError: (e) => {
-      if (e instanceof BaseError) {
-        showError(e.message)
-        return
-      }
+  const { mutate, isLoading } = useMutation(
+    ({ task }: { task: TaskIntent; handleSuccess: () => void }) => createTask(task, tasks),
+    {
+      onSuccess: (_, { handleSuccess }) => {
+        handleSuccess()
+        queryClient.invalidateQueries(['tasks', userId])
+        showSuccess('Task added succesfully')
+      },
+      onError: (e) => {
+        if (e instanceof BaseError) {
+          showError(e.message)
+          return
+        }
 
-      throw e
+        throw e
+      }
     }
-  })
+  )
 
-  return { addTask: mutate }
+  return { addTask: mutate, isLoading }
 }
diff --git a/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
index b464d486d..98cdc9d7f 100644
--- a/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
+++ b/frontend/src/app/tasks/providers/CreateTaskFormProvider.tsx
@@ -19,13 +19,14 @@ type CreateTaskFormContext = {
   selectTemplate: (template: Template | null) => void
   template: Template | null
   cloneTask: (task: Task) => void
+  isLoading: boolean
 }
 
 export const CreateTaskFormContext = createContext({} as CreateTaskFormContext)
 
 export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
   const { id: userId } = useGetCurrentUser()
-  const { addTask } = useCreateTask()
+  const { addTask, isLoading } = useCreateTask()
   const [template, setTemplate] = useState<Template | null>(null)
 
   const { formState, handleChange, resetForm, setFormState, formRef } = useForm<TaskIntent>({
@@ -42,8 +43,8 @@ export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
   })
 
   const handleSubmit = useCallback(() => {
-    addTask(formState)
-  }, [addTask, formState])
+    addTask({ task: formState, handleSuccess: resetForm })
+  }, [addTask, formState, resetForm])
 
   const selectTemplate = useCallback(
     (template: Template | null) => {
@@ -85,9 +86,20 @@ export const CreateTaskFormProvider = ({ children }: PropsWithChildren) => {
       formRef,
       selectTemplate,
       template,
-      cloneTask
+      cloneTask,
+      isLoading
     }),
-    [cloneTask, formRef, formState, handleChange, handleSubmit, resetForm, selectTemplate, template]
+    [
+      cloneTask,
+      formRef,
+      formState,
+      handleChange,
+      handleSubmit,
+      resetForm,
+      selectTemplate,
+      template,
+      isLoading
+    ]
   )
 
   return <CreateTaskFormContext.Provider value={value}>{children}</CreateTaskFormContext.Provider>