add explorer

guild.d.ts

@@ -0,0 +1,33 @@
+// dumping here types util it comes down properly
+
+export {}
+
+declare global {
+  type Guild = {
+    name: string;
+    id: string;
+    urlName: string;
+    createdAt: number;
+    updatedAt: number;
+    description: string;
+    imageUrl: string;
+    backgroundImageUrl: string;
+    visibility: Record<string, string>;
+    settings: Record<string, string>;
+    searchTags: string[];
+    categoryTags: string[];
+    socialLinks: Record<string, string>;
+    owner: string;
+  };
+
+  type PaginatedResponse<Item extends any> = {
+    page: number;
+    pageSize: number;
+    sortBy: string;
+    reverse: boolean;
+    searchQuery: string;
+    query: string;
+    items: Item[];
+    total: number;
+  };
+}

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -26,6 +27,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/explorer/atoms.ts

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

src/app/explorer/components/GuildCard.tsx

@@ -1,32 +0,0 @@
-import { Badge } from "@/components/ui/Badge";
-import { Card } from "@/components/ui/Card";
-import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
-import Link from "next/link";
-
-export const GuildCard = () => {
-  return (
-    <Link href="#" className="rounded-2xl outline-none focus-visible:ring-4">
-      <Card className="relative grid grid-cols-[theme(space.12)_1fr] grid-rows-2 items-center gap-x-4 gap-y-0.5 overflow-hidden rounded-2xl px-6 py-7 shadow-md before:absolute before:inset-0 before:bg-black/5 before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85 dark:before:bg-white/5">
-        <div className="row-span-2 grid size-12 place-items-center rounded-full bg-image text-white">
-          <ImageSquare weight="duotone" className="size-6" />
-        </div>
-
-        <h3 className="line-clamp-1 font-black font-display text-lg">
-          Sample guild
-        </h3>
-        <div className="flex flex-wrap gap-1">
-          <Badge>
-            <Users className="size-4" />
-            <span>
-              {new Intl.NumberFormat("en", {
-                notation: "compact",
-              }).format(125244)}
-            </span>
-          </Badge>
-
-          <Badge>5 groups</Badge>
-        </div>
-      </Card>
-    </Link>
-  );
-};

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { GuildCard, GuildCardSkeleton } from "@/components/GuildCard";
+import { Button } from "@/components/ui/Button";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useIntersection } from "foxact/use-intersection";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect } from "react";
+import { searchAtom } from "../atoms";
+import { PAGE_SIZE } from "../constants";
+import { getGuildSearch } from "../fetchers";
+
+export const InfiniteScrollGuilds = () => {
+  const search = useAtomValue(searchAtom);
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: ["guilds", search || ""],
+      queryFn: getGuildSearch(search),
+      initialPageParam: 1,
+      staleTime: Number.POSITIVE_INFINITY,
+      enabled: search !== undefined,
+      getNextPageParam: (lastPage) =>
+        lastPage.total / lastPage.pageSize <= lastPage.page
+          ? undefined
+          : lastPage.page + 1,
+    });
+
+  const [setIntersection, isIntersected, resetIsIntersected] = useIntersection({
+    rootMargin: "700px",
+  });
+
+  useEffect(() => {
+    if (!isFetchingNextPage) {
+      resetIsIntersected();
+    }
+  }, [resetIsIntersected, isFetchingNextPage]);
+
+  useEffect(() => {
+    if (isFetchingNextPage) return;
+    if (isIntersected && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isIntersected, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const guilds = data?.pages.flatMap((page) => page.items) || [];
+
+  return (
+    <section className="grid gap-2">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {isLoading
+          ? Array.from({ length: PAGE_SIZE }, (_, i) => (
+              <GuildCardSkeleton key={i} />
+            ))
+          : guilds.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
+      </div>
+      <div
+        ref={useCallback(
+          (element: HTMLDivElement | null) => {
+            setIntersection(element);
+          },
+          [setIntersection],
+        )}
+        aria-hidden
+      />
+      {guilds.length === 0 &&
+        !isLoading &&
+        search &&
+        `No results for "${search}"`}
+      <Button
+        className="mt-8"
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetchingNextPage}
+      >
+        {isFetchingNextPage
+          ? "Loading more..."
+          : hasNextPage
+            ? "Load More"
+            : "No More Data"}
+      </Button>
+    </section>
+  );
+};

src/app/explorer/components/Search.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Input } from "@/components/ui/Input";
+import { useDebouncedValue } from "foxact/use-debounced-value";
+import { useSetAtom } from "jotai";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { searchAtom } from "../atoms";
+
+export const Search = () => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const [value, setValue] = useState(
+    searchParams?.get("search")?.toString() || "",
+  );
+
+  const debouncedValue = useDebouncedValue(value, 200);
+  const setSearch = useSetAtom(searchAtom);
+
+  useEffect(() => {
+    setSearch(debouncedValue);
+  }, [debouncedValue]);
+
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams(
+      Object.entries({ search: value }).filter(([_, value]) => value),
+    );
+    window.history.replaceState(
+      null,
+      "",
+      `${pathname}?${newSearchParams.toString()}`,
+    );
+  }, [value]);
+
+  return (
+    <Input
+      placeholder="Search guild.xyz"
+      size="lg"
+      value={value}
+      onChange={(e) => setValue(e.currentTarget.value)}
+    />
+  );
+};

src/app/explorer/constants.ts

@@ -0,0 +1 @@
+export const PAGE_SIZE = 24;

src/app/explorer/fetchers.ts

@@ -0,0 +1,12 @@
+import { env } from "@/lib/env";
+import { PAGE_SIZE } from "./constants";
+
+export const getGuildSearch =
+  (search = "") =>
+  async ({ pageParam }: { pageParam: number }) => {
+    return (
+      await fetch(
+        `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${PAGE_SIZE}&search=${search}`,
+      )
+    ).json() as Promise<PaginatedResponse<Guild>>;
+  };

src/app/explorer/page.tsx

@@ -1,11 +1,118 @@
-import { GuildCard } from "./components/GuildCard";
+import { AuthBoundary } from "@/components/AuthBoundary";
+import { GuildCardSkeleton } from "@/components/GuildCard";
+import { GuildCard } from "@/components/GuildCard";
+import { Button } from "@/components/ui/Button";
+import { env } from "@/lib/env";
+import { Plus, SignIn } from "@phosphor-icons/react/dist/ssr";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import { Suspense } from "react";
+import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
+import { Search } from "./components/Search";
+import { getGuildSearch } from "./fetchers";
+
+const getAssociatedGuilds = async () => {
+  const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=24&sortBy=name&reverse=false&search=`;
+  const guilds = (await (
+    await fetch(request)
+  ).json()) as PaginatedResponse<Guild>;
+
+  return guilds;
+};
+
+export default async function Explorer() {
+  const queryClient = new QueryClient();
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ["guilds", ""],
+    initialPageParam: 1,
+    queryFn: getGuildSearch(""),
+  });
 
-const Explorer = () => {
   return (
-    <main className="container mx-auto grid max-w-screen-lg gap-4 px-4 py-8 sm:grid-cols-2 lg:grid-cols-3">
-      <GuildCard />
+    <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
+      <section className="pt-6 pb-8">
+        <h1 className="font-black text-5xl">Guildhall</h1>
+      </section>
+
+      <YourGuildsSection />
+
+      <section>
+        <Search />
+      </section>
+
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <InfiniteScrollGuilds />
+      </HydrationBoundary>
     </main>
   );
-};
+}
+
+async function YourGuildsSection() {
+  return (
+    <section className="grid gap-2">
+      <h2 className="font-bold text-lg">Your guilds</h2>
+
+      <AuthBoundary
+        fallback={
+          <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
+            <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
 
-export default Explorer;
+            <p className="font-semibold">
+              Sign in to view your guilds or create new ones
+            </p>
+
+            <Button
+              colorScheme="primary"
+              leftIcon={<SignIn weight="bold" />}
+              className="ml-auto h-10"
+            >
+              Sign in
+            </Button>
+          </div>
+        }
+      >
+        <Suspense fallback={<YourGuildsSkeleton />}>
+          <YourGuilds />
+        </Suspense>
+      </AuthBoundary>
+    </section>
+  );
+}
+
+async function YourGuilds() {
+  const { items: myGuilds } = await getAssociatedGuilds();
+
+  return myGuilds && myGuilds.length > 0 ? (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {myGuilds.map((guild) => (
+        <GuildCard key={guild.id} guild={guild} />
+      ))}
+    </div>
+  ) : (
+    <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
+      <img src="/icons/robot.svg" alt="Guild Robot" className="size-8" />
+
+      <p className="font-semibold">
+        You&apos;re not a member of any guilds yet. Explore and join some below,
+        or create your own!
+      </p>
+
+      <Button leftIcon={<Plus weight="bold" />} className="ml-auto h-10">
+        Create guild
+      </Button>
+    </div>
+  );
+}
+
+function YourGuildsSkeleton() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {[...Array(3)].map((_, i) => (
+        <GuildCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}