ui(admin): add role delete button

resources/scripts/components/admin/locations/LocationDeleteButton.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
 import tw from 'twin.macro';
+import deleteLocation from '@/api/admin/locations/deleteLocation';
 import Button from '@/components/elements/Button';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
-import deleteLocation from '@/api/admin/locations/deleteLocation';
+import { ApplicationStore } from '@/state';
 
 interface Props {
     locationId: number;

resources/scripts/components/admin/roles/RoleDeleteButton.tsx

@@ -0,0 +1,58 @@
+import { Actions, useStoreActions } from 'easy-peasy';
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+import deleteRole from '@/api/admin/roles/deleteRole';
+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<ApplicationStore>) => 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 (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete role?'}
+                buttonText={'Yes, delete role'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this role?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5`}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/roles/RoleEditContainer.tsx

@@ -1,21 +1,22 @@
 import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
 import React, { useEffect, useState } from 'react';
-// import { useHistory } from 'react-router';
+import { useHistory } from 'react-router';
 import { useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import { object, string } from 'yup';
 import { Role } from '@/api/admin/roles/getRoles';
 import getRole from '@/api/admin/roles/getRole';
-import AdminContentBlock from '@/components/admin/AdminContentBlock';
-import Spinner from '@/components/elements/Spinner';
-import FlashMessageRender from '@/components/FlashMessageRender';
-import { ApplicationStore } from '@/state';
-import { Form, Formik, FormikHelpers } from 'formik';
 import updateRole from '@/api/admin/roles/updateRole';
+import FlashMessageRender from '@/components/FlashMessageRender';
 import AdminBox from '@/components/admin/AdminBox';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import Field from '@/components/elements/Field';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import RoleDeleteButton from '@/components/admin/roles/RoleDeleteButton';
 import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Spinner from '@/components/elements/Spinner';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { ApplicationStore } from '@/state';
 
 interface ctx {
     role: Role | undefined;
@@ -36,7 +37,7 @@ interface Values {
 }
 
 const EditInformationContainer = () => {
-    // const history = useHistory();
+    const history = useHistory();
 
     const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -99,12 +100,12 @@ const EditInformationContainer = () => {
                                 </div>
 
                                 <div css={tw`w-full flex flex-row items-center mt-6`}>
-                                    {/* <div css={tw`flex`}> */}
-                                    {/*     <RoleDeleteButton */}
-                                    {/*         roleId={role.id} */}
-                                    {/*         onDeleted={() => history.push('/admin/roles')} */}
-                                    {/*     /> */}
-                                    {/* </div> */}
+                                    <div css={tw`flex`}>
+                                        <RoleDeleteButton
+                                            roleId={role.id}
+                                            onDeleted={() => history.push('/admin/roles')}
+                                        />
+                                    </div>
 
                                     <div css={tw`flex ml-auto`}>
                                         <Button type={'submit'} disabled={isSubmitting || !isValid}>