use pagination query hook, parse as json

Author: karooolis

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx

@@ -2,18 +2,18 @@
 
 import { CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
-import { parseAsJson, useQueryState } from "nuqs";
+import { useQueryState } from "nuqs";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Table } from "@latticexyz/config";
 import Editor from "@monaco-editor/react";
-import { PaginationState } from "@tanstack/react-table";
 import { Tooltip } from "../../../../../../components/Tooltip";
 import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormField } from "../../../../../../components/ui/Form";
 import { cn } from "../../../../../../utils";
 import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { PAGE_SIZE_OPTIONS, monacoOptions } from "./consts";
+import { usePaginationQueryState } from "./hooks/usePaginationQueryState";
 import { useMonacoSuggestions } from "./useMonacoSuggestions";
 import { useQueryValidator } from "./useQueryValidator";
 import { getLimitOffset } from "./utils/getLimitOffset";
@@ -30,13 +30,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const [isFocused, setIsFocused] = useState(false);
   const [isUserTriggeredRefetch, setIsUserTriggeredRefetch] = useState(false);
   const [query, setQuery] = useQueryState("query", { defaultValue: "" });
-  const [pagination, setPagination] = useQueryState(
-    "pagination",
-    parseAsJson<PaginationState>().withDefault({
-      pageIndex: 0,
-      pageSize: 10,
-    }),
-  );
+  const [pagination, setPagination] = usePaginationQueryState();
 
   const validateQuery = useQueryValidator(table);
   const {

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -34,6 +34,7 @@ import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { EditableTableCell } from "./EditableTableCell";
 import { ExportButton } from "./ExportButton";
 import { PAGE_SIZE_OPTIONS } from "./consts";
+import { usePaginationQueryState } from "./hooks/usePaginationQueryState";
 import { getLimitOffset } from "./utils/getLimitOffset";
 import { typeSortingFn } from "./utils/typeSortingFn";
 
@@ -52,15 +53,9 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
   const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
+  const [pagination, setPagination] = usePaginationQueryState();
   const { data: tableData, isPending, isFetching, isError, error } = useTableDataQuery({ table, query, isLiveQuery });
   const isLoading = isPending || (isFetching && !isLiveQuery);
-  const [pagination, setPagination] = useQueryState(
-    "pagination",
-    parseAsJson<PaginationState>().withDefault({
-      pageIndex: 0,
-      pageSize: 10,
-    }),
-  );
 
   const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(
     (updater) => {
@@ -77,7 +72,7 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
 
       return newPaginationState;
     },
-    [pagination, query, setQuery],
+    [pagination, setPagination, query, setQuery],
   );
 
   const tableColumns: ColumnDef<TDataRow>[] = useMemo(() => {

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/hooks/usePaginationQueryState.tsx

@@ -0,0 +1,12 @@
+import { parseAsJson, useQueryState } from "nuqs";
+import { PaginationState } from "@tanstack/react-table";
+
+export function usePaginationQueryState(defaultPageSize = 10) {
+  return useQueryState(
+    "pagination",
+    parseAsJson<PaginationState>().withDefault({
+      pageIndex: 0,
+      pageSize: defaultPageSize,
+    }),
+  );
+}