diff --git a/client/.gitignore b/client/.gitignore index a547bf3..f03d78c 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -7,6 +7,7 @@ yarn-error.log* pnpm-debug.log* lerna-debug.log* +.vite node_modules dist dist-ssr diff --git a/client/src/Admin/Invites/AdminInviteForm.jsx b/client/src/Admin/Invites/AdminInviteForm.jsx index eb4df36..12f106d 100644 --- a/client/src/Admin/Invites/AdminInviteForm.jsx +++ b/client/src/Admin/Invites/AdminInviteForm.jsx @@ -1,6 +1,6 @@ -import { useState } from 'react'; import { useNavigate } from 'react-router'; import { Alert, Button, Container, Fieldset, Group, Stack, Textarea, TextInput, Title } from '@mantine/core'; +import { isEmail, isNotEmpty, useForm } from '@mantine/form'; import { useMutation } from '@tanstack/react-query'; import { Head } from '@unhead/react'; @@ -9,30 +9,26 @@ import Api from '../../Api'; function AdminInviteForm () { const navigate = useNavigate(); - const [invite, setInvite] = useState({ - firstName: '', - lastName: '', - email: '', - message: '', + const form = useForm({ + initialValues: { + firstName: '', + lastName: '', + email: '', + message: '', + }, + validate: { + firstName: isNotEmpty('First name is required.'), + email: isEmail('Please enter a valid email address.'), + }, }); const onSubmitMutation = useMutation({ - mutationFn: () => Api.invites.create(invite), + mutationFn: (values) => Api.invites.create(values), onSuccess: () => navigate('/admin/invites', { flash: 'Invite sent!' }), - onError: () => window.scrollTo(0, 0), + onError: (errors) => form.setErrors(errors), + onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }), }); - function onChange (event) { - const newInvite = { ...invite }; - newInvite[event.target.name] = event.target.value; - setInvite(newInvite); - } - - function onSubmit (event) { - event.preventDefault(); - onSubmitMutation.mutate(); - } - return ( <> @@ -40,44 +36,30 @@ function AdminInviteForm () { Invite a new User -
+
- {onSubmitMutation.error && onSubmitMutation.error.message && {onSubmitMutation.error.message}} + {form.errors._form && {form.errors._form}}