feat: sync search using atoms

src/app/explorer/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const searchAtom = atom<string | undefined>(undefined);

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -4,29 +4,31 @@ import { Button } from "@/components/ui/Button";
 import { env } from "@/lib/env";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
-import { useSearchParams } from "next/navigation";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
+import { searchAtom } from "../atoms";
 import { GuildCard } from "./GuildCard";
 
 const pageSize = 24;
 
 export const InfiniteScrollGuilds = () => {
-  const searchParams = useSearchParams();
+  const search = useAtomValue(searchAtom);
   const fetchGuilds = useCallback(
     async ({ pageParam }: { pageParam: number }) =>
       (
         await fetch(
-          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${pageSize}&search=${searchParams?.get("search") || ""}`,
+          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${pageSize}&search=${search}`,
         )
       ).json() as Promise<PaginatedResponse<Guild>>,
-    [searchParams],
+    [search],
   );
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      queryKey: ["guilds", searchParams.toString()],
+      queryKey: ["guilds", search],
       queryFn: fetchGuilds,
       initialPageParam: 1,
+      enabled: search !== undefined,
       getNextPageParam: (lastPage) =>
         lastPage.total / lastPage.pageSize <= lastPage.page
           ? undefined

src/app/explorer/components/Search.tsx

@@ -2,8 +2,10 @@
 
 import { Input } from "@/components/ui/Input";
 import { useDebouncedValue } from "foxact/use-debounced-value";
+import { useSetAtom } from "jotai";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import { searchAtom } from "../atoms";
 
 export const Search = () => {
   const router = useRouter();
@@ -12,7 +14,12 @@ export const Search = () => {
   const [value, setValue] = useState(
     searchParams?.get("search")?.toString() || "",
   );
-  const _debouncedValue = useDebouncedValue(value, 200);
+
+  const debouncedValue = useDebouncedValue(value, 200);
+  const setSearch = useSetAtom(searchAtom);
+  useEffect(() => {
+    setSearch(debouncedValue);
+  }, [debouncedValue]);
 
   useEffect(() => {
     const newSearchParams = new URLSearchParams(