ui(admin): cleanup table hooks

resources/scripts/api/admin/admin.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+
+export interface ListContext<T> {
+    page: number;
+    setPage: (page: ((p: number) => number) | number) => void;
+
+    filters: T | null;
+    setFilters: (filters: ((f: T | null) => T | null) | T | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: ((p: boolean) => boolean) | boolean) => void;
+}
+
+function create<T> () {
+    return createContext<ListContext<T>>({
+        page: 1,
+        setPage: () => 1,
+
+        filters: null,
+        setFilters: () => null,
+
+        sort: null,
+        setSort: () => null,
+
+        sortDirection: false,
+        setSortDirection: () => false,
+    });
+}
+
+export { create as createContext };

resources/scripts/api/admin/databases/getDatabases.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 
 export interface Database {
     id: number;
@@ -34,33 +35,7 @@ export interface Filters {
     host?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/locations/getLocations.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 
 export interface Location {
     id: number;
@@ -24,33 +25,7 @@ export interface Filters {
     long?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/mounts/getMounts.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, FractalResponseList, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
 import { Server, rawDataToServer } from '@/api/admin/servers/getServers';
@@ -50,33 +51,7 @@ export interface Filters {
     target?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

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

@@ -1,6 +1,7 @@
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
 export interface Filters {
@@ -8,33 +9,7 @@ export interface Filters {
     name?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (nestId: number, include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

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

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, FractalResponseList, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
 export interface Nest {
@@ -36,33 +37,7 @@ export interface Filters {
     name?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/nodes/getNodes.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
 
@@ -32,7 +33,7 @@ export interface Node {
     relations: {
         databaseHost: Database | undefined;
         location: Location | undefined;
-    };
+    }
 }
 
 export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@@ -77,33 +78,7 @@ export interface Filters {
     /* eslint-enable camelcase */
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/roles/getRoles.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 
 export interface Role {
     id: number;
@@ -19,33 +20,7 @@ export interface Filters {
     name?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/servers/getServers.ts

@@ -1,7 +1,8 @@
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
 import { User, rawDataToUser } from '@/api/admin/users/getUsers';
 
@@ -49,7 +50,7 @@ export interface Server {
         egg: Egg | undefined;
         node: Node | undefined;
         user: User | undefined;
-    };
+    }
 }
 
 export const rawDataToServer = ({ attributes }: FractalResponseData): Server => ({
@@ -109,33 +110,7 @@ export interface Filters {
     /* eslint-enable camelcase */
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/api/admin/users/getUsers.ts

@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import useSWR from 'swr';
+import { createContext } from '@/api/admin/admin';
 
 export interface User {
     id: number;
@@ -45,33 +46,7 @@ export interface Filters {
     lastName?: string;
 }
 
-interface ctx {
+export const Context = createContext<Filters>();
-    page: number;
-    setPage: (value: number | ((s: number) => number)) => void;
-
-    filters: Filters | null;
-    setFilters: (filters: Filters | null) => void;
-
-    sort: string | null;
-    setSort: (sort: string | null) => void;
-
-    sortDirection: boolean;
-    setSortDirection: (direction: boolean) => void;
-}
-
-export const Context = createContext<ctx>({
-    page: 1,
-    setPage: () => 1,
-
-    filters: null,
-    setFilters: () => null,
-
-    sort: null,
-    setSort: () => null,
-
-    sortDirection: false,
-    setSortDirection: () => false,
-});
 
 export default (include: string[] = []) => {
     const { page, filters, sort, sortDirection } = useContext(Context);

resources/scripts/components/admin/AdminTable.tsx

@@ -8,6 +8,38 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import { PaginatedResult, PaginationDataSet } from '@/api/http';
 
+interface Hooks<T> {
+    page: number;
+    setPage: (page: ((p: number) => number) | number) => void;
+
+    filters: T | null;
+    setFilters: (filters: ((f: T | null) => T | null) | T | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: ((p: boolean) => boolean) | boolean) => void;
+}
+
+export function useTableHooks<T> (): Hooks<T> {
+    const [ page, setPage ] = useState<number>(1);
+    const [ filters, setFilters ] = useState<T | null>(null);
+    const [ sort, setSortState ] = useState<string | null>(null);
+    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
+
+    const setSort = (newSort: string | null) => {
+        if (sort === newSort) {
+            setSortDirection(!sortDirection);
+        } else {
+            setSortState(newSort);
+            setSortDirection(false);
+        }
+    };
+
+    return { page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection };
+}
+
 export const TableHeader = ({ name, onClick, direction }: { name?: string, onClick?: (e: React.MouseEvent) => void, direction?: number | null }) => {
     if (!name) {
         return <th css={tw`px-6 py-2`}/>;

resources/scripts/components/admin/databases/DatabasesContainer.tsx

@@ -7,7 +7,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
@@ -156,22 +166,10 @@ const DatabasesContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <DatabasesContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <DatabasesContext.Provider value={hooks}>
             <DatabasesContainer/>
         </DatabasesContext.Provider>
     );

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -7,7 +7,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import NewLocationButton from '@/components/admin/locations/NewLocationButton';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
@@ -145,22 +155,10 @@ const LocationsContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <LocationsContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <LocationsContext.Provider value={hooks}>
             <LocationsContainer/>
         </LocationsContext.Provider>
     );

resources/scripts/components/admin/mounts/MountsContainer.tsx

@@ -7,7 +7,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
@@ -185,22 +195,10 @@ const MountsContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <MountsContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <MountsContext.Provider value={hooks}>
             <MountsContainer/>
         </MountsContext.Provider>
     );

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

@@ -5,7 +5,17 @@ import useFlash from '@/plugins/useFlash';
 import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import { Context } from '@/components/admin/nests/NestEditContainer';
 
 const RowCheckbox = ({ id }: { id: number}) => {
@@ -127,22 +137,10 @@ const EggsTable = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <EggsContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <EggsContext.Provider value={hooks}>
             <EggsTable/>
         </EggsContext.Provider>
     );

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

@@ -9,7 +9,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
@@ -145,22 +155,10 @@ const NestsContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <NestsContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <NestsContext.Provider value={hooks}>
             <NestsContainer/>
         </NestsContext.Provider>
     );

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -8,7 +8,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { bytesToHuman, megabytesToBytes } from '@/helpers';
@@ -196,22 +206,10 @@ const NodesContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <NodesContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <NodesContext.Provider value={hooks}>
             <NodesContainer/>
         </NodesContext.Provider>
     );

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

@@ -8,7 +8,17 @@ 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, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
 const RowCheckbox = ({ id }: { id: number }) => {
@@ -145,22 +155,10 @@ const RolesContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <RolesContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <RolesContext.Provider value={hooks}>
             <RolesContainer/>
         </RolesContext.Provider>
     );

resources/scripts/components/admin/servers/ServersContainer.tsx

@@ -1,7 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
 import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
+import AdminTable, {
+    ContentWrapper,
+    Loading,
+    NoItems,
+    Pagination,
+    TableBody,
+    TableHead,
+    TableHeader,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -196,22 +205,10 @@ const ServersContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <ServersContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <ServersContext.Provider value={hooks}>
             <ServersContainer/>
         </ServersContext.Provider>
     );

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

@@ -2,7 +2,16 @@ import React, { useContext, useEffect, useState } from 'react';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import getUsers, { Context as UsersContext, Filters } from '@/api/admin/users/getUsers';
-import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
+import AdminTable, {
+    ContentWrapper,
+    Loading,
+    NoItems,
+    Pagination,
+    TableBody,
+    TableHead,
+    TableHeader,
+    useTableHooks
+} from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -173,22 +182,10 @@ const UsersContainer = () => {
 };
 
 export default () => {
-    const [ page, setPage ] = useState<number>(1);
+    const hooks = useTableHooks<Filters>();
-    const [ filters, setFilters ] = useState<Filters | null>(null);
-    const [ sort, setSortState ] = useState<string | null>(null);
-    const [ sortDirection, setSortDirection ] = useState<boolean>(false);
-
-    const setSort = (newSort: string | null) => {
-        if (sort === newSort) {
-            setSortDirection(!sortDirection);
-        } else {
-            setSortState(newSort);
-            setSortDirection(false);
-        }
-    };
 
     return (
-        <UsersContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <UsersContext.Provider value={hooks}>
             <UsersContainer/>
         </UsersContext.Provider>
     );