Paginate servers on frontend; closes pterodactyl#2106

Author: DaneEveritt

resources/scripts/api/getServers.ts

@@ -1,13 +1,19 @@
 import { rawDataToServerObject, Server } from '@/api/server/getServer';
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 
-export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult<Server>> => {
+interface QueryParams {
+    query?: string;
+    page?: number;
+    includeAdmin?: boolean;
+}
+
+export default ({ query, page = 1, includeAdmin = false }: QueryParams): Promise<PaginatedResult<Server>> => {
     return new Promise((resolve, reject) => {
         http.get('/api/client', {
             params: {
-                include: [ 'allocation' ],
                 type: includeAdmin ? 'all' : undefined,
                 'filter[name]': query,
+                page,
             },
         })
             .then(({ data }) => resolve({

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Server } from '@/api/server/getServer';
 import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
@@ -11,15 +11,17 @@ import Switch from '@/components/elements/Switch';
 import tw from 'twin.macro';
 import useSWR from 'swr';
 import { PaginatedResult } from '@/api/http';
+import Pagination from '@/components/elements/Pagination';
 
 export default () => {
     const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const [ page, setPage ] = useState(1);
     const { rootAdmin } = useStoreState(state => state.user.data!);
-    const [ showAdmin, setShowAdmin ] = usePersistedState('show_all_servers', false);
+    const [ includeAdmin, setIncludeAdmin ] = usePersistedState('show_all_servers', false);
 
     const { data: servers, error } = useSWR<PaginatedResult<Server>>(
-        [ '/api/client/servers', showAdmin ],
-        () => getServers(undefined, showAdmin)
+        [ '/api/client/servers', includeAdmin, page ],
+        () => getServers({ includeAdmin, page }),
     );
 
     useEffect(() => {
@@ -32,26 +34,34 @@ export default () => {
             {rootAdmin &&
             <div css={tw`mb-2 flex justify-end items-center`}>
                 <p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
-                    {showAdmin ? 'Showing all servers' : 'Showing your servers'}
+                    {includeAdmin ? 'Showing all servers' : 'Showing your servers'}
                 </p>
                 <Switch
                     name={'show_all_servers'}
-                    defaultChecked={showAdmin}
-                    onChange={() => setShowAdmin(s => !s)}
+                    defaultChecked={includeAdmin}
+                    onChange={() => setIncludeAdmin(s => !s)}
                 />
             </div>
             }
             {!servers ?
                 <Spinner centered size={'large'}/>
                 :
-                servers.items.length > 0 ?
-                    servers.items.map((server, index) => (
-                        <ServerRow key={server.uuid} server={server} css={index > 0 ? tw`mt-2` : undefined}/>
-                    ))
-                    :
-                    <p css={tw`text-center text-sm text-neutral-400`}>
-                        There are no servers associated with your account.
-                    </p>
+                <Pagination data={servers} onPageSelect={setPage}>
+                    {({ items }) => (
+                        items.length > 0 ?
+                            items.map((server, index) => (
+                                <ServerRow
+                                    key={server.uuid}
+                                    server={server}
+                                    css={index > 0 ? tw`mt-2` : undefined}
+                                />
+                            ))
+                            :
+                            <p css={tw`text-center text-sm text-neutral-400`}>
+                                There are no servers associated with your account.
+                            </p>
+                    )}
+                </Pagination>
             }
         </PageContentBlock>
     );

resources/scripts/components/dashboard/ServerRow.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faServer, faEthernet, faMicrochip, faMemory, faHdd } from '@fortawesome/free-solid-svg-icons';
+import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage';
 import { bytesToHuman, megabytesToHuman } from '@/helpers';
 import tw from 'twin.macro';

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -57,7 +57,7 @@ export default ({ ...props }: Props) => {
         setSubmitting(false);
         clearFlashes('search');
 
-        getServers(term)
+        getServers({ query: term })
             .then(servers => setServers(servers.items.filter((_, index) => index < 5)))
             .catch(error => {
                 console.error(error);

resources/scripts/components/elements/Pagination.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { PaginatedResult } from '@/api/http';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import Button from '@/components/elements/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+
+interface RenderFuncProps<T> {
+    items: T[];
+    isLastPage: boolean;
+    isFirstPage: boolean;
+}
+
+interface Props<T> {
+    data: PaginatedResult<T>;
+    showGoToLast?: boolean;
+    showGoToFirst?: boolean;
+    onPageSelect: (page: number) => void;
+    children: (props: RenderFuncProps<T>) => React.ReactNode;
+}
+
+const Block = styled(Button)`
+    ${tw`p-0 w-10 h-10`}
+    
+    &:not(:last-of-type) {
+        ${tw`mr-2`};
+    }
+`;
+
+function Pagination<T> ({ data: { items, pagination }, onPageSelect, children }: Props<T>) {
+    const isFirstPage = pagination.currentPage === 1;
+    const isLastPage = pagination.currentPage >= pagination.totalPages;
+
+    const pages = [];
+
+    // Start two spaces before the current page. If that puts us before the starting page default
+    // to the first page as the starting point.
+    const start = Math.max(pagination.currentPage - 2, 1);
+    const end = Math.min(pagination.totalPages, pagination.currentPage + 5);
+
+    for (let i = start; i <= end; i++) {
+        pages.push(i);
+    }
+
+    return (
+        <>
+            {children({ items, isFirstPage, isLastPage })}
+            {(pages.length > 1) &&
+            <div css={tw`mt-4 flex justify-center`}>
+                {(pages[0] > 1 && !isFirstPage) &&
+                <Block
+                    isSecondary
+                    color={'primary'}
+                    onClick={() => onPageSelect(1)}
+                >
+                    <FontAwesomeIcon icon={faAngleDoubleLeft}/>
+                </Block>
+                }
+                {
+                    pages.map(i => (
+                        <Block
+                            isSecondary={pagination.currentPage !== i}
+                            color={'primary'}
+                            key={`block_page_${i}`}
+                            onClick={() => onPageSelect(i)}
+                        >
+                            {i}
+                        </Block>
+                    ))
+                }
+                {(pages[4] < pagination.totalPages && !isLastPage) &&
+                <Block
+                    isSecondary
+                    color={'primary'}
+                    onClick={() => onPageSelect(pagination.totalPages)}
+                >
+                    <FontAwesomeIcon icon={faAngleDoubleRight}/>
+                </Block>
+                }
+            </div>
+            }
+        </>
+    );
+}
+
+export default Pagination;