diff --git a/src/pages/transactions/TransactionsTable.tsx b/src/pages/transactions/TransactionsTable.tsx index bc0310b..a02073b 100644 --- a/src/pages/transactions/TransactionsTable.tsx +++ b/src/pages/transactions/TransactionsTable.tsx @@ -8,9 +8,11 @@ import { Link } from "react-router-dom"; import { KristTransaction } from "@api/types"; -import { lookupTransactions, LookupTransactionsOptions, LookupTransactionsResponse, LookupTransactionType } from "@api/lookup"; -import { useMalleablePagination } from "@utils/table"; -import { useIntegerSetting } from "@utils/settings"; +import { + lookupTransactions, LookupTransactionsOptions, LookupTransactionsResponse, + LookupTransactionType +} from "@api/lookup"; +import { useMalleablePagination, useTableHistory } from "@utils/table"; import { ListingType } from "./TransactionsPage"; @@ -75,13 +77,9 @@ }: Props): JSX.Element { const { t } = useTranslation(); - const defaultPageSize = useIntegerSetting("defaultPageSize"); - const [loading, setLoading] = useState(true); const [res, setRes] = useState(); - const [options, setOptions] = useState({ - limit: defaultPageSize, - offset: 0, + const { options, setOptions } = useTableHistory({ orderBy: "time", // Equivalent to sorting by ID order: "DESC" }); diff --git a/src/utils/table.tsx b/src/utils/table.tsx index a354c4a..8b056f2 100644 --- a/src/utils/table.tsx +++ b/src/utils/table.tsx @@ -9,6 +9,8 @@ import { useTranslation, TFunction } from "react-i18next"; import { useIntegerSetting } from "./settings"; +import { useHistory, useLocation } from "react-router-dom"; + import Debug from "debug"; const debug = Debug("kristweb:table"); @@ -26,7 +28,7 @@ export const handleLookupTableChange = ( defaultPageSize: number, - setOptions: Dispatch>>, + setOptions: (opts: LookupFilterOptionsBase) => void, setPaginationPos?: Dispatch> ) => (pagination: TablePaginationConfig, _: unknown, sorter: SorterResult | SorterResult[]): void => { @@ -91,7 +93,7 @@ results: ResultT[] | undefined, // Only really used for type inference totalKey: string, options: LookupFilterOptionsBase, - setOptions: Dispatch>>, + setOptions: (opts: LookupFilterOptionsBase) => void, setPagination?: Dispatch> ): { paginationTableProps: Pick, "onChange" | "pagination">; @@ -171,3 +173,32 @@ if (opts.order) qs.append("order", opts.order); return qs; } + +export function useTableHistory< + OptionsT extends LookupFilterOptionsBase +>( + defaults: Partial & Pick +): { + options: OptionsT; + setOptions: (opts: OptionsT) => void; +} { + // Used to get/set the browser history state + const history = useHistory(); + const location = useLocation(); + + const defaultPageSize = useIntegerSetting("defaultPageSize"); + + const [options, setOptions] = useState({ + limit: defaults.limit ?? defaultPageSize, + offset: defaults.offset ?? 0, + orderBy: defaults.orderBy, + order: defaults.order + } as OptionsT); + + function wrappedSetOptions(opts: OptionsT) { + debug("table calling setOptions:", opts); + return setOptions(opts); + } + + return { options, setOptions: wrappedSetOptions }; +}