v2 explorer

.gitignore

@@ -33,8 +33,7 @@ cypress/screenshots
 cypress/videos
 
 .idea
-
 *.tsbuildinfo
 
 *storybook.log
-storybook-static
+storybook-static

src/app/explorer/_components/Explorer.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
+import { useUserPublic } from "@/hooks/useUserPublic"
+import { SignIn } from "@phosphor-icons/react"
+import { GuildSearchBar } from "app/explorer/_components/GuildSearchBar"
+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 = ({ searchParams }: { searchParams: SearchParams }) => {
+  const { keyPair } = useUserPublic()
+  const setIsSearchStuck = useSetAtom(isSearchStuckAtom)
+  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
+
+  const { ref: searchRef } = useIsStuck(setIsSearchStuck)
+
+  return (
+    <>
+      <StickyBar />
+
+      {!!keyPair ? (
+        <YourGuilds />
+      ) : (
+        <Card className="mt-2 mb-8 flex flex-col items-stretch justify-between gap-8 p-6 font-semibold sm:flex-row sm:items-center">
+          <div className="flex items-center gap-4">
+            <Robot className="size-8 min-w-8 text-white" />
+            <span>Sign in to view your guilds / create new ones</span>
+          </div>
+          <Button
+            className="space-x-2"
+            onClick={() => setIsWalletSelectorModalOpen(true)}
+          >
+            <SignIn />
+            <span className="text-md">Sign in</span>
+          </Button>
+        </Card>
+      )}
+
+      <section id={ActiveSection.ExploreGuilds} className="flex flex-col gap-5">
+        <h2 className="font-bold text-lg tracking-tight">Explore verified guilds</h2>
+        <div className="sticky top-12 z-10" ref={searchRef}>
+          <Suspense>
+            <GuildSearchBar />
+          </Suspense>
+        </div>
+
+        <GuildInfiniteScroll searchParams={searchParams} />
+      </section>
+    </>
+  )
+}

src/app/explorer/_components/ExplorerSWRProvider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { PropsWithChildren } from "react"
+import { SWRConfig, type SWRConfiguration } from "swr"
+
+export const ExplorerSWRProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: SWRConfiguration }>) => {
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}

src/app/explorer/_components/GuildInfiniteScroll.tsx

@@ -0,0 +1,103 @@
+"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 { memo, useRef } from "react"
+import { SWRConfiguration } from "swr"
+import useSWRInfinite from "swr/infinite"
+import { GuildBase, SearchParams } from "types"
+
+const BATCH_SIZE = 24
+
+const GuildCardMemo = memo(GuildCardWithLink)
+
+const GuildCards = ({ guildData }: { guildData?: GuildBase[] }) => {
+  if (guildData?.length) {
+    return guildData.map((data) => <GuildCardMemo key={data.id} guildData={data} />)
+  }
+  return Array.from({ length: BATCH_SIZE }, (_, i) => <GuildCardSkeleton key={i} />)
+}
+
+const useExploreGuilds = (searchParams?: SearchParams) => {
+  const { isSuperAdmin } = useUser()
+  const fetcherWithSign = useFetcherWithSign()
+  const options: SWRConfiguration = {
+    dedupingInterval: 60_000,
+  }
+
+  // sending authed request for superAdmins, so they can see unverified & hideFromExplorer guilds too
+  // @ts-expect-error TODO: resolve this type error
+  return useSWRInfinite<GuildBase[]>(
+    (pageIndex, previousPageData) => {
+      if (Array.isArray(previousPageData) && previousPageData.length !== BATCH_SIZE)
+        return null
+      const url = new URL("/v2/guilds", env.NEXT_PUBLIC_API)
+      const params: Record<string, string> = {
+        order: "FEATURED",
+        ...searchParams,
+        offset: (BATCH_SIZE * pageIndex).toString(),
+        limit: BATCH_SIZE.toString(),
+      }
+      for (const entry of Object.entries(params)) {
+        url.searchParams.set(...entry)
+      }
+
+      const urlString = url.pathname + url.search
+      if (isSuperAdmin) return [urlString, { method: "GET", body: {} }]
+      return urlString
+    },
+    isSuperAdmin ? fetcherWithSign : options,
+    isSuperAdmin ? options : null
+  )
+}
+
+export const GuildInfiniteScroll = ({
+  searchParams,
+}: { searchParams: SearchParams }) => {
+  const search = searchParams.search
+  const ref = useRef<HTMLElement>(null)
+  const {
+    data: filteredGuilds,
+    setSize,
+    isValidating,
+    isLoading,
+  } = useExploreGuilds(searchParams)
+  const renderedGuilds = filteredGuilds?.flat()
+
+  useScrollBatchedRendering({
+    batchSize: 1,
+    scrollTarget: ref,
+    disableRendering: isValidating,
+    setElementCount: setSize,
+    offsetPixel: 420,
+  })
+
+  if (!renderedGuilds?.length && !isLoading) {
+    if (!isValidating && !search?.length) {
+      return (
+        <div>Can't fetch guilds from the backend right now. Check back later!</div>
+      )
+    } else {
+      return <div>{`No results for ${search}`}</div>
+    }
+  }
+
+  return (
+    <>
+      <section
+        className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"
+        ref={ref}
+      >
+        <GuildCards guildData={renderedGuilds} />
+      </section>
+      <Spinner
+        className="invisible mx-auto size-8 animate-spin data-[active=true]:visible"
+        data-active={isValidating || isLoading}
+      />
+    </>
+  )
+}