nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
createCollectionDrawer
/
CreateCollectionDrawer.tsx
3.3 kB
131 lines
1import {
2 Button,
3 Container,
4 Drawer,
5 Group,
6 Stack,
7 Textarea,
8 TextInput,
9} from '@mantine/core';
10import { useForm } from '@mantine/form';
11import useCreateCollection from '../../lib/mutations/useCreateCollection';
12import { notifications } from '@mantine/notifications';
13import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
14
15interface Props {
16 isOpen: boolean;
17 onClose: () => void;
18 initialName?: string;
19 onCreate?: (newCollection: {
20 id: string;
21 name: string;
22 cardCount: number;
23 }) => void;
24}
25
26export default function createCollectionDrawer(props: Props) {
27 const createCollection = useCreateCollection();
28 const form = useForm({
29 initialValues: {
30 name: props.initialName ?? '',
31 description: '',
32 },
33 });
34
35 const handleCreateCollection = (e: React.FormEvent) => {
36 e.preventDefault();
37 e.stopPropagation();
38
39 createCollection.mutate(
40 {
41 name: form.getValues().name,
42 description: form.getValues().description,
43 },
44 {
45 onSuccess: (newCollection) => {
46 props.onClose();
47 if (newCollection) {
48 props.onCreate &&
49 props.onCreate({
50 id: newCollection.collectionId,
51 name: form.getValues().name,
52 cardCount: 0,
53 });
54 }
55 },
56 onError: () => {
57 notifications.show({
58 message: 'Could not create collection.',
59 });
60 },
61 onSettled: () => {
62 form.reset();
63 },
64 },
65 );
66 };
67
68 return (
69 <Drawer
70 opened={props.isOpen}
71 onClose={props.onClose}
72 withCloseButton={false}
73 position="bottom"
74 overlayProps={DEFAULT_OVERLAY_PROPS}
75 >
76 <Drawer.Header>
77 <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
78 Create Collection
79 </Drawer.Title>
80 </Drawer.Header>
81
82 <Container size={'sm'} p={0}>
83 <form onSubmit={handleCreateCollection}>
84 <Stack>
85 <TextInput
86 id="name"
87 label="Name"
88 type="text"
89 placeholder="Collection name"
90 variant="filled"
91 size="md"
92 required
93 maxLength={100}
94 key={form.key('name')}
95 {...form.getInputProps('name')}
96 />
97
98 <Textarea
99 id="description"
100 label="Description"
101 placeholder="Describe what this collection is about"
102 variant="filled"
103 size="md"
104 rows={6}
105 maxLength={500}
106 key={form.key('description')}
107 {...form.getInputProps('description')}
108 />
109 <Group justify="space-between" gap={'xs'} grow>
110 <Button
111 variant="light"
112 size="md"
113 color={'gray'}
114 onClick={props.onClose}
115 >
116 Cancel
117 </Button>
118 <Button
119 type="submit"
120 size="md"
121 loading={createCollection.isPending}
122 >
123 Create
124 </Button>
125 </Group>
126 </Stack>
127 </form>
128 </Container>
129 </Drawer>
130 );
131}