Include footer on the table

app/Exceptions/Model/DataValidationException.php

@@ -43,7 +43,7 @@ class DataValidationException extends PterodactylException implements HttpExcept
      *
      * @return int
      */
-    public function getStatusCode()
+    public function getStatusCode(): int
     {
         return 500;
     }
@@ -51,7 +51,7 @@ class DataValidationException extends PterodactylException implements HttpExcept
     /**
      * @return array
      */
-    public function getHeaders()
+    public function getHeaders(): array
     {
         return [];
     }

app/Http/Controllers/Api/Application/Users/UserController.php

@@ -20,23 +20,15 @@ use Pterodactyl\Http\Controllers\Api\Application\ApplicationApiController;
 
 class UserController extends ApplicationApiController
 {
-    private UserCreationService $creationService;
-    private UserDeletionService $deletionService;
-    private UserUpdateService $updateService;
-
     /**
      * UserController constructor.
      */
     public function __construct(
-        UserCreationService $creationService,
+        protected UserCreationService $creationService,
-        UserDeletionService $deletionService,
+        protected UserDeletionService $deletionService,
-        UserUpdateService $updateService
+        protected UserUpdateService $updateService
     ) {
         parent::__construct();
-
-        $this->creationService = $creationService;
-        $this->deletionService = $deletionService;
-        $this->updateService = $updateService;
     }
 
     /**
@@ -84,8 +76,6 @@ class UserController extends ApplicationApiController
      * Revocation errors are returned under the 'revocation_errors' key in the response
      * meta. If there are no errors this is an empty array.
      *
-     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
-     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      * @throws \Illuminate\Contracts\Container\BindingResolutionException
      */
     public function update(UpdateUserRequest $request, User $user): array

resources/scripts/api/http.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosInstance } from 'axios';
 import { store } from '@/state';
+import { Model } from '@/api/definitions';
 
 const http: AxiosInstance = axios.create({
     timeout: 20000,
@@ -88,6 +89,20 @@ export interface FractalResponseList {
     data: FractalResponseData[];
 }
 
+export interface FractalPaginatedResponse extends FractalResponseList {
+    meta: {
+        pagination: {
+            total: number;
+            count: number;
+            /* eslint-disable camelcase */
+            per_page: number;
+            current_page: number;
+            total_pages: number;
+            /* eslint-enable camelcase */
+        };
+    };
+}
+
 export interface PaginatedResult<T> {
     items: T[];
     pagination: PaginationDataSet;
@@ -150,3 +165,13 @@ export const withQueryBuilderParams = (data?: QueryBuilderParams): Record<string
         sorts: !sorts.length ? undefined : sorts.join(','),
     };
 };
+
+type TransformerFunc = (data: FractalResponseData) => Model;
+
+export const toPaginatedSet = <T extends TransformerFunc> (
+    response: FractalPaginatedResponse,
+    transformer: T,
+): PaginatedResult<ReturnType<T>> => ({
+        items: response.data.map(transformer) as ReturnType<T>[],
+        pagination: getPaginationSet(response.meta.pagination),
+    });

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -1,5 +1,12 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import http from '@/api/http';
+import http, {
+    FractalPaginatedResponse,
+    PaginatedResult,
+    PaginationDataSet,
+    QueryBuilderParams,
+    toPaginatedSet,
+    withQueryBuilderParams,
+} from '@/api/http';
 import { UUID } from '@/api/definitions';
 import { Transformers, User } from '@definitions/admin';
 import { Transition } from '@/components/elements/transitions';
@@ -7,31 +14,58 @@ import { LockOpenIcon, PlusIcon, SupportIcon, TrashIcon } from '@heroicons/react
 import { Button } from '@/components/elements/button/index';
 import { Checkbox, InputField } from '@/components/elements/inputs';
 import UserTableRow from '@/components/admin/users/UserTableRow';
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr';
+import { AxiosError } from 'axios';
 
-const UsersContainerV2 = () => {
+const useGetUsers = (
-    const [ users, setUsers ] = useState<User[]>([]);
+    params?: QueryBuilderParams<'id' | 'email' | 'uuid'>,
+    config?: SWRConfiguration,
+): SWRResponse<PaginatedResult<User>, AxiosError> => {
+    return useSWR<PaginatedResult<User>>([ '/api/application/users', params ], async () => {
+        const { data } = await http.get<FractalPaginatedResponse>(
+            '/api/application/users',
+            { params: withQueryBuilderParams(params) },
+        );
+
+        return toPaginatedSet(data, Transformers.toUser);
+    }, config || { revalidateOnMount: true, revalidateOnFocus: false });
+};
+
+const PaginationFooter = ({ pagination, span }: { span: number; pagination: PaginationDataSet }) => {
+    const start = (pagination.currentPage - 1) * pagination.perPage;
+    const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
+
+    return (
+        <tfoot>
+            <tr className={'bg-neutral-800'}>
+                <td scope={'col'} colSpan={span} className={'px-4 py-2'}>
+                    <p className={'text-sm text-neutral-500'}>
+                        Showing <span className={'font-semibold text-neutral-400'}>{Math.max(start, 1)}</span> to&nbsp;
+                        <span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
+                        <span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
+                    </p>
+                </td>
+            </tr>
+        </tfoot>
+    );
+};
+
+const UsersContainer = () => {
+    const { data: users } = useGetUsers();
     const [ selected, setSelected ] = useState<UUID[]>([]);
 
     useEffect(() => {
         document.title = 'Admin | Users';
     }, []);
 
-    useEffect(() => {
-        http.get('/api/application/users')
-            .then(({ data }) => {
-                setUsers(data.data.map(Transformers.toUser));
-            })
-            .catch(console.error);
-    }, []);
-
     const onRowChange = (user: User, checked: boolean) => {
         setSelected((state) => {
             return checked ? [ ...state, user.uuid ] : selected.filter((uuid) => uuid !== user.uuid);
         });
     };
 
-    const selectAllChecked = users.length > 0 && selected.length > 0;
+    const selectAllChecked = users && users.items.length > 0 && selected.length > 0;
-    const onSelectAll = () => setSelected((state) => state.length > 0 ? [] : users.map(({ uuid }) => uuid));
+    const onSelectAll = () => setSelected((state) => state.length > 0 ? [] : users?.items.map(({ uuid }) => uuid) || []);
 
     return (
         <div>
@@ -44,7 +78,7 @@ const UsersContainerV2 = () => {
                 <div className={'mr-6'}>
                     <Checkbox
                         checked={selectAllChecked}
-                        indeterminate={selected.length !== users.length}
+                        indeterminate={selected.length !== users?.items.length}
                         onChange={onSelectAll}
                     />
                 </div>
@@ -61,7 +95,7 @@ const UsersContainerV2 = () => {
                         <div className={'flex-1'}>
                             <Checkbox
                                 checked={selectAllChecked}
-                                indeterminate={selected.length !== users.length}
+                                indeterminate={selected.length !== users?.items.length}
                                 onChange={onSelectAll}
                             />
                         </div>
@@ -87,7 +121,7 @@ const UsersContainerV2 = () => {
                     </tr>
                 </thead>
                 <tbody>
-                    {users.map(user => (
+                    {users?.items.map(user => (
                         <UserTableRow
                             key={user.uuid}
                             user={user}
@@ -96,9 +130,10 @@ const UsersContainerV2 = () => {
                         />
                     ))}
                 </tbody>
+                {users && <PaginationFooter span={4} pagination={users.pagination}/>}
             </table>
         </div>
     );
 };
 
-export default UsersContainerV2;
+export default UsersContainer;

resources/scripts/routers/AdminRouter.tsx

@@ -45,7 +45,7 @@ import {
 import CollapsedIcon from '@/assets/images/pterodactyl.svg';
 import Sidebar from '@/components/admin/Sidebar';
 import useUserPersistedState from '@/plugins/useUserPersistedState';
-import UsersContainerV2 from '@/components/admin/users/UsersContainerV2';
+import UsersContainer from '@/components/admin/users/UsersContainer';
 
 const AdminRouter = ({ location, match }: RouteComponentProps) => {
     const email = useStoreState((state: State<ApplicationStore>) => state.user.data!.email);
@@ -132,7 +132,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
                         <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
                         <Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
-                        <Route path={`${match.path}/users`} component={UsersContainerV2} exact/>
+                        <Route path={`${match.path}/users`} component={UsersContainer} exact/>
                         <Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
                         <Route path={`${match.path}/users/:id`} component={UserRouter}/>
                         <Route path={`${match.path}/roles`} component={RolesContainer} exact/>