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
|
import {
Button,
Form,
FormButtons,
FormField,
FormSubmitButton,
TextField,
} from '@umami/react-zen';
import { useMessages, useUpdateQuery } from '@/components/hooks';
export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
const { formatMessage, labels, getErrorMessage } = useMessages();
const { mutateAsync, error, touch } = useUpdateQuery('/teams/join');
const handleSubmit = async (data: any) => {
await mutateAsync(data, {
onSuccess: async () => {
touch('teams:members');
onSave?.();
onClose?.();
},
});
};
return (
<Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
<FormField
label={formatMessage(labels.accessCode)}
name="accessCode"
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoComplete="off" />
</FormField>
<FormButtons>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
</FormButtons>
</Form>
);
}
|