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

New Role

) }
); };