Create EditTask component

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

@@ -0,0 +1,116 @@
+import Box from '@mui/joy/Box'
+import Stack from '@mui/joy/Stack'
+
+import { Task } from '@/domain/Task'
+import { TaskType } from '@/domain/TaskType'
+import { Project } from '@/domain/Project'
+import Button from '@mui/joy/Button'
+
+import { Select } from '@/ui/Select/Select'
+import { TextArea } from '@/ui/TextArea/TextArea'
+import { Input } from '@/ui/Input/Input'
+
+import { TimePicker } from './TimePicker'
+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) => {
+  const { handleChange, formState, handleSubmit, resetForm } = useEditTaskForm({
+    task,
+    tasks,
+    closeForm
+  })
+
+  const handleProject = (value: string) => {
+    const project = projects.find((project) => project.description === value)
+    if (project) {
+      handleChange('projectId', project.id)
+      handleChange('projectName', value)
+    }
+  }
+
+  return (
+    <Stack
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleSubmit()
+      }}
+      component="form"
+      gap="8px"
+      width="400px"
+    >
+      <Select
+        onChange={handleProject}
+        value={formState.projectName}
+        name="projectId"
+        label="Select project"
+        placeholder="Select project"
+        options={projects.map((project) => project.description)}
+        required
+      />
+      <Select
+        name="taskType"
+        label="Select task type"
+        value={formState.taskType || ''}
+        onChange={(value) => handleChange('taskType', value)}
+        options={taskTypes.map((taskType) => taskType.slug)}
+        placeholder="Select task type"
+      />
+      <Box display="flex" gap="8px">
+        <TimePicker
+          name="startTime"
+          label="From"
+          sx={{ width: '196px' }}
+          value={formState.startTime}
+          onChange={(value) => handleChange('startTime', value)}
+          required
+        />
+
+        <TimePicker
+          name="endTime"
+          label="To"
+          sx={{ width: '196px' }}
+          value={formState.endTime}
+          onChange={(value) => handleChange('endTime', value)}
+          required
+        />
+      </Box>
+      <TextArea
+        name="description"
+        onChange={(e) => handleChange('description', e.target.value)}
+        label="Task description"
+        placeholder="Task description..."
+        value={formState.description}
+      />
+      <Input
+        value={formState.story}
+        onChange={(e) => handleChange('story', e.target.value)}
+        name="story"
+        placeholder="Story"
+        label="Story"
+      />
+      <Box display="flex" justifyContent="flex-end" gap="8px">
+        <Button
+          sx={{ padding: '4px 8px', backgroundColor: 'white' }}
+          onClick={() => {
+            resetForm()
+            closeForm()
+          }}
+          variant="outlined"
+        >
+          Close Form
+        </Button>
+        <Button sx={{ width: '82px' }} type="submit">
+          Save
+        </Button>
+      </Box>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,46 @@
+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'
+
+type UseEditTaskFormProps = {
+  task: Task
+  tasks: Array<Task>
+  closeForm: () => void
+}
+
+export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps) => {
+  const { formState, handleChange, resetForm } = useForm<Task>({
+    initialValues: task
+  })
+  const { showError } = useAlert()
+  const { editTask } = useEditTask({ handleSuccess: closeForm })
+
+  const handleSubmit = useCallback(() => {
+    const validation = Task.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
+    }
+
+    editTask(formState)
+  }, [editTask, formState, showError, tasks])
+
+  return { formState, handleChange, handleSubmit, resetForm }
+}