import { Actions, useStoreActions } from 'easy-peasy'; import React, { useState } from 'react'; import tw from 'twin.macro'; import { deleteRole } from '@/api/admin/roles'; import Button from '@/components/elements/Button'; import ConfirmationModal from '@/components/elements/ConfirmationModal'; import { ApplicationStore } from '@/state'; interface Props { roleId: number; onDeleted: () => void; } export default ({ roleId, onDeleted }: Props) => { const [ visible, setVisible ] = useState(false); const [ loading, setLoading ] = useState(false); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const onDelete = () => { setLoading(true); clearFlashes('role'); deleteRole(roleId) .then(() => { setLoading(false); onDeleted(); }) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'role', error }); setLoading(false); setVisible(false); }); }; return ( <> setVisible(false)} > Are you sure you want to delete this role? ); };