set page based on query

latticexyz · Feb 7, 2025 · c84b9e2 · c84b9e2
1 parent ecaead9
commit c84b9e2
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
@@ -2,7 +2,7 @@
 
 import { CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
-import { useQueryState } from "nuqs";
+import { parseAsInteger, useQueryState } from "nuqs";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Table } from "@latticexyz/config";
@@ -12,9 +12,10 @@ import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormField } from "../../../../../../components/ui/Form";
 import { cn } from "../../../../../../utils";
 import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
-import { monacoOptions } from "./consts";
+import { PAGE_SIZE_OPTIONS, monacoOptions } from "./consts";
 import { useMonacoSuggestions } from "./useMonacoSuggestions";
 import { useQueryValidator } from "./useQueryValidator";
+import { getLimitOffset } from "./utils/getLimitOffset";
 
 type Props = {
   table?: Table;
@@ -28,6 +29,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 [, setPage] = useQueryState("page", parseAsInteger.withDefault(0));
 
   const validateQuery = useQueryValidator(table);
   const {
@@ -52,6 +54,17 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const handleSubmit = form.handleSubmit(({ query }) => {
     if (validateQuery(query)) {
       setQuery(query);
+
+      // Set the page based on the query
+      const { limit, offset } = getLimitOffset(query);
+      if (limit == null || offset == null) {
+        setPage(0);
+      } else if (PAGE_SIZE_OPTIONS.includes(limit) && (offset === 0 || offset % limit === 0)) {
+        setPage(offset / limit);
+      } else {
+        setPage(0);
+      }
+
       setIsUserTriggeredRefetch(true);
       refetch().finally(() => setIsUserTriggeredRefetch(false));
     }