api(application): relocate egg endpoints

resources/scripts/api/admin/eggs/createEgg.ts

@@ -1,5 +1,5 @@
 import http from '@/api/http';
-import { Egg, rawDataToEgg } from '@/api/admin/nests/eggs/getEggs';
+import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
 export default (nestId: number, name: string): Promise<Egg> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/admin/eggs/getEgg.ts

@@ -48,10 +48,10 @@ export const rawDataToEgg = ({ attributes }: FractalResponseData): Egg => ({
     updatedAt: new Date(attributes.updated_at),
 });
 
-export default (nestId: number): Promise<Egg[]> => {
+export default (id: number): Promise<Egg> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/nests/${nestId}`)
-            .then(({ data }) => resolve((data.data || []).map(rawDataToEgg)))
+        http.get(`/api/application/eggs/${id}`)
+            .then(({ data }) => resolve(rawDataToEgg(data)))
             .catch(reject);
     });
 };

resources/scripts/api/admin/nests/eggs/getEgg.ts

@@ -1,10 +0,0 @@
-import http from '@/api/http';
-import { Egg, rawDataToEgg } from '@/api/admin/nests/eggs/getEggs';
-
-export default (id: number): Promise<Egg> => {
-    return new Promise((resolve, reject) => {
-        http.get(`/api/application/eggs/${id}`)
-            .then(({ data }) => resolve(rawDataToEgg(data)))
-            .catch(reject);
-    });
-};

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

@@ -0,0 +1,10 @@
+import http from '@/api/http';
+import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
+
+export default (nestId: number): Promise<Egg[]> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nests/${nestId}/eggs`)
+            .then(({ data }) => resolve((data.data || []).map(rawDataToEgg)))
+            .catch(reject);
+    });
+};

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

@@ -1,9 +1,9 @@
 import http from '@/api/http';
 import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
 
-export default (id: number): Promise<Nest> => {
+export default (id: number, include: string[]): Promise<Nest> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/nests/${id}`)
+        http.get(`/api/application/nests/${id}`, { params: { include: include.join(',') } })
             .then(({ data }) => resolve(rawDataToNest(data)))
             .catch(reject);
     });

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

@@ -1,6 +1,7 @@
-import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import http, { FractalResponseData, FractalResponseList, getPaginationSet, PaginatedResult } from '@/api/http';
 import { createContext, useContext } from 'react';
 import useSWR from 'swr';
+import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
 export interface Nest {
     id: number;
@@ -10,6 +11,10 @@ export interface Nest {
     description: string | null;
     createdAt: Date;
     updatedAt: Date;
+
+    relations: {
+        eggs: Egg[] | undefined;
+    },
 }
 
 export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
@@ -20,6 +25,10 @@ export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
     description: attributes.description,
     createdAt: new Date(attributes.created_at),
     updatedAt: new Date(attributes.updated_at),
+
+    relations: {
+        eggs: ((attributes.relationships?.eggs as FractalResponseList | undefined)?.data || []).map(rawDataToEgg),
+    },
 });
 
 interface ctx {

resources/scripts/api/admin/servers/getServer.ts

@@ -1,9 +1,9 @@
 import http from '@/api/http';
 import { Server, rawDataToServer } from '@/api/admin/servers/getServers';
 
-export default (id: number): Promise<Server> => {
+export default (id: number, include: string[]): Promise<Server> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/servers/${id}`)
+        http.get(`/api/application/servers/${id}`, { params: { include: include.join(',') } })
             .then(({ data }) => resolve(rawDataToServer(data)))
             .catch(reject);
     });

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

@@ -1,8 +1,55 @@
-import React from 'react';
+import React, { 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';
 
 export default () => {
+    const match = useRouteMatch<{ nestId?: string }>();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const [ loading, setLoading ] = useState(true);
+
+    const [ nest, setNest ] = useState<Nest | undefined>(undefined);
+
+    useEffect(() => {
+        clearFlashes('nest');
+
+        getNest(Number(match.params?.nestId), [ 'eggs' ])
+            .then(nest => setNest(nest))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError(error);
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || nest === undefined) {
+        return (
+            <AdminContentBlock title={'Nests'}>
+                <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>
+        );
+    }
+
     return (
-        <>
-        </>
+        <AdminContentBlock title={'Nests - ' + nest.name}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col`}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2>
+                    <p css={tw`text-base text-neutral-400`}>{nest.description}</p>
+                </div>
+            </div>
+
+            <p>{JSON.stringify(nest.relations.eggs)}</p>
+        </AdminContentBlock>
     );
 };

resources/scripts/routers/AdminRouter.tsx

@@ -233,7 +233,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
 
                         <Route path={`${match.path}/nests`} component={NestsContainer} exact/>
                         <Route
-                            path={`${match.path}/nests/:id`}
+                            path={`${match.path}/nests/:nestId`}
                             component={NestEditContainer}
                             exact
                         />