ui(admin): implement basic egg importing

resources/scripts/api/admin/nests/importEgg.ts

@@ -0,0 +1,17 @@
+import http from '@/api/http';
+import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
+
+export default (id: number, content: any, type = 'application/json', include: string[] = []): Promise<Egg> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/application/nests/${id}/import`, content, {
+            headers: {
+                'Content-Type': type,
+            },
+            params: {
+                include: include.join(','),
+            },
+        })
+            .then(({ data }) => resolve(rawDataToEgg(data)))
+            .catch(reject);
+    });
+};

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

@@ -1,14 +1,37 @@
+import getEggs from '@/api/admin/nests/getEggs';
+import importEgg from '@/api/admin/nests/importEgg';
+import useFlash from '@/plugins/useFlash';
 import { jsonLanguage } from '@codemirror/lang-json';
 import Editor from '@/components/elements/Editor';
 import React, { useState } from 'react';
 import Button from '@/components/elements/Button';
 import Modal from '@/components/elements/Modal';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 
 export default ({ className }: { className?: string }) => {
     const [ visible, setVisible ] = useState(false);
 
+    const { clearFlashes } = useFlash();
+
+    const match = useRouteMatch<{ nestId: string }>();
+    const { mutate } = getEggs(Number(match.params.nestId));
+
+    let fetchFileContent: null | (() => Promise<string>) = null;
+
+    const submit = async () => {
+        clearFlashes('egg:import');
+
+        if (fetchFileContent === null) {
+            return;
+        }
+
+        const egg = await importEgg(Number(match.params.nestId), await fetchFileContent());
+        await mutate(data => ({ ...data!, items: [ ...data!.items!, egg ] }));
+        setVisible(false);
+    };
+
     return (
         <>
             <Modal
@@ -21,18 +44,28 @@ export default ({ className }: { className?: string }) => {
 
                 <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
 
-                <Editor overrides={tw`h-64 rounded`} initialContent={''} mode={jsonLanguage}/>
+                <Editor
+                    overrides={tw`h-64 rounded`}
+                    initialContent={''}
+                    mode={jsonLanguage}
+                    fetchContent={value => {
+                        fetchFileContent = value;
+                    }}
+                />
 
                 <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
                     <Button
                         type={'button'}
-                        isSecondary
                         css={tw`w-full sm:w-auto sm:mr-2`}
                         onClick={() => setVisible(false)}
+                        isSecondary
                     >
                         Cancel
                     </Button>
-                    <Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
+                    <Button
+                        css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
+                        onClick={submit}
+                    >
                         Import Egg
                     </Button>
                 </div>