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 onClick={(e) => e.stopPropagation()}
64 >
65 <Drawer.Header>
66 <Drawer.Title fz="xl" fw={600} mx="auto">
67 Edit Note
68 </Drawer.Title>
69 </Drawer.Header>
70
71 <Container size="sm" p={0}>
72 <form onSubmit={handleUpdateNote}>
73 <Stack>
74 <Textarea
75 id="note"
76 label="Note"
77 placeholder="Add a note about this card"
78 variant="filled"
79 size="md"
80 rows={5}
81 maxLength={500}
82 required
83 key={form.key('note')}
84 {...form.getInputProps('note')}
85 />
86
87 <Group justify="space-between" gap={'xs'} grow>
88 <Button
89 variant="light"
90 size="md"
91 color="gray"
92 onClick={props.onClose}
93 >
94 Cancel
95 </Button>
96 <Button
97 disabled={form.values.note.trimEnd() === ''}
98 type="submit"
99 size="md"
100 loading={updateNote.isPending}
101 >
102 Update
103 </Button>
104 </Group>
105 </Stack>
106 </form>
107 </Container>
108 </Drawer>
109 );
110}