Refactored user components.

This commit is contained in:
Mike Cao 2023-01-23 15:32:35 -08:00
parent 91af593ff5
commit cdd54df8f6
16 changed files with 180 additions and 231 deletions

View file

@ -1,4 +1,3 @@
import { useRef } from 'react';
import {
Form,
FormRow,
@ -8,13 +7,19 @@ import {
Button,
SubmitButton,
} from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import { DOMAIN_REGEX } from 'lib/constants';
import { labels } from 'components/messages';
const messages = defineMessages({
invalidDomain: { id: 'label.invalid-domain', defaultMessage: 'Invalid domain' },
});
export default function WebsiteAddForm({ onSave, onClose }) {
const { formatMessage } = useIntl();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
@ -25,9 +30,9 @@ export default function WebsiteAddForm({ onSave, onClose }) {
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<FormRow label="Name">
<FormInput name="name" rules={{ required: 'Required' }}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
@ -35,8 +40,8 @@ export default function WebsiteAddForm({ onSave, onClose }) {
<FormInput
name="domain"
rules={{
required: 'Required',
pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
required: formatMessage(labels.required),
pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
}}
>
<TextField autoComplete="off" />
@ -44,10 +49,10 @@ export default function WebsiteAddForm({ onSave, onClose }) {
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" disabled={false}>
Save
{formatMessage(labels.save)}
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
Cancel
{formatMessage(labels.cancel)}
</Button>
</FormButtons>
</Form>