feat: store join modal open state in an atom

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

@@ -13,8 +13,10 @@ import type { GuildReward, GuildRewardType } from "@/lib/schemas/guildReward";
 import type { Role } from "@/lib/schemas/role";
 import { Check, ImageSquare, LockSimple } from "@phosphor-icons/react/dist/ssr";
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
+import { joinModalAtom } from "../atoms";
 import { useGuild } from "../hooks/useGuild";
 
 const GuildPage = () => {
@@ -152,12 +154,15 @@ const AccessIndicator = ({
     ?.flatMap((g) => g.roles)
     ?.find((r) => r?.roleId === roleId);
 
+  const onJoinModalOpenChange = useSetAtom(joinModalAtom);
+
   if (!isGuildMember)
     return (
       <Button
         size="sm"
         leftIcon={<LockSimple weight="bold" />}
         className={cn(ACCESS_INDICATOR_CLASS, className)}
+        onClick={() => onJoinModalOpenChange(true)}
       >
         Join guild to collect rewards
       </Button>
@@ -169,6 +174,7 @@ const AccessIndicator = ({
         size="sm"
         leftIcon={<LockSimple weight="bold" />}
         className={cn(ACCESS_INDICATOR_CLASS, className)}
+        onClick={() => onJoinModalOpenChange(true)}
       >
         Check access to collect rewards
       </Button>

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

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const joinModalAtom = atom(false);

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

@@ -20,22 +20,24 @@ import type { Schemas } from "@guildxyz/types";
 import { Check, CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
+import { useAtom } from "jotai";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect } from "react";
 import { toast } from "sonner";
+import { joinModalAtom } from "../atoms";
 
 const JOIN_MODAL_SEARCH_PARAM = "join";
 
 export const JoinGuild = () => {
   const searchParams = useSearchParams();
   const shouldOpen = searchParams.has(JOIN_MODAL_SEARCH_PARAM);
 
-  const [open, onOpenChange] = useState(false);
+  const [open, onOpenChange] = useAtom(joinModalAtom);
 
   useEffect(() => {
     if (!shouldOpen) return;
     onOpenChange(true);
-  }, [shouldOpen]);
+  }, [shouldOpen, onOpenChange]);
 
   const { data: user } = useQuery(userOptions());