generated from mantinedev/next-pages-template
-
-
Notifications
You must be signed in to change notification settings - Fork 253
/
RenameBoardModal.tsx
68 lines (62 loc) · 1.89 KB
/
RenameBoardModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { modals } from '@mantine/modals';
import { Alert, Button, TextInput } from '@mantine/core';
import { api } from '~/utils/api';
import { useForm, zodResolver } from '@mantine/form';
import { z } from 'zod';
import { IconAlertCircle } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { configNameSchema } from '~/validations/boards';
type RenameBoardModalProps = {
boardName: string;
configNames: string[];
onClose: () => void;
}
export const RenameBoardModal = ({ boardName, configNames, onClose }: RenameBoardModalProps) => {
const { t } = useTranslation(['manage/boards', 'common']);
const utils = api.useUtils();
const { mutateAsync: mutateRenameBoardAsync, isLoading, isError, error } = api.boards.renameBoard.useMutation({
onSettled: () => {
void utils.boards.all.invalidate();
}
});
const form = useForm({
initialValues: {
newName: '',
},
validate: zodResolver(z.object({
newName: configNameSchema.refine(value => !configNames.includes(value)),
})),
validateInputOnBlur: true,
validateInputOnChange: true,
});
const handleSubmit = () => {
mutateRenameBoardAsync({
oldName: boardName,
newName: form.values.newName,
}).then(() => {
onClose();
});
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
{isError && error && (
<Alert icon={<IconAlertCircle size={"1rem"} />} mb={"md"}>
{error.message}
</Alert>
)}
<TextInput
label={t('cards.menu.rename.modal.fields.name.label')}
placeholder={t('cards.menu.rename.modal.fields.name.placeholder') as string}
data-autofocus
{...form.getInputProps('newName')} />
<Button
loading={isLoading}
fullWidth
mt="md"
type={'submit'}
variant={"light"}>
{t('common:confirm')}
</Button>
</form>
);
};