Now that we have created a custom hook to write data to Firestore, we need to build a form to create a new task
.
The example below is straightforward:
- We have a form with two input fields
- When the form is submitted, we read the data using
FormData
- Finally, we add the document using the callback returned by the hook
useCreateTask
components/tasks/CreateTaskForm.tsx
import { useNavigate } from '@remix-run/react';
import { FormEventHandler, useCallback } from 'react';
import TextField from '~/core/ui/TextField';
import Button from '~/core/ui/Button';
import useCreateTask from '~/lib/tasks/hooks/use-create-task';
import { useCurrentOrganization } from '~/lib/organizations/hooks/use-current-organization';
const CreateTaskForm = () => {
const createTask = useCreateTask();
const navigate = useNavigate();
const organization = useCurrentOrganization();
const organizationId = organization?.id as string;
const onCreateTask: FormEventHandler<HTMLFormElement> = useCallback(
async (event) => {
event.preventDefault();
const target = event.currentTarget;
const data = new FormData(target);
const name = data.get('name') as string;
const dueDate = data.get('dueDate') as string;
const task = {
organizationId,
name,
dueDate,
done: false,
};
// create task
await createTask(task);
// redirect to /tasks
await navigate(`/tasks`);
},
[navigate, createTask, organizationId]
);
return (
<form onSubmit={onCreateTask}>
<div>
<TextField.Label>
Name
<TextField.Input
required
name={'name'}
placeholder={'ex. Launch on IndieHackers'}
/>
<TextField.Hint>Hint: whatever you do, ship!</TextField.Hint>
</TextField.Label>
<TextField.Label>
Due date
<TextField.Input required name={'dueDate'} type={'date'} />
</TextField.Label>
<div>
<Button>
Create Task
</Button>
</div>
</div>
</form>
);
};
export default CreateTaskForm;