Function ItemForm

frontend/src/app/components/ItemForm/ItemForm.tsx:22–157

({ createItem, exportCsv, onSubmit })

import { OptionsRows } from './styles';

const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }) => {
    const [uploadVisibility, showUploadModal] = React.useState<boolean>(false);
    const app = React.useContext(AppContext);
    if (!app.userInfo) {
        return null;
    }

    function exportItems() {
        exportCsv().then(data => FileDownload(data, 'inventory.csv'));
    }

    return (
        <Formik
            initialValues={{
                name: '',
                categoryId: undefined,
                product_name: '',
                weight: undefined,
                weight_unit: app.userInfo.default_weight_unit,
                product_url: '',
                newCategory: false
            }}
            validationSchema={Yup.object().shape({
                name: Yup.string().required('Item name is required'),
                categoryId: Yup.string().required('Category is required')
            })}
            onSubmit={(values, formikActions) => {
                createItem(values)
                    .then(() => {
                        onSubmit();
                        formikActions.setSubmitting(false);
                        formikActions.resetForm();
                        alertSuccess({ message: 'Item added' });
                        if (values.newCategory) {
                            app.fetchUser();
                        }
                    })
                    .catch(() => {
                        formikActions.setSubmitting(false);
                        alertError({ message: 'An error occurred' });
                    });
            }}
        >
            {(props: FormikProps<CreateItem>) => {
                const { values, setFieldValue, errors, submitCount, submitForm, isSubmitting } = props;
                const wasSubmitted = submitCount > 0;
                const weightUnit = values.weight_unit;
                const categoryValue = categorySelectValue(app.categories, values.categoryId);

                return (
                    <SidebarContainer>
                        <Input
                            value={values.name}
                            label="Item Type"
                            error={wasSubmitted && !!errors.name}
                            placeholder="Backpack, Compass, etc..."
                            onChange={v => setFieldValue('name', v)}
                        />