bananas-commerce-admin/src/components/Table/useTableSearchParams.ts

What's this, an admin for apes?

import { useCallback, useMemo } from "react";
import { useSearchParams } from "react-router-dom";

import { TableContextProps } from "../../contexts/TableContext";

export interface TableSearchDefaults {
  page?: number;
  rowsPerPage?: number;
}

export const useTableSearchParams = (
  defaults?: TableSearchDefaults,
): Pick<TableContextProps, "page" | "rowsPerPage" | "changePage" | "changeRowsPerPage"> => {
  const [searchParams, setSearchParams] = useSearchParams();

  const page = useMemo(
    () => Number.parseInt(searchParams.get("page") ?? defaults?.page?.toString() ?? "0"),
    [searchParams],
  );

  const changePage = useCallback(
    (_: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
      const params = new URLSearchParams(searchParams);
      params.set("page", newPage.toString());
      setSearchParams(params);
    },
    [searchParams, setSearchParams],
  );

  const rowsPerPage = useMemo(
    () =>
      Number.parseInt(searchParams.get("page_size") ?? defaults?.rowsPerPage?.toString() ?? "100"),
    [searchParams, defaults],
  );

  const changeRowsPerPage = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const newRowsPerPage = Number.parseInt(event.target.value);
      const params = new URLSearchParams(searchParams);
      params.set("page_size", newRowsPerPage.toString());
      params.set("page", "0");
      setSearchParams(params);
    },
    [searchParams, setSearchParams],
  );

  return {
    page,
    changePage,
    rowsPerPage,
    changeRowsPerPage,
  };
};