/
TaskForm.tsx
78 lines (70 loc) · 2.43 KB
/
TaskForm.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import 'server-only';
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { twMerge } from 'tailwind-merge';
import { ClassNamePropsOptional } from '@/features/shared/ui/ClassNameProps';
import { ServerError } from '@/features/shared/data-access/ServerResponse';
import { ErrorList } from '@/features/shared/ui/error/ErrorList';
import { Form } from '@/features/shared/ui/form/Form';
import { FormErrorList } from '@/features/shared/ui/form/FormErrorList';
import { ProjectsSelect } from '@/features/app/projects/ui/ProjectsSelect';
import { TaskFormFields } from './TaskFormFields';
import { createTask, updateTask, TaskDto, getTaskById } from '../data-access/TasksDataAccess';
export interface TaskFormProps extends ClassNamePropsOptional {
readonly defaultDueDate?: Date | undefined;
readonly projectId?: string;
readonly startOnEditingMode?: boolean;
readonly taskId?: string;
readonly taskNameClassName?: string;
}
export const TaskForm = async ({
className,
defaultDueDate,
projectId,
startOnEditingMode = false,
taskId,
taskNameClassName,
}: TaskFormProps) => {
let task: TaskDto | undefined | null;
let errors: Array<ServerError> | undefined;
if (taskId) ({ data: task, errors } = await getTaskById(taskId));
if (errors) return <ErrorList errors={errors} />;
if (taskId && !task) notFound();
const updateTaskProject = async (value: string) => {
'use server';
if (!taskId) return;
const formData = new FormData();
formData.append('id', taskId);
formData.append('projectId', value);
const { errors } = await updateTask(undefined, formData);
if (errors) {
// TODO: Display error (in a toast?)
}
};
return (
<Form
action={task ? updateTask : createTask}
className={twMerge('flex flex-col w-full', className)}
>
{task && <input type="hidden" name="id" value={task.id} />}
<Suspense>
<TaskFormFields
defaultDueDate={defaultDueDate}
projectsSelect={
<ProjectsSelect
ariaLabel="Projects"
defaultValue={projectId ?? task?.projectId}
name="projectId"
onValueChange={updateTaskProject}
placeholder="Select a Project"
/>
}
startOnEditingMode={startOnEditingMode}
task={task}
taskNameClassName={taskNameClassName}
/>
</Suspense>
<FormErrorList />
</Form>
);
};