umami/components/forms/UserEditForm.js

65 lines
1.4 KiB
JavaScript
Raw Normal View History

import {
Dropdown,
Item,
Form,
2020-08-09 08:48:43 +02:00
FormButtons,
FormInput,
TextField,
SubmitButton,
} from 'react-basics';
import { useRef } from 'react';
import { useMutation } from '@tanstack/react-query';
2022-12-28 05:20:44 +01:00
import useApi from 'hooks/useApi';
import { ROLES } from 'lib/constants';
import styles from './UserForm.module.css';
2020-08-09 08:48:43 +02:00
const items = [
{
value: ROLES.user,
label: 'User',
},
{
value: ROLES.admin,
label: 'Admin',
},
];
2020-08-09 08:48:43 +02:00
export default function UserEditForm({ data, onSave }) {
const { id } = data;
const { post } = useApi();
const { mutate, error } = useMutation(({ username }) => post(`/user/${id}`, { username }));
const ref = useRef(null);
2020-08-09 08:48:43 +02:00
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave(data);
ref.current.reset(data);
},
});
2020-08-09 08:48:43 +02:00
};
return (
<Form
key={id}
className={styles.form}
ref={ref}
onSubmit={handleSubmit}
error={error}
values={data}
>
<FormInput name="username" label="Username">
<TextField />
</FormInput>
<FormInput name="role" label="Role">
<Dropdown items={items} style={{ width: 200 }}>
{({ value, label }) => <Item key={value}>{label}</Item>}
</Dropdown>
</FormInput>
<FormButtons>
<SubmitButton variant="primary">Save</SubmitButton>
</FormButtons>
</Form>
2020-08-09 08:48:43 +02:00
);
}