From 8f90f27f76012429014a70c02b4f5c4d6115ce6c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 06:47:30 +0100
Subject: [PATCH] feat: sync search using atoms

---
 src/app/explorer/atoms.ts                            |  3 +++
 src/app/explorer/components/InfiniteScrollGuilds.tsx | 12 +++++++-----
 src/app/explorer/components/Search.tsx               |  9 ++++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 src/app/explorer/atoms.ts

diff --git a/src/app/explorer/atoms.ts b/src/app/explorer/atoms.ts
new file mode 100644
index 0000000000..0fa04b9ce8
--- /dev/null
+++ b/src/app/explorer/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const searchAtom = atom<string | undefined>(undefined);
diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
index 18652a6a1e..2788adaf29 100644
--- a/src/app/explorer/components/InfiniteScrollGuilds.tsx
+++ b/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
diff --git a/src/app/explorer/components/Search.tsx b/src/app/explorer/components/Search.tsx
index d8e39fa73b..395539cf62 100644
--- a/src/app/explorer/components/Search.tsx
+++ b/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(