66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import cx from 'clsx';
|
|
import { isEmpty, isNil } from 'lodash-es';
|
|
import { useActionState, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { VSegmentedControl } from '../components/VSegmentedControl';
|
|
import { SchemeTypeOption, SchemeTypeOptions } from '../models';
|
|
import { useCreateScheme } from '../stores/schemes';
|
|
import styles from './NewScheme.module.css';
|
|
|
|
export function NewScheme() {
|
|
const createScheme = useCreateScheme();
|
|
const navigate = useNavigate();
|
|
const [schemeType, setSchemeType] = useState<SchemeTypeOption['value']>('q_scheme');
|
|
const [errors, formAction] = useActionState<{ [key: string]: string }, FormData>(
|
|
(_prevState, formData): { [key: string]: string } => {
|
|
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 schemeType = (formData.get('type') ?? 'q_scheme') as SchemeTypeOption['value'];
|
|
const newId = createScheme(name, schemeType, description);
|
|
navigate(`../${newId}`);
|
|
} catch (error) {
|
|
return error as { [key: string]: string };
|
|
}
|
|
return {} as { [key: string]: string };
|
|
},
|
|
{},
|
|
);
|
|
|
|
return (
|
|
<form action={formAction} className={styles.create_scheme_form_layout}>
|
|
<div className={styles.form_row}>
|
|
<label>
|
|
Scheme Type <span>*</span>
|
|
</label>
|
|
<VSegmentedControl
|
|
options={SchemeTypeOptions}
|
|
extendClassName={styles.custom_segment}
|
|
value={schemeType}
|
|
onChange={(v) => setSchemeType(v as SchemeTypeOption['value'])}
|
|
/>
|
|
<input type="hidden" name="type" value={schemeType} />
|
|
</div>
|
|
<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>
|
|
);
|
|
}
|