Add admin state store, add new role functionality

resources/scripts/components/admin/api/NewApiKeyButton.tsx

@@ -1,10 +1,10 @@
+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 React, { useState } from 'react';
 import tw from 'twin.macro';
 import { object } from 'yup';
 

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

@@ -0,0 +1,111 @@
+import createRole from '@/api/admin/roles/createRole';
+import { httpErrorToHuman } from '@/api/http';
+import { AdminContext } from '@/state/admin';
+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';
+
+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 { addError, clearFlashes } = useFlash();
+
+    const appendRole = AdminContext.useStoreActions(actions => actions.roles.appendRole);
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('role:create');
+        setSubmitting(true);
+
+        createRole(name, description)
+            .then(role => {
+                appendRole(role);
+                setVisible(false);
+            })
+            .catch(error => {
+                addError({ key: 'role:create', message: httpErrorToHuman(error) });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{ name: '', description: '' }}
+                validationSchema={schema}
+            >
+                {
+                    ({ isSubmitting, resetForm }) => (
+                        <Modal
+                            visible={visible}
+                            dismissable={!isSubmitting}
+                            showSpinnerOverlay={isSubmitting}
+                            onDismissed={() => {
+                                resetForm();
+                                setVisible(false);
+                            }}
+                        >
+                            <FlashMessageRender byKey={'role:create'} css={tw`mb-6`}/>
+                            <h2 css={tw`text-2xl mb-6`}>New Role</h2>
+                            <Form css={tw`m-0`}>
+                                <Field
+                                    type={'string'}
+                                    id={'name'}
+                                    name={'name'}
+                                    label={'Name'}
+                                    description={'A short name used to identify this role.'}
+                                />
+
+                                <div css={tw`mt-6`}>
+                                    <Field
+                                        type={'string'}
+                                        id={'description'}
+                                        name={'description'}
+                                        label={'Description'}
+                                        description={'A descriptive of this role.'}
+                                    />
+                                </div>
+
+                                <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                    <Button
+                                        type={'button'}
+                                        isSecondary
+                                        css={tw`w-full sm:w-auto sm:mr-2`}
+                                        onClick={() => setVisible(false)}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                        Create Role
+                                    </Button>
+                                </div>
+                            </Form>
+                        </Modal>
+                    )
+                }
+            </Formik>
+
+            <Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`} onClick={() => setVisible(true)}>
+                New Role
+            </Button>
+        </>
+    );
+};

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

@@ -1,26 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { useDeepMemoize } from '@/plugins/useDeepMemoize';
+import { AdminContext } from '@/state/admin';
 import { httpErrorToHuman } from '@/api/http';
+import NewRoleButton from '@/components/admin/roles/NewRoleButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
-import React, { useEffect, useState } from 'react';
-import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
-import getRoles, { Role } from '@/api/admin/roles/getRoles';
+import getRoles from '@/api/admin/roles/getRoles';
 
 export default () => {
-    const { clearFlashes, addError } = useFlash();
-    const [ loading, setLoading ] = useState<boolean>(true);
-    const [ roles, setRoles ] = useState<Role[]>([]);
+    const { addError, clearFlashes } = useFlash();
+    const [ loading, setLoading ] = useState(true);
+
+    const roles = useDeepMemoize(AdminContext.useStoreState(state => state.roles.data));
+    const setRoles = AdminContext.useStoreActions(state => state.roles.setRoles);
 
     useEffect(() => {
+        setLoading(!roles.length);
         clearFlashes('roles');
 
         getRoles()
             .then(roles => setRoles(roles))
             .catch(error => {
-                addError({ message: httpErrorToHuman(error), key: 'roles' });
                 console.error(error);
+                addError({ message: httpErrorToHuman(error), key: 'roles' });
             })
             .then(() => setLoading(false));
     }, []);
@@ -33,9 +38,7 @@ export default () => {
                     <p css={tw`text-base text-neutral-400`}>Soon&trade;</p>
                 </div>
 
-                <Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
-                    New Role
-                </Button>
+                <NewRoleButton />
             </div>
 
             <FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>

resources/scripts/components/server/network/NetworkContainer.tsx

@@ -11,7 +11,6 @@ import Can from '@/components/elements/Can';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import getServerAllocations from '@/api/swr/getServerAllocations';
 import isEqual from 'react-fast-compare';
-import { Allocation } from '@/api/server/getServer';
 
 const NetworkContainer = () => {
     const [ loading, setLoading ] = useState(false);