import React, { useState } from 'react'; import Button from '@/components/elements/Button'; import Field from '@/components/elements/Field'; import Modal from '@/components/elements/Modal'; import FlashMessageRender from '@/components/FlashMessageRender'; import useFlash from '@/plugins/useFlash'; import { Form, Formik, FormikHelpers } from 'formik'; import tw from 'twin.macro'; import { object, string } from 'yup'; import createLocation from '@/api/admin/locations/createLocation'; import getLocations from '@/api/admin/locations/getLocations'; interface Values { short: string, long: string, } const schema = object().shape({ short: string() .required('A location short name must be provided.') .max(32, 'Location short name must not exceed 32 characters.'), long: string() .max(255, 'Location long name must not exceed 255 characters.'), }); export default () => { const [ visible, setVisible ] = useState(false); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { mutate } = getLocations(); const submit = ({ short, long }: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('location:create'); setSubmitting(true); createLocation(short, long) .then(location => { mutate(data => ({ ...data, items: data.items.concat(location) }), false); setVisible(false); }) .catch(error => { clearAndAddHttpError({ key: 'location:create', error }); setSubmitting(false); }); }; return ( <> { ({ isSubmitting, resetForm }) => ( { resetForm(); setVisible(false); }} >

New Location

) }
); };