full-stack-starter/client/src/Admin/Invites/AdminInviteForm.jsx at 802d31bd2351440f1b8dc76584a5697809242d92 · sfbrigade/full-stack-starter · GitHub

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
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';

import Api from '../../Api';

function AdminInviteForm () {
  const navigate = useNavigate();

  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: (values) => Api.invites.create(values),
    onSuccess: () => navigate('/admin/invites', { flash: 'Invite sent!' }),
    onError: (errors) => form.setErrors(errors),
    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  });

  return (
    <>
      <Head>
        <title>Invite a new User</title>
      </Head>
      <Container>
        <Title mb='md'>Invite a new User</Title>
        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
          <Fieldset variant='unstyled' disabled={onSubmitMutation.isPending}>
            <Stack w={{ base: '100%', xs: 320 }}>
              {form.errors._form && <Alert color='red'>{form.errors._form}</Alert>}
              <TextInput
                {...form.getInputProps('firstName')}
                key='firstName'
                label='First name'
              />
              <TextInput
                {...form.getInputProps('lastName')}
                key='lastName'
                label='Last name'
              />
              <TextInput
                {...form.getInputProps('email')}
                key='email'
                label='Email'
                type='email'
              />
              <Textarea
                {...form.getInputProps('message')}
                key='message'
                label='Message'
              />
              <Group>
                <Button type='submit'>
                  Submit
                </Button>
              </Group>
            </Stack>
          </Fieldset>
        </form>
      </Container>
    </>
  );
}

export default AdminInviteForm;