From 7524bbe8eeb978bf05190170d822c284471aa25b Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Mon, 19 Jul 2021 14:34:10 -0600 Subject: [PATCH] ui(admin): cleanup table hooks --- resources/scripts/api/admin/admin.ts | 33 +++++++++++++++++++ .../api/admin/databases/getDatabases.ts | 31 ++--------------- .../api/admin/locations/getLocations.ts | 31 ++--------------- .../scripts/api/admin/mounts/getMounts.ts | 31 ++--------------- resources/scripts/api/admin/nests/getEggs.ts | 31 ++--------------- resources/scripts/api/admin/nests/getNests.ts | 31 ++--------------- resources/scripts/api/admin/nodes/getNodes.ts | 33 +++---------------- resources/scripts/api/admin/roles/getRoles.ts | 31 ++--------------- .../scripts/api/admin/servers/getServers.ts | 33 +++---------------- resources/scripts/api/admin/users/getUsers.ts | 31 ++--------------- .../scripts/components/admin/AdminTable.tsx | 32 ++++++++++++++++++ .../admin/databases/DatabasesContainer.tsx | 28 ++++++++-------- .../admin/locations/LocationsContainer.tsx | 28 ++++++++-------- .../admin/mounts/MountsContainer.tsx | 28 ++++++++-------- .../components/admin/nests/NestEggTable.tsx | 28 ++++++++-------- .../components/admin/nests/NestsContainer.tsx | 28 ++++++++-------- .../components/admin/nodes/NodesContainer.tsx | 28 ++++++++-------- .../components/admin/roles/RolesContainer.tsx | 28 ++++++++-------- .../admin/servers/ServersContainer.tsx | 27 +++++++-------- .../components/admin/users/UsersContainer.tsx | 27 +++++++-------- 20 files changed, 209 insertions(+), 389 deletions(-) create mode 100644 resources/scripts/api/admin/admin.ts diff --git a/resources/scripts/api/admin/admin.ts b/resources/scripts/api/admin/admin.ts new file mode 100644 index 000000000..54161f2b0 --- /dev/null +++ b/resources/scripts/api/admin/admin.ts @@ -0,0 +1,33 @@ +import { createContext } from 'react'; + +export interface ListContext { + 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 () { + return createContext>({ + page: 1, + setPage: () => 1, + + filters: null, + setFilters: () => null, + + sort: null, + setSort: () => null, + + sortDirection: false, + setSortDirection: () => false, + }); +} + +export { create as createContext }; diff --git a/resources/scripts/api/admin/databases/getDatabases.ts b/resources/scripts/api/admin/databases/getDatabases.ts index 9a697051a..75ee30e3f 100644 --- a/resources/scripts/api/admin/databases/getDatabases.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/locations/getLocations.ts b/resources/scripts/api/admin/locations/getLocations.ts index dc6ac6d4d..dc2936fff 100644 --- a/resources/scripts/api/admin/locations/getLocations.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/mounts/getMounts.ts b/resources/scripts/api/admin/mounts/getMounts.ts index a8cff9a0f..55b6346ea 100644 --- a/resources/scripts/api/admin/mounts/getMounts.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/nests/getEggs.ts b/resources/scripts/api/admin/nests/getEggs.ts index 9796fc367..038efd719 100644 --- a/resources/scripts/api/admin/nests/getEggs.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (nestId: number, include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/nests/getNests.ts b/resources/scripts/api/admin/nests/getNests.ts index 78bfe964c..82946c69e 100644 --- a/resources/scripts/api/admin/nests/getNests.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/nodes/getNodes.ts b/resources/scripts/api/admin/nodes/getNodes.ts index 0d146e9c7..7db9612c5 100644 --- a/resources/scripts/api/admin/nodes/getNodes.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/roles/getRoles.ts b/resources/scripts/api/admin/roles/getRoles.ts index a8de9ff8e..60f61f017 100644 --- a/resources/scripts/api/admin/roles/getRoles.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/servers/getServers.ts b/resources/scripts/api/admin/servers/getServers.ts index 1a220dd04..2923c0c08 100644 --- a/resources/scripts/api/admin/servers/getServers.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/api/admin/users/getUsers.ts b/resources/scripts/api/admin/users/getUsers.ts index 12f1d81af..52b3fedd1 100644 --- a/resources/scripts/api/admin/users/getUsers.ts +++ b/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 { - 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({ - page: 1, - setPage: () => 1, - - filters: null, - setFilters: () => null, - - sort: null, - setSort: () => null, - - sortDirection: false, - setSortDirection: () => false, -}); +export const Context = createContext(); export default (include: string[] = []) => { const { page, filters, sort, sortDirection } = useContext(Context); diff --git a/resources/scripts/components/admin/AdminTable.tsx b/resources/scripts/components/admin/AdminTable.tsx index 09cbd0812..a17f024c1 100644 --- a/resources/scripts/components/admin/AdminTable.tsx +++ b/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 { + 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 (): Hooks { + const [ page, setPage ] = useState(1); + const [ filters, setFilters ] = useState(null); + const [ sort, setSortState ] = useState(null); + const [ sortDirection, setSortDirection ] = useState(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 ; diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx index f9cb17d9a..5cdc057e5 100644 --- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx index 23dcb9405..190843740 100644 --- a/resources/scripts/components/admin/locations/LocationsContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx index 8531120ae..415a69078 100644 --- a/resources/scripts/components/admin/mounts/MountsContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/nests/NestEggTable.tsx b/resources/scripts/components/admin/nests/NestEggTable.tsx index 84342c038..4bb573b32 100644 --- a/resources/scripts/components/admin/nests/NestEggTable.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx index afb488ba6..6b89518da 100644 --- a/resources/scripts/components/admin/nests/NestsContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx index 85581cace..f55fd7247 100644 --- a/resources/scripts/components/admin/nodes/NodesContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx index 5396c40b8..1ef9a70a5 100644 --- a/resources/scripts/components/admin/roles/RolesContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx index d38a1f668..a97d9e880 100644 --- a/resources/scripts/components/admin/servers/ServersContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + ); diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx index 2d67857c3..66038310d 100644 --- a/resources/scripts/components/admin/users/UsersContainer.tsx +++ b/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(1); - const [ filters, setFilters ] = useState(null); - const [ sort, setSortState ] = useState(null); - const [ sortDirection, setSortDirection ] = useState(false); - - const setSort = (newSort: string | null) => { - if (sort === newSort) { - setSortDirection(!sortDirection); - } else { - setSortState(newSort); - setSortDirection(false); - } - }; + const hooks = useTableHooks(); return ( - + );