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} from '@mantine/core';
9import { useForm } from '@mantine/form';
10import { notifications } from '@mantine/notifications';
11import useUpdateNote from '../../lib/mutations/useUpdateNote';
12import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
13
14interface Props {
15 isOpen: boolean;
16 onClose: () => void;
17 noteCardId: string;
18 note: string;
19}
20
21export default function EditNoteDrawer(props: Props) {
22 const updateNote = useUpdateNote();
23
24 const form = useForm({
25 initialValues: {
26 note: props.note,
27 },
28 });
29
30 const handleUpdateNote = (e: React.FormEvent) => {
31 e.preventDefault();
32
33 updateNote.mutate(
34 {
35 cardId: props.noteCardId,
36 note: form.values.note,
37 },
38 {
39 onError: () => {
40 notifications.show({
41 message: 'Could not update note.',
42 position: 'top-center',
43 });
44 },
45 onSettled: () => {
46 props.onClose();
47 },
48 },
49 );
50 };
51
52 return (
53 <Drawer
54 opened={props.isOpen}
55 onClose={() => {
56 props.onClose();
57 form.reset();
58 }}
59 withCloseButton={false}
60 position="bottom"
61 size={'xs'}
62 overlayProps={UPDATE_OVERLAY_PROPS}
63 >
64 <Drawer.Header>
65 <Drawer.Title fz="xl" fw={600} mx="auto">
66 Edit Note
67 </Drawer.Title>
68 </Drawer.Header>
69
70 <Container size="sm">
71 <form onSubmit={handleUpdateNote}>
72 <Stack>
73 <Textarea
74 id="note"
75 label="Note"
76 placeholder="Add a note about this card"
77 variant="filled"
78 size="md"
79 rows={5}
80 maxLength={500}
81 required
82 key={form.key('note')}
83 {...form.getInputProps('note')}
84 />
85
86 <Group justify="space-between" gap={'xs'} grow>
87 <Button
88 variant="light"
89 size="md"
90 color="gray"
91 onClick={props.onClose}
92 >
93 Cancel
94 </Button>
95 <Button type="submit" size="md" loading={updateNote.isPending}>
96 Update
97 </Button>
98 </Group>
99 </Stack>
100 </form>
101 </Container>
102 </Drawer>
103 );
104}