add guild page

package.json

@@ -13,6 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@guildxyz/types": "^3.0.8",
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.1",
@@ -84,6 +85,7 @@
     "postcss": "^8",
     "storybook": "^8.4.4",
     "tailwindcss": "^3.4.1",
+    "type-fest": "^4.29.1",
     "typescript": "^5"
   },
   "overrides": {

src/actions/auth.ts

@@ -1,23 +1,11 @@
 "use server";
 
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
-import { env } from "@/lib/env";
+import { fetchGuildApi } from "@/lib/fetchGuildApi";
+import { authSchema, tokenSchema } from "@/lib/schemas/user";
 import { jwtDecode } from "jwt-decode";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { z } from "zod";
-
-const authSchema = z.object({
-  message: z.string(),
-  token: z.string(),
-  userId: z.string().uuid(),
-});
-
-const tokenSchema = z.object({
-  userId: z.string().uuid(),
-  exp: z.number().positive().int(),
-  iat: z.number().positive().int(),
-});
 
 export const signIn = async ({
   message,
@@ -30,30 +18,17 @@ export const signIn = async ({
 
   const requestInit = {
     method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
       message,
       signature,
     }),
   } satisfies RequestInit;
 
-  const signInRes = await fetch(
-    `${env.NEXT_PUBLIC_API}/auth/siwe/login`,
-    requestInit,
-  );
-
-  let json: unknown;
-  if (signInRes.status === 401) {
-    const registerRes = await fetch(
-      `${env.NEXT_PUBLIC_API}/auth/siwe/register`,
-      requestInit,
-    );
-    json = await registerRes.json();
-  } else {
-    json = await signInRes.json();
+  const signInRes = await fetchGuildApi("auth/siwe/login", requestInit);
+  let json = signInRes.data;
+  if (signInRes.response.status === 401) {
+    const registerRes = await fetchGuildApi("auth/siwe/register", requestInit);
+    json = registerRes.data;
   }
   const authData = authSchema.parse(json);
   const { exp } = tokenSchema.parse(jwtDecode(authData.token));
@@ -70,8 +45,13 @@ export const signOut = async (redirectTo?: string) => {
   redirect(redirectTo ?? "/explorer");
 };
 
-export const getAuthCookie = async () => {
-  const cookieStore = await cookies();
-  const authCookie = cookieStore.get(GUILD_AUTH_COOKIE_NAME);
-  return authCookie && tokenSchema.parse(jwtDecode(authCookie.value));
+export const tryGetToken = async () => {
+  const token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME)?.value;
+  if (!token) throw new Error("Failed to retrieve token");
+  return token;
+};
+
+export const tryGetParsedToken = async () => {
+  const token = await tryGetToken();
+  return tokenSchema.parse(jwtDecode(token));
 };

src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx

@@ -0,0 +1,104 @@
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { ScrollArea } from "@/components/ui/ScrollArea";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { DynamicRoute } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
+import { Lock } from "@phosphor-icons/react/dist/ssr";
+
+const GuildPage = async ({
+  params,
+}: DynamicRoute<{ pageUrlName: string; guildUrlName: string }>) => {
+  const { pageUrlName, guildUrlName } = await params;
+  const guild = await fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/urlName/${guildUrlName}`,
+  );
+  const pages = await fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+    method: "POST",
+    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+  });
+  const page = pages.find((p) => p.urlName === pageUrlName)!;
+  const roles = await fetchGuildApiData<Schemas["RoleFull"][]>("role/batch", {
+    method: "POST",
+    body: JSON.stringify({
+      ids: page.roles?.map((r) => r.roleId!) ?? [],
+    }),
+  });
+
+  return (
+    <div className="my-4 space-y-4">
+      {roles.map((role) => (
+        <RoleCard role={role} key={role.id} />
+      ))}
+    </div>
+  );
+};
+
+const RoleCard = async ({ role }: { role: Schemas["RoleFull"] }) => {
+  const rewards = await fetchGuildApiData<Schemas["RewardFull"][]>(
+    "reward/batch",
+    {
+      method: "POST",
+      body: JSON.stringify({
+        ids: role.rewards?.map((r) => r.rewardId!) ?? [],
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  return (
+    <Card className="flex flex-col md:flex-row" key={role.id}>
+      <div className="border-r p-6 md:w-1/2">
+        <div className="flex items-center gap-3">
+          {role.imageUrl && (
+            <img
+              className="size-14 rounded-full border"
+              src={role.imageUrl} // TODO: fallback image
+              alt="role avatar"
+            />
+          )}
+          <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+        </div>
+        <p className="mt-4 text-foreground-dimmed leading-relaxed">
+          {role.description}
+        </p>
+        {!!rewards.length && (
+          <ScrollArea className="mt-8 h-64 rounded-lg border pr-3">
+            <div className="flex flex-col gap-4">
+              {rewards.map((reward) => (
+                <Reward reward={reward} key={reward.id} />
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </div>
+      <div className="bg-card-secondary p-6 md:w-1/2">
+        <div className="flex items-center justify-between">
+          <span className="font-bold text-foreground-secondary text-xs">
+            REQUIREMENTS
+          </span>
+          <Button size="sm">
+            <Lock />
+            Join Guild to collect rewards
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+const Reward = ({ reward }: { reward: Schemas["RewardFull"] }) => {
+  return (
+    <div className="border-b p-4 last:border-b-0">
+      <div className="mb-2 font-medium">{reward.name}</div>
+      <div className="text-foreground-dimmed text-sm">{reward.description}</div>
+      <pre className="mt-3 text-foreground-secondary text-xs">
+        <code>{JSON.stringify(reward.permissions, null, 2)}</code>
+      </pre>
+    </div>
+  );
+};
+
+export default GuildPage;

src/app/(dashboard)/[guildUrlName]/actions.ts

@@ -0,0 +1,72 @@
+"use server";
+
+import { tryGetParsedToken } from "@/actions/auth";
+import { fetchGuildApiAuthData, fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { ErrorLike, WithIdLike } from "@/lib/types";
+import type { Schemas } from "@guildxyz/types";
+import { revalidateTag } from "next/cache";
+import z from "zod";
+
+const resolveIdLikeRequest = (idLike: string) => {
+  const isId = z.string().uuid().safeParse(idLike).success;
+  return `${isId ? "id" : "urlName"}/${idLike}`;
+};
+
+export const joinGuild = async ({ guildId }: { guildId: string }) => {
+  // the response type might not be suitable for this fetcher
+  revalidateTag("user");
+  //return fetchGuildApiAuthData(`guild/${guildId}/join`, {
+  //  method: "POST",
+  //});
+};
+
+export const leaveGuild = async ({ guildId }: { guildId: string }) => {
+  revalidateTag("user");
+  return fetchGuildApiAuthData(`guild/${guildId}/leave`, {
+    method: "POST",
+  });
+};
+
+export const getGuild = async ({ idLike }: WithIdLike) => {
+  return fetchGuildApiData<Schemas["GuildFull"]>(
+    `guild/${resolveIdLikeRequest(idLike)}`,
+  );
+};
+
+export const getEntity = async <Data = object, Error = ErrorLike>({
+  idLike,
+  entity,
+  responseInit,
+  auth = false,
+}: {
+  entity: string;
+  idLike: string;
+  auth?: boolean;
+  responseInit?: Parameters<typeof fetch>[1];
+}) => {
+  const pathname = `${entity}/${resolveIdLikeRequest(idLike)}`;
+  return auth
+    ? fetchGuildApiAuthData<Data, Error>(pathname, responseInit)
+    : fetchGuildApiData<Data, Error>(pathname, responseInit);
+};
+
+export const getUser = async () => {
+  const { userId } = await tryGetParsedToken();
+  return getEntity<Schemas["UserFull"]>({
+    entity: "user",
+    idLike: userId,
+    auth: true,
+    responseInit: { next: { tags: ["user"] } },
+  });
+};
+
+export const getPages = async ({ guildId }: { guildId: string }) => {
+  const guild = await getGuild({ idLike: guildId });
+  return fetchGuildApiData<Schemas["PageFull"][]>("page/batch", {
+    method: "POST",
+    body: JSON.stringify({ ids: guild.pages?.map((p) => p.pageId!) ?? [] }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};

src/app/(dashboard)/[guildUrlName]/components/GuildTabs.tsx

@@ -0,0 +1,59 @@
+import { Card } from "@/components/ui/Card";
+import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { cn } from "@/lib/cssUtils";
+import type { Schemas } from "@guildxyz/types";
+import { getPages } from "../actions";
+import { PageNavLink } from "./RoleGroupNavLink";
+
+const roleGroupOrder = ["Home", "Admin"].reverse();
+
+export const GuildTabs = async ({ guild }: { guild: Schemas["GuildFull"] }) => {
+  const pages = await getPages({ guildId: guild.id });
+
+  return (
+    <ScrollArea
+      className="-ml-8 w-[calc(100%+theme(space.8))]"
+      style={{
+        maskImage:
+          "linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)",
+      }}
+    >
+      <div className="my-4 flex gap-3 px-8">
+        {pages
+          .sort((a, b) => {
+            const [aIndex, bIndex] = [a, b].map((val) =>
+              roleGroupOrder.findIndex((pred) => pred === val.name),
+            );
+            return bIndex - aIndex;
+          })
+          .map((rg) => (
+            <PageNavLink
+              key={rg.id}
+              href={[guild.urlName, rg.urlName]
+                .filter(Boolean)
+                .map((s) => `/${s}`)
+                .join("")}
+            >
+              {rg.name}
+            </PageNavLink>
+          ))}
+      </div>
+      <ScrollBar orientation="horizontal" className="hidden" />
+    </ScrollArea>
+  );
+};
+
+const SKELETON_SIZES = ["w-20", "w-36", "w-28"];
+export const GuildTabsSkeleton = () => (
+  <div className="my-4 flex gap-3">
+    {[...Array(3)].map((_, i) => (
+      <Card
+        key={`${SKELETON_SIZES[i]}${i}`}
+        className={cn("flex h-11 items-center px-4", SKELETON_SIZES[i])}
+      >
+        <Skeleton className="h-4 w-full" />
+      </Card>
+    ))}
+  </div>
+);