Paginate servers on frontend; closes #2106

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);