use useSQLQueryState hook

Author: karooolis

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import { parseAsString, useQueryState } from "nuqs";
+import { useQueryState } from "nuqs";
 import { Hex } from "viem";
 import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
@@ -12,15 +12,16 @@ import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { SQLEditor } from "./SQLEditor";
 import { TableSelector } from "./TableSelector";
 import { TablesViewer } from "./TablesViewer";
-import { usePaginationQueryState } from "./hooks/usePaginationQueryState";
+import { usePaginationQueryState } from "./hooks/usePaginationState";
+import { useSQLQueryState } from "./hooks/useSQLQueryState";
 
 export function Explorer() {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
   const [isLiveQuery, setIsLiveQuery] = useState(false);
   const [{ pageSize }] = usePaginationQueryState();
-  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
+  const { query, setQuery } = useSQLQueryState();
   const [selectedTableId] = useQueryState("tableId");
   const prevSelectedTableId = usePrevious(selectedTableId);
   const { data: tables } = useTablesQuery();

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

@@ -2,7 +2,6 @@
 
 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 { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Table } from "@latticexyz/config";
@@ -13,7 +12,8 @@ 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 { usePaginationQueryState } from "./hooks/usePaginationState";
+import { useSQLQueryState } from "./hooks/useSQLQueryState";
 import { useMonacoSuggestions } from "./useMonacoSuggestions";
 import { useQueryValidator } from "./useQueryValidator";
 import { getLimitOffset } from "./utils/getLimitOffset";
@@ -29,8 +29,8 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
   const [isUserTriggeredRefetch, setIsUserTriggeredRefetch] = useState(false);
-  const [query, setQuery] = useQueryState("query", { defaultValue: "" });
   const [pagination, setPagination] = usePaginationQueryState();
+  const { query, setQuery } = useSQLQueryState();
 
   const validateQuery = useQueryValidator(table);
   const {

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

@@ -34,7 +34,8 @@ 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 { usePaginationQueryState } from "./hooks/usePaginationState";
+import { useSQLQueryState } from "./hooks/useSQLQueryState";
 import { getLimitOffset } from "./utils/getLimitOffset";
 import { typeSortingFn } from "./utils/typeSortingFn";
 
@@ -50,7 +51,7 @@ type Props = {
 export function TablesViewer({ table, isLiveQuery }: Props) {
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
-  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
+  const { query, setQuery } = useSQLQueryState();
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
   const [pagination, setPagination] = usePaginationQueryState();

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

@@ -0,0 +1,9 @@
+import { parseAsString, useQueryState } from "nuqs";
+
+export function useSQLQueryState() {
+  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
+  return {
+    query: decodeURIComponent(query),
+    setQuery: (value: string) => setQuery(encodeURIComponent(value)),
+  };
+}