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