admin(ui): add ability to edit nests

resources/scripts/components/admin/nests/NestEditContainer.tsx

@@ -1,20 +1,113 @@
-import React, { useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
-import useFlash from '@/plugins/useFlash';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Nest } from '@/api/admin/nests/getNests';
 import getNest from '@/api/admin/nests/getNest';
+import updateNest from '@/api/admin/nests/updateNest';
+import { object, string } from 'yup';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
+import AdminBox from '@/components/admin/AdminBox';
 
-export default () => {
+interface ctx {
+    nest: Nest | undefined;
+    setNest: (value: Nest | undefined) => void;
+}
+
+export const Context = createContext<ctx>({ nest: undefined, setNest: () => 1 });
+
+interface Values {
+    name: string;
+    description: string | null;
+}
+
+const NestEditBox = () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { nest, setNest } = useContext(Context);
+
+    if (nest === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('nest');
+
+        updateNest(nest.id, name, description || undefined)
+            .then(() => setNest({ ...nest, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: nest.name,
+                description: nest.description,
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Edit Nest'} css={tw`relative`}>
+                            <SpinnerOverlay visible={isSubmitting}/>
+
+                            <Form css={tw`mb-0`}>
+                                <div>
+                                    <Field
+                                        id={'name'}
+                                        name={'name'}
+                                        label={'Name'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`mt-6`}>
+                                    <Field
+                                        id={'description'}
+                                        name={'description'}
+                                        label={'Description'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+                        </AdminBox>
+                    </React.Fragment>
+                )
+            }
+        </Formik>
+    );
+};
+
+const NestEditContainer = () => {
     const match = useRouteMatch<{ nestId?: string }>();
 
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const [ loading, setLoading ] = useState(true);
 
-    const [ nest, setNest ] = useState<Nest | undefined>(undefined);
+    const { nest, setNest } = useContext(Context);
 
     useEffect(() => {
         clearFlashes('nest');
@@ -23,7 +116,7 @@ export default () => {
             .then(nest => setNest(nest))
             .catch(error => {
                 console.error(error);
-                clearAndAddHttpError(error);
+                clearAndAddHttpError({ key: 'nest', error });
             })
             .then(() => setLoading(false));
     }, []);
@@ -31,11 +124,11 @@ export default () => {
     if (loading || nest === undefined) {
         return (
             <AdminContentBlock title={'Nests'}>
+                <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
+
                 <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
                     <Spinner size={'base'}/>
                 </div>
-
-                <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
             </AdminContentBlock>
         );
     }
@@ -49,7 +142,19 @@ export default () => {
                 </div>
             </div>
 
-            <p>{JSON.stringify(nest.relations.eggs)}</p>
+            <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
+
+            <NestEditBox/>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ nest, setNest ] = useState<Nest | undefined>(undefined);
+
+    return (
+        <Context.Provider value={{ nest, setNest }}>
+            <NestEditContainer/>
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/nests/NestsContainer.tsx

@@ -44,7 +44,7 @@ const NestsContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'nests' });
+        clearAndAddHttpError({ key: 'nests', error });
     }, [ error ]);
 
     const length = nests?.items?.length || 0;