47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import cx from 'clsx';
|
|
import { isEmpty, isNil } from 'lodash-es';
|
|
import { useActionState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useCreateScheme } from '../stores/schemes';
|
|
import styles from './NewScheme.module.css';
|
|
|
|
export function NewScheme() {
|
|
const createScheme = useCreateScheme();
|
|
const navigate = useNavigate();
|
|
const [errors, formAction] = useActionState((prevState, formData) => {
|
|
try {
|
|
const name = formData.get('name') as string;
|
|
if (isNil(name) || isEmpty(name)) {
|
|
throw { name: 'Name is required' };
|
|
}
|
|
const description = (formData.get('description') ?? null) as string | null;
|
|
const newId = createScheme(name, description);
|
|
navigate(`../${newId}`);
|
|
} catch (error) {
|
|
return error;
|
|
}
|
|
return {};
|
|
}, {});
|
|
|
|
return (
|
|
<form action={formAction} className={styles.create_scheme_form_layout}>
|
|
<div className={styles.form_row}>
|
|
<label>
|
|
Name <span>*</span>
|
|
</label>
|
|
<input type="text" name="name" className={styles.name_input} />
|
|
{errors.name && <div className={styles.error_message}>{errors.name}</div>}
|
|
</div>
|
|
<div className={styles.form_row}>
|
|
<label>Description</label>
|
|
<textarea rows={5} name="description" className={styles.description_input} />
|
|
</div>
|
|
<div className={styles.form_row}>
|
|
<button type="submit" className={cx('primary')}>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|