refactor: pass search params down from the explorer page

src/app/explorer/_components/Explorer.tsx

@@ -10,13 +10,14 @@ import { YourGuilds } from "app/explorer/_components/YourGuilds"
 import useIsStuck from "hooks/useIsStuck"
 import { useSetAtom } from "jotai"
 import { Suspense } from "react"
+import { SearchParams } from "types"
 import Robot from "/public/landing/robot.svg"
 import { isSearchStuckAtom } from "../atoms"
 import { ActiveSection } from "../types"
 import { GuildInfiniteScroll } from "./GuildInfiniteScroll"
 import { StickyBar } from "./StickyBar"
 
-export const Explorer = () => {
+export const Explorer = ({ searchParams }: { searchParams: SearchParams }) => {
   const { keyPair } = useUserPublic()
   const setIsSearchStuck = useSetAtom(isSearchStuckAtom)
   const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
@@ -52,9 +53,8 @@ export const Explorer = () => {
             <GuildSearchBar />
           </Suspense>
         </div>
-        <Suspense>
-          <GuildInfiniteScroll />
-        </Suspense>
+
+        <GuildInfiniteScroll searchParams={searchParams} />
       </section>
     </>
   )

src/app/explorer/_components/GuildInfiniteScroll.tsx

@@ -1,19 +1,15 @@
 "use client"
 
+import { GuildCardSkeleton, GuildCardWithLink } from "@/components/GuildCard"
 import { Spinner } from "@phosphor-icons/react"
 import useUser from "components/[guild]/hooks/useUser"
 import { env } from "env"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"
 import { useScrollBatchedRendering } from "hooks/useScrollBatchedRendering"
-import { useSearchParams } from "next/navigation"
 import { memo, useRef } from "react"
 import { SWRConfiguration } from "swr"
 import useSWRInfinite from "swr/infinite"
-import { GuildBase } from "types"
-import {
-  GuildCardSkeleton,
-  GuildCardWithLink,
-} from "../../../v2/components/GuildCard"
+import { GuildBase, SearchParams } from "types"
 
 const BATCH_SIZE = 24
 
@@ -26,8 +22,7 @@ const GuildCards = ({ guildData }: { guildData?: GuildBase[] }) => {
   return Array.from({ length: BATCH_SIZE }, (_, i) => <GuildCardSkeleton key={i} />)
 }
 
-const useExploreGuilds = () => {
-  const searchParams = useSearchParams()
+const useExploreGuilds = (searchParams?: SearchParams) => {
   const { isSuperAdmin } = useUser()
   const fetcherWithSign = useFetcherWithSign()
   const options: SWRConfiguration = {
@@ -43,7 +38,7 @@ const useExploreGuilds = () => {
       const url = new URL("/v2/guilds", env.NEXT_PUBLIC_API)
       const params: Record<string, string> = {
         order: "FEATURED",
-        ...Object.fromEntries(searchParams?.entries() ?? []),
+        ...searchParams,
         offset: (BATCH_SIZE * pageIndex).toString(),
         limit: BATCH_SIZE.toString(),
       }
@@ -60,16 +55,17 @@ const useExploreGuilds = () => {
   )
 }
 
-export const GuildInfiniteScroll = () => {
-  const searchParams = useSearchParams()
-  const search = searchParams?.get("search")
+export const GuildInfiniteScroll = ({
+  searchParams,
+}: { searchParams: SearchParams }) => {
+  const search = searchParams.search
   const ref = useRef<HTMLElement>(null)
   const {
     data: filteredGuilds,
     setSize,
     isValidating,
     isLoading,
-  } = useExploreGuilds()
+  } = useExploreGuilds(searchParams)
   const renderedGuilds = filteredGuilds?.flat()
 
   useScrollBatchedRendering({

src/app/explorer/_components/GuildSearchBar.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { usePrevious } from "@/hooks/usePrevious"
 import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
@@ -23,7 +24,7 @@ export const GuildSearchBar = () => {
     (searchParams?.get("order")?.toString() as Order) || Order.Featured
   )
   const [search, setSearch] = useState(searchParams?.get("search")?.toString() || "")
-  const debouncedSearch = useDebouncedState(search, 150)
+  const debouncedSearch = useDebouncedState(search, 200)
 
   useEffect(() => {
     const newSearchParams = new URLSearchParams(
@@ -32,10 +33,15 @@ export const GuildSearchBar = () => {
       )
     )
 
+    /**
+     * ?order=FEATURED is the default order, so added this early return to avoid navigating from /explorer to /explorer?order=FEATURED after the initial page load
+     */
+    if (!searchParams?.get("order") && !search) return
+
     router.push(`${pathname}?${newSearchParams.toString()}`, {
       scroll: false,
     })
-  }, [debouncedSearch, order])
+  }, [search, debouncedSearch, order])
 
   return (
     <div className="relative flex flex-col gap-3 sm:flex-row sm:gap-0">

src/app/explorer/page.tsx

@@ -2,12 +2,13 @@ import { Layout } from "@/components/Layout"
 import { Anchor } from "@/components/ui/Anchor"
 import { env } from "env"
 import { unstable_serialize as infinite_unstable_serialize } from "swr/infinite"
+import { SearchParams } from "types"
 import { Explorer } from "./_components/Explorer"
 import { ExplorerSWRProvider } from "./_components/ExplorerSWRProvider"
 import { HeaderBackground } from "./_components/HeaderBackground"
 import { ActiveSection } from "./types"
 
-const Page = async () => {
+const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
   const featuredPath = `/v2/guilds?order=FEATURED&offset=0&limit=24`
   const newestPath = `/v2/guilds?order=NEWEST&offset=0&limit=24`
   const [ssrFeaturedGuilds, ssrNewestGuilds] = await Promise.all([
@@ -50,7 +51,7 @@ const Page = async () => {
         </Layout.Hero>
 
         <Layout.Main>
-          <Explorer />
+          <Explorer searchParams={searchParams} />
         </Layout.Main>
 
         <Layout.Footer>

src/types.ts

@@ -759,6 +759,8 @@ type DetailedPinLeaderboardUserData = {
   pins: LeaderboardPinData[]
 }
 
+type SearchParams = { [key: string]: string | string[] | undefined }
+
 export { supportedEventSources, supportedSocialLinks, ValidationMethod }
 export type {
   BaseUser,
@@ -803,4 +805,5 @@ export type {
   User,
   UserAddress,
   WalletError,
+  SearchParams,
 }