feat: add join guild logic

src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx

@@ -91,8 +91,8 @@ const RoleCard = async ({ role }: { role: Role }) => {
           {role.description}
         </p>
         {!!rewards.length && (
-          <ScrollArea className="mt-8 h-64 rounded-lg border-2 pr-3">
-            <div className="flex flex-col gap-4">
+          <ScrollArea className="mt-8 h-64 rounded-lg border-2">
+            <div className="flex flex-col">
               {rewards.map((reward) => (
                 <Reward reward={reward} key={reward.id} />
               ))}
@@ -117,7 +117,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
 
 const Reward = ({ reward }: { reward: Reward }) => {
   return (
-    <div className="border-b p-4">
+    <div className="border-b p-6">
       <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">

src/app/(dashboard)/[guildId]/components/JoinButton.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
+import { fetcher } from "@/lib/fetcher";
+import { getCookie } from "@/lib/getCookie";
+import type { Guild } from "@/lib/schemas/guild";
+
+const joinGuild = ({ guildId }: { guildId: string }) => {
+  const token = getCookie(GUILD_AUTH_COOKIE_NAME);
+  return (
+    token &&
+    fetcher(`${env.NEXT_PUBLIC_API}/guild/${guildId}/join`, {
+      method: "POST",
+      headers: {
+        "X-Auth-Token": token,
+      },
+    })
+  );
+};
+
+export const JoinButton = ({ guild }: { guild: Guild }) => {
+  return (
+    <Button
+      colorScheme="success"
+      className="rounded-2xl"
+      onClick={() => {
+        joinGuild({ guildId: guild.id });
+      }}
+    >
+      Join Guild
+    </Button>
+  );
+};

src/app/(dashboard)/[guildId]/layout.tsx

@@ -1,11 +1,13 @@
+import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
-import { Button } from "@/components/ui/Button";
+import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
 import type { Guild } from "@/lib/schemas/guild";
 import type { DynamicRoute } from "@/lib/types";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
+import { JoinButton } from "./components/JoinButton";
 
 const GuildPage = async ({
   params,
@@ -31,9 +33,9 @@ const GuildPage = async ({
                 {guild.name}
               </h1>
             </div>
-            <Button colorScheme="success" className="rounded-2xl">
-              Join Guild
-            </Button>
+            <AuthBoundary fallback={<SignInButton />}>
+              <JoinButton guild={guild} />
+            </AuthBoundary>
           </div>
           <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
             {guild.description}