ui(admin): cleanup table hooks

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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     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 [ 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);
-        }
-    };
+    const hooks = useTableHooks<Filters>();
 
     return (
-        <UsersContext.Provider value={{ page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection }}>
+        <UsersContext.Provider value={hooks}>
             <UsersContainer/>
         </UsersContext.Provider>
     );