Clear form on task creation

Igalia · Jan 10, 2024 · c07a74a · c07a74a
1 parent a238bee
commit c07a74a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>