Fix RolesContainer, refactor NestsContainer

app/Http/Controllers/Api/Application/Nests/NestController.php

@@ -37,7 +37,7 @@ class NestController extends ApplicationApiController
      */
     public function index(GetNestsRequest $request): array
     {
-        $nests = $this->repository->paginated(1);
+        $nests = $this->repository->paginated(10);
 
         return $this->fractal->collection($nests)
             ->transformWith($this->getTransformer(NestTransformer::class))

app/Repositories/Eloquent/NestRepository.php

@@ -28,7 +28,8 @@ class NestRepository extends EloquentRepository implements NestRepositoryInterfa
     /**
      * Return a nest or all nests with their associated eggs and variables.
      *
-     * @param int $id
+     * @param int|null $id
+     *
      * @return \Illuminate\Database\Eloquent\Collection|\Pterodactyl\Models\Nest
      *
      * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException

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

@@ -1,5 +1,7 @@
-import http from '@/api/http';
+import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 import { rawDataToNest } from '@/api/transformers';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
 
 export interface Nest {
     id: number;
@@ -11,10 +13,22 @@ export interface Nest {
     updatedAt: Date;
 }
 
-export default (): Promise<Nest[]> => {
-    return new Promise((resolve, reject) => {
-        http.get('/api/application/nests')
-            .then(({ data }) => resolve((data.data || []).map(rawDataToNest)))
-            .catch(reject);
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+}
+
+export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+
+export default () => {
+    const { page } = useContext(Context);
+
+    return useSWR<PaginatedResult<Nest>>([ 'nests', page ], async () => {
+        const { data } = await http.get('/api/application/nests', { params: { page } });
+
+        return ({
+            items: (data.data || []).map(rawDataToNest),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
     });
 };

resources/scripts/api/swr/getNests.ts

@@ -1,25 +0,0 @@
-import { Nest } from '@/api/admin/nests/getNests';
-import useSWR from 'swr';
-import http, { getPaginationSet, PaginatedResult } from '@/api/http';
-import { rawDataToNest } from '@/api/transformers';
-import { createContext, useContext } from 'react';
-
-interface ctx {
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-}
-
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
-
-export default () => {
-    const { page } = useContext(Context);
-
-    return useSWR<PaginatedResult<Nest>>([ 'nests', page ], async () => {
-        const { data } = await http.get(`/api/application/nests`, { params: { page } });
-
-        return ({
-            items: (data.data || []).map(rawDataToNest),
-            pagination: getPaginationSet(data.meta.pagination),
-        });
-    });
-};

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

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import getNests, { Context as NestsContext } from '@/api/swr/getNests';
+import getNests, { Context as NestsContext } from '@/api/admin/nests/getNests';
 import NewNestButton from '@/components/admin/nests/NewNestButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -39,11 +39,11 @@ const NestsContainer = () => {
 
     useEffect(() => {
         if (!error) {
-            clearFlashes('backups');
+            clearFlashes('nests');
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'backups' });
+        clearAndAddHttpError({ error, key: 'nests' });
     }, [ error ]);
 
     const length = nests?.items?.length || 0;

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

@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 import createNest from '@/api/admin/nests/createNest';
-import { httpErrorToHuman } from '@/api/http';
-import { AdminContext } from '@/state/admin';
+import getNests from '@/api/admin/nests/getNests';
 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';
+import tw from 'twin.macro';
 
 interface Values {
     name: string,
@@ -26,9 +25,8 @@ const schema = object().shape({
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
-    const { addError, clearFlashes } = useFlash();
-
-    const appendNest = AdminContext.useStoreActions(actions => actions.nests.appendNest);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getNests();
 
     const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('nest:create');
@@ -36,11 +34,11 @@ export default () => {
 
         createNest(name, description)
             .then(nest => {
-                appendNest(nest);
+                mutate(data => ({ ...data, items: data.items.concat(nest) }), false);
                 setVisible(false);
             })
             .catch(error => {
-                addError({ key: 'nest:create', message: httpErrorToHuman(error) });
+                clearAndAddHttpError({ key: 'nest:create', error });
                 setSubmitting(false);
             });
     };

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

@@ -1,4 +1,4 @@
-/* import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import { AdminContext } from '@/state/admin';
 import { httpErrorToHuman } from '@/api/http';
@@ -10,7 +10,7 @@ import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import getRoles from '@/api/admin/roles/getRoles';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, { TableBody, TableHead, TableHeader, TableRow } from '@/components/admin/AdminTable';
+import AdminTable, { ContentWrapper, Loading, NoItems, TableBody, TableHead, TableHeader, TableRow } from '@/components/admin/AdminTable';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.roles.selectedRoles.indexOf(id) >= 0);
@@ -74,47 +74,49 @@ export default () => {
 
             <FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
 
-            <AdminTable
-                loading={loading}
-                hasItems={roles.length > 0}
-                checked={selectedRolesLength === (roles.length === 0 ? -1 : roles.length)}
-                onSelectAllClick={onSelectAllClick}
-            >
-                <TableHead>
-                    <TableHeader name={'ID'}/>
-                    <TableHeader name={'Name'}/>
-                    <TableHeader name={'Description'}/>
-                </TableHead>
+            <AdminTable>
+                { loading ?
+                    <Loading/>
+                    :
+                    roles.length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedRolesLength === (roles.length === 0 ? -1 : roles.length)}
+                            onSelectAllClick={onSelectAllClick}
+                        >
+                            <div css={tw`overflow-x-auto`}>
+                                <table css={tw`w-full table-auto`}>
+                                    <TableHead>
+                                        <TableHeader name={'ID'}/>
+                                        <TableHeader name={'Name'}/>
+                                        <TableHeader name={'Description'}/>
+                                    </TableHead>
 
-                <TableBody>
-                    {
-                        roles.map(role => (
-                            <TableRow key={role.id}>
-                                <td css={tw`pl-6`}>
-                                    <RowCheckbox id={role.id}/>
-                                </td>
+                                    <TableBody>
+                                        {
+                                            roles.map(role => (
+                                                <TableRow key={role.id}>
+                                                    <td css={tw`pl-6`}>
+                                                        <RowCheckbox id={role.id}/>
+                                                    </td>
 
-                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.id}</td>
-                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
-                                    <NavLink to={`${match.url}/${role.id}`}>
-                                        {role.name}
-                                    </NavLink>
-                                </td>
-                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
-                            </TableRow>
-                        ))
-                    }
-                </TableBody>
+                                                    <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.id}</td>
+                                                    <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                        <NavLink to={`${match.url}/${role.id}`}>
+                                                            {role.name}
+                                                        </NavLink>
+                                                    </td>
+                                                    <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
+                                                </TableRow>
+                                            ))
+                                        }
+                                    </TableBody>
+                                </table>
+                            </div>
+                        </ContentWrapper>
+                }
             </AdminTable>
         </AdminContentBlock>
     );
-}; */
-
-import React from 'react';
-
-export default () => {
-    return (
-        <>
-        </>
-    );
 };

resources/scripts/state/admin/nests.ts

@@ -1,39 +1,16 @@
 import { action, Action } from 'easy-peasy';
-import { Nest } from '@/api/admin/nests/getNests';
 
 export interface AdminNestStore {
-    data: Nest[];
     selectedNests: number[];
 
-    setNests: Action<AdminNestStore, Nest[]>;
-    appendNest: Action<AdminNestStore, Nest>;
-    removeNest: Action<AdminNestStore, number>;
-
     setSelectedNests: Action<AdminNestStore, number[]>;
     appendSelectedNest: Action<AdminNestStore, number>;
     removeSelectedNest: Action<AdminNestStore, number>;
 }
 
 const nests: AdminNestStore = {
-    data: [],
     selectedNests: [],
 
-    setNests: action((state, payload) => {
-        state.data = payload;
-    }),
-
-    appendNest: action((state, payload) => {
-        if (state.data.find(nest => nest.id === payload.id)) {
-            state.data = state.data.map(nest => nest.id === payload.id ? payload : nest);
-        } else {
-            state.data = [ ...state.data, payload ];
-        }
-    }),
-
-    removeNest: action((state, payload) => {
-        state.data = [ ...state.data.filter(nest => nest.id !== payload) ];
-    }),
-
     setSelectedNests: action((state, payload) => {
         state.selectedNests = payload;
     }),