Get basic concept of pagination working on NestsContainer.tsx

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(50);
+        $nests = $this->repository->paginated(2);
 
         return $this->fractal->collection($nests)
             ->transformWith($this->getTransformer(NestTransformer::class))

resources/scripts/api/swr/getNests.ts

@@ -0,0 +1,25 @@
+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/AdminTable.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { TableCheckbox } from '@/components/admin/AdminCheckbox';
 import Spinner from '@/components/elements/Spinner';
+import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import { PaginatedResult } from '@/api/http';
 
 export const TableHead = ({ children }: { children: React.ReactNode }) => {
     return (
@@ -47,25 +49,120 @@ export const TableRow = ({ children }: { children: React.ReactNode }) => {
         </tr>
     );
 };
-interface Params {
+
-    loading: boolean;
+interface Props<T> {
-    hasItems: boolean;
+    data: PaginatedResult<T>;
-    checked: boolean;
+    onPageSelect: (page: number) => void;
-    onSelectAllClick(e: React.ChangeEvent<HTMLInputElement>): void;
 
     children: React.ReactNode;
 }
 
-export default ({ loading, hasItems, checked, onSelectAllClick, children }: Params) => {
+const PaginationButton = styled.button<{ active?: boolean }>`
+    ${tw`relative items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 focus:z-10 focus:outline-none focus:border-primary-300 inline-flex`};
+
+    ${props => props.active ? tw`bg-neutral-500 text-neutral-50` : tw`bg-neutral-600 text-neutral-200 hover:text-neutral-300`};
+`;
+
+const PaginationArrow = styled.button`
+    ${tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`};
+`;
+
+export function Pagination<T> ({ data: { pagination }, onPageSelect, children }: Props<T>) {
+    const isFirstPage = pagination.currentPage === 1;
+    const isLastPage = pagination.currentPage >= pagination.totalPages;
+
+    /* const pages = [];
+
+    const start = Math.max(pagination.currentPage - 2, 1);
+    const end = Math.min(pagination.totalPages, pagination.currentPage + 5);
+
+    for (let i = start; i <= start + 3; i++) {
+        pages.push(i);
+    }
+
+    for (let i = end; i >= end - 3; i--) {
+        pages.push(i);
+    } */
+
+    const setPage = (page: number) => {
+        if (page < 1 || page > pagination.totalPages) {
+            return;
+        }
+
+        onPageSelect(page);
+    };
+
+    return (
+        <>
+            {children}
+
+            <div css={tw`h-12 flex flex-row items-center w-full px-6 py-3 border-t border-neutral-500`}>
+                <p css={tw`text-sm leading-5 text-neutral-400`}>
+                    Showing <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + 1}</span> to <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + pagination.count}</span> of <span css={tw`text-neutral-300`}>{pagination.total}</span> results
+                </p>
+
+                { isFirstPage && isLastPage ?
+                    null
+                    :
+                    <div css={tw`flex flex-row ml-auto`}>
+                        <nav css={tw`relative z-0 inline-flex shadow-sm`}>
+                            <PaginationArrow type="button" onClick={() => setPage(pagination.currentPage - 1)} css={tw`rounded-l-md`} aria-label="Previous">
+                                <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path clipRule="evenodd" fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"/>
+                                </svg>
+                            </PaginationArrow>
+
+                            <PaginationButton type="button" onClick={() => setPage(1)} active={pagination.currentPage === 1}>
+                                1
+                            </PaginationButton>
+
+                            <PaginationButton type="button" onClick={() => setPage(2)} active={pagination.currentPage === 2}>
+                                2
+                            </PaginationButton>
+
+                            <PaginationButton type="button" onClick={() => setPage(3)} active={pagination.currentPage === 3}>
+                                3
+                            </PaginationButton>
+
+                            {/* <span css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 border border-neutral-500 bg-neutral-600 text-neutral-200 cursor-default`}>
+                                ...
+                            </span>
+
+                            <PaginationButton type="button" onClick={() => setPage(7)} css={tw`bg-neutral-600 text-neutral-200 hover:text-neutral-300`}>
+                                7
+                            </PaginationButton>
+
+                            <PaginationButton type="button" onClick={() => setPage(8)} css={tw`bg-neutral-600 text-neutral-200 hover:text-neutral-300`}>
+                                8
+                            </PaginationButton>
+
+                            <PaginationButton type="button" onClick={() => setPage(9)} css={tw`bg-neutral-600 text-neutral-200 hover:text-neutral-300`}>
+                                9
+                            </PaginationButton> */}
+
+                            <PaginationArrow type="button" onClick={() => setPage(pagination.currentPage + 1)} css={tw`-ml-px rounded-r-md`} aria-label="Next">
+                                <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path clipRule="evenodd" fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
+                                </svg>
+                            </PaginationArrow>
+                        </nav>
+                    </div>
+                }
+            </div>
+        </>
+    );
+}
+
+export const Loading = () => {
     return (
-        <div css={tw`flex flex-col w-full`}>
-            <div css={tw`rounded-lg shadow-md bg-neutral-700`}>
-                { loading ?
         <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
             <Spinner size={'base'}/>
         </div>
-                    :
+    );
-                    !hasItems ?
+};
+
+export const NoItems = () => {
+    return (
         <div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
             <div css={tw`h-64 flex`}>
                 <img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
@@ -73,7 +170,18 @@ export default ({ loading, hasItems, checked, onSelectAllClick, children }: Para
 
             <p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>No items could be found, it&apos;s almost like they are hiding.</p>
         </div>
-                        :
+    );
+};
+
+interface Params {
+    checked: boolean;
+    onSelectAllClick: (e: React.ChangeEvent<HTMLInputElement>) => void;
+
+    children: React.ReactNode;
+}
+
+export const ContentWrapper = ({ checked, onSelectAllClick, children }: Params) => {
+    return (
         <>
             <div css={tw`flex flex-row items-center h-12 px-6`}>
                 <div css={tw`flex flex-row items-center`}>
@@ -100,63 +208,16 @@ export default ({ loading, hasItems, checked, onSelectAllClick, children }: Para
                 </div>
             </div>
 
-                            <div css={tw`overflow-x-auto`}>
-                                <table css={tw`w-full table-auto`}>
             {children}
-                                </table>
-                            </div>
-
-                            <div css={tw`flex flex-row items-center w-full px-6 py-3 border-t border-neutral-500`}>
-                                <p css={tw`text-sm leading-5 text-neutral-400`}>
-                                    Showing <span css={tw`text-neutral-300`}>1</span> to <span css={tw`text-neutral-300`}>10</span> of <span css={tw`text-neutral-300`}>97</span> results
-                                </p>
-
-                                <div css={tw`flex flex-row ml-auto`}>
-                                    <nav css={tw`relative z-0 inline-flex shadow-sm`}>
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-l-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Previous">
-                                            <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                <path clipRule="evenodd" fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"/>
-                                            </svg>
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-500 text-neutral-50 focus:z-10 focus:outline-none focus:border-primary-300`}>
-                                            1
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                            2
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                            3
-                                        </a>
-
-                                        <span css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 border border-neutral-500 bg-neutral-600 text-neutral-200 cursor-default`}>
-                                            ...
-                                        </span>
-
-                                        <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                            7
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300  active:bg-neutral-100 active:text-neutral-700`}>
-                                            8
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                            9
-                                        </a>
-
-                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 -ml-px text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-r-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Next">
-                                            <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                <path clipRule="evenodd" fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
-                                            </svg>
-                                        </a>
-                                    </nav>
-                                </div>
-                            </div>
         </>
-                }
+    );
+};
+
+export default ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div css={tw`flex flex-col w-full`}>
+            <div css={tw`rounded-lg shadow-md bg-neutral-700`}>
+                {children}
             </div>
         </div>
     );

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

@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import getNests from '@/api/admin/nests/getNests';
+import getNests, { Context as NestsContext } from '@/api/swr/getNests';
-import { httpErrorToHuman } from '@/api/http';
 import NewNestButton from '@/components/admin/nests/NewNestButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import useFlash from '@/plugins/useFlash';
 import { AdminContext } from '@/state/admin';
 import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, { TableBody, TableHead, TableHeader, TableRow } from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
@@ -32,35 +30,35 @@ const RowCheckbox = ({ id }: { id: number}) => {
     );
 };
 
-export default () => {
+const NestsContainer = () => {
     const match = useRouteMatch();
 
-    const { addError, clearFlashes } = useFlash();
+    const { page, setPage } = useContext(NestsContext);
-    const [ loading, setLoading ] = useState(true);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: nests, error, isValidating } = getNests();
 
-    const nests = useDeepMemoize(AdminContext.useStoreState(state => state.nests.data));
+    useEffect(() => {
-    const setNests = AdminContext.useStoreActions(state => state.nests.setNests);
+        if (!error) {
+            clearFlashes('backups');
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'backups' });
+    }, [ error ]);
+
+    const length = nests?.items?.length || 0;
 
     const setSelectedNests = AdminContext.useStoreActions(actions => actions.nests.setSelectedNests);
     const selectedNestsLength = AdminContext.useStoreState(state => state.nests.selectedNests.length);
 
-    useEffect(() => {
-        setLoading(!nests.length);
-        clearFlashes('nests');
-
-        getNests()
-            .then(nests => setNests(nests))
-            .catch(error => {
-                console.error(error);
-                addError({ message: httpErrorToHuman(error), key: 'nests' });
-            })
-            .then(() => setLoading(false));
-    }, []);
-
     const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSelectedNests(e.currentTarget.checked ? (nests.map(nest => nest.id) || []) : []);
+        setSelectedNests(e.currentTarget.checked ? (nests?.items?.map(nest => nest.id) || []) : []);
     };
 
+    useEffect(() => {
+        setSelectedNests([]);
+    }, [ page ]);
+
     return (
         <AdminContentBlock>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
@@ -74,12 +72,20 @@ export default () => {
 
             <FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
 
-            <AdminTable
+            <AdminTable>
-                loading={loading}
+                { nests === undefined || (error && isValidating) ?
-                hasItems={nests.length > 0}
+                    <Loading/>
-                checked={selectedNestsLength === (nests.length === 0 ? -1 : nests.length)}
+                    :
+                    length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedNestsLength === (length === 0 ? -1 : length)}
                             onSelectAllClick={onSelectAllClick}
                         >
+                            <Pagination data={nests} onPageSelect={setPage}>
+                                <div css={tw`overflow-x-auto`}>
+                                    <table css={tw`w-full table-auto`}>
                                         <TableHead>
                                             <TableHeader name={'ID'}/>
                                             <TableHeader name={'Name'}/>
@@ -88,7 +94,7 @@ export default () => {
 
                                         <TableBody>
                                             {
-                        nests.map(nest => (
+                                                nests.items.map(nest => (
                                                     <TableRow key={nest.id}>
                                                         <td css={tw`pl-6`}>
                                                             <RowCheckbox id={nest.id}/>
@@ -105,7 +111,22 @@ export default () => {
                                                 ))
                                             }
                                         </TableBody>
+                                    </table>
+                                </div>
+                            </Pagination>
+                        </ContentWrapper>
+                }
             </AdminTable>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ page, setPage ] = useState<number>(1);
+
+    return (
+        <NestsContext.Provider value={{ page, setPage }}>
+            <NestsContainer/>
+        </NestsContext.Provider>
+    );
+};

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';
@@ -108,4 +108,13 @@ export default () => {
             </AdminTable>
         </AdminContentBlock>
     );
+}; */
+
+import React from 'react';
+
+export default () => {
+    return (
+        <>
+        </>
+    );
 };

tests/Integration/Api/Application/ApplicationApiIntegrationTestCase.php

@@ -65,6 +65,7 @@ abstract class ApplicationApiIntegrationTestCase extends IntegrationTestCase
      *
      * @param \Pterodactyl\Models\User $user
      * @param array $permissions
+     *
      * @return \Pterodactyl\Models\ApiKey
      */
     protected function createNewDefaultApiKey(User $user, array $permissions = []): ApiKey
@@ -102,6 +103,7 @@ abstract class ApplicationApiIntegrationTestCase extends IntegrationTestCase
      *
      * @param \Pterodactyl\Models\User $user
      * @param array $permissions
+     *
      * @return \Pterodactyl\Models\ApiKey
      */
     protected function createApiKey(User $user, array $permissions = []): ApiKey
@@ -125,7 +127,9 @@ abstract class ApplicationApiIntegrationTestCase extends IntegrationTestCase
      * Return a transformer that can be used for testing purposes.
      *
      * @param string $abstract
+     *
      * @return \Pterodactyl\Transformers\Api\Application\BaseTransformer
+     * @throws \Illuminate\Contracts\Container\BindingResolutionException
      */
     protected function getTransformer(string $abstract): BaseTransformer
     {