A social knowledge tool for researchers built on ATProto
cosmik.network
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
38 createCollection.mutate(
39 {
40 name: form.getValues().name,
41 description: form.getValues().description,
42 },
43 {
44 onSuccess: (newCollection) => {
45 props.onClose();
46 props.onCreate &&
47 props.onCreate({
48 id: newCollection.collectionId,
49 name: form.getValues().name,
50 cardCount: 0,
51 });
52 },
53 onError: () => {
54 notifications.show({
55 message: 'Could not create collection.',
56 });
57 },
58 onSettled: () => {
59 form.reset();
60 },
61 },
62 );
63 };
64
65 return (
66 <Drawer
67 opened={props.isOpen}
68 onClose={props.onClose}
69 withCloseButton={false}
70 position="bottom"
71 size={'30rem'}
72 overlayProps={DEFAULT_OVERLAY_PROPS}
73 >
74 <Drawer.Header>
75 <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
76 Create Collection
77 </Drawer.Title>
78 </Drawer.Header>
79
80 <Container size={'sm'}>
81 <form>
82 <Stack>
83 <TextInput
84 id="name"
85 label="Name"
86 type="text"
87 placeholder="Collection name"
88 variant="filled"
89 size="md"
90 required
91 maxLength={100}
92 key={form.key('name')}
93 {...form.getInputProps('name')}
94 />
95
96 <Textarea
97 id="description"
98 label="Description"
99 placeholder="Describe what this collection is about"
100 variant="filled"
101 size="md"
102 rows={8}
103 maxLength={500}
104 key={form.key('description')}
105 {...form.getInputProps('description')}
106 />
107 <Group justify="space-between" gap={'xs'} grow>
108 <Button
109 variant="light"
110 size="md"
111 color={'gray'}
112 onClick={props.onClose}
113 >
114 Cancel
115 </Button>
116 <Button
117 onClick={handleCreateCollection}
118 size="md"
119 loading={createCollection.isPending}
120 >
121 Create
122 </Button>
123 </Group>
124 </Stack>
125 </form>
126 </Container>
127 </Drawer>
128 );
129}