refactor: store query state in the URL

src/app/explorer/_components/Explorer.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { walletSelectorModalAtom } from "@/components/Providers/atoms"
-import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { useUserPublic } from "@/hooks/useUserPublic"
@@ -12,7 +11,7 @@ import useIsStuck from "hooks/useIsStuck"
 import { useSetAtom } from "jotai"
 import { Suspense } from "react"
 import Robot from "/public/landing/robot.svg"
-import { guildQueryAtom, isSearchStuckAtom } from "../atoms"
+import { isSearchStuckAtom } from "../atoms"
 import { ActiveSection } from "../types"
 import { GuildInfiniteScroll } from "./GuildInfiniteScroll"
 import { StickyBar } from "./StickyBar"
@@ -50,10 +49,10 @@ export const Explorer = () => {
         <h2 className="font-bold text-lg tracking-tight">Explore verified guilds</h2>
         <div className="sticky top-12 z-10" ref={searchRef}>
           <Suspense>
-            <GuildSearchBar queryAtom={guildQueryAtom} />
+            <GuildSearchBar />
           </Suspense>
         </div>
-        <GuildInfiniteScroll queryAtom={guildQueryAtom} />
+        <GuildInfiniteScroll />
       </section>
     </>
   )

src/app/explorer/_components/GuildInfiniteScroll.tsx

@@ -5,7 +5,7 @@ import useUser from "components/[guild]/hooks/useUser"
 import { env } from "env"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"
 import { useScrollBatchedRendering } from "hooks/useScrollBatchedRendering"
-import { PrimitiveAtom, useAtomValue } from "jotai"
+import { useSearchParams } from "next/navigation"
 import { memo, useRef } from "react"
 import { SWRConfiguration } from "swr"
 import useSWRInfinite from "swr/infinite"
@@ -26,7 +26,8 @@ const GuildCards = ({ guildData }: { guildData?: GuildBase[] }) => {
   return Array.from({ length: BATCH_SIZE }, (_, i) => <GuildCardSkeleton key={i} />)
 }
 
-const useExploreGuilds = (searchParams: URLSearchParams) => {
+const useExploreGuilds = () => {
+  const searchParams = useSearchParams()
   const { isSuperAdmin } = useUser()
   const fetcherWithSign = useFetcherWithSign()
   const options: SWRConfiguration = {
@@ -42,7 +43,7 @@ const useExploreGuilds = (searchParams: URLSearchParams) => {
       const url = new URL("/v2/guilds", env.NEXT_PUBLIC_API)
       const params: Record<string, string> = {
         order: "FEATURED",
-        ...Object.fromEntries(searchParams.entries()),
+        ...Object.fromEntries(searchParams?.entries() ?? []),
         offset: (BATCH_SIZE * pageIndex).toString(),
         limit: BATCH_SIZE.toString(),
       }
@@ -59,20 +60,16 @@ const useExploreGuilds = (searchParams: URLSearchParams) => {
   )
 }
 
-export const GuildInfiniteScroll = ({
-  queryAtom,
-}: {
-  queryAtom: PrimitiveAtom<string>
-}) => {
-  const searchParams = new URLSearchParams(useAtomValue(queryAtom))
-  const search = searchParams.get("search")
+export const GuildInfiniteScroll = () => {
+  const searchParams = useSearchParams()
+  const search = searchParams?.get("search")
   const ref = useRef<HTMLElement>(null)
   const {
     data: filteredGuilds,
     setSize,
     isValidating,
     isLoading,
-  } = useExploreGuilds(searchParams)
+  } = useExploreGuilds()
   const renderedGuilds = filteredGuilds?.flat()
 
   useScrollBatchedRendering({

src/app/explorer/_components/GuildSearchBar.tsx

@@ -3,8 +3,7 @@
 import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
-import { PrimitiveAtom, useSetAtom } from "jotai"
-import { usePathname, useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { Input } from "../../../v2/components/ui/Input"
 import { ToggleGroup, ToggleGroupItem } from "../../../v2/components/ui/ToggleGroup"
@@ -15,30 +14,28 @@ enum Order {
   Newest = "NEWEST",
 }
 
-export const GuildSearchBar = ({
-  queryAtom,
-}: {
-  queryAtom: PrimitiveAtom<string>
-}) => {
-  const setGuildQuery = useSetAtom(queryAtom)
+export const GuildSearchBar = () => {
+  const router = useRouter()
   const searchParams = useSearchParams()
-  const pathName = usePathname()
+  const pathname = usePathname()
+
   const [order, setOrder] = useState<Order>(
-    (searchParams?.get("order") as Order) || Order.Featured
+    (searchParams?.get("order")?.toString() as Order) || Order.Featured
   )
-  const [search, setSearch] = useState(searchParams?.get("search") || "")
+  const [search, setSearch] = useState(searchParams?.get("search")?.toString() || "")
   const debouncedSearch = useDebouncedState(search, 150)
 
   useEffect(() => {
-    if (pathName === null) return
     const newSearchParams = new URLSearchParams(
       Object.entries({ order, search: debouncedSearch }).filter(
         ([_, value]) => value
       )
     )
 
-    setGuildQuery(newSearchParams.toString())
-  }, [debouncedSearch, order, setGuildQuery, pathName])
+    router.push(`${pathname}?${newSearchParams.toString()}`, {
+      scroll: false,
+    })
+  }, [debouncedSearch, order])
 
   return (
     <div className="relative flex flex-col gap-3 sm:flex-row sm:gap-0">

src/app/explorer/atoms.ts

@@ -4,4 +4,3 @@ import { ActiveSection } from "./types"
 export const isNavStuckAtom = atom(false)
 export const isSearchStuckAtom = atom(false)
 export const activeSectionAtom = atom(ActiveSection.YourGuilds)
-export const guildQueryAtom = atom("")