Merge branch 'add-guild-page' of github.com:guildxyz/guild.xyz into a…

…dd-guild-page
guildxyz · Dec 6, 2024 · 70945c5 · 70945c5
2 parents 6f6d33a + 0075ebb
commit 70945c5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx b/src/app/(dashboard)/[guildUrlName]/components/JoinButton.tsx
@@ -1,12 +1,18 @@
 "use client";
 
 import { Button } from "@/components/ui/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
 import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
 import { env } from "@/lib/env";
 import { fetchGuildLeave } from "@/lib/fetchers";
 import { getCookieClientSide } from "@/lib/getCookieClientSide";
 import { guildOptions, userOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
+import { CheckCircle, SignOut } from "@phosphor-icons/react/dist/ssr";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EventSourcePlus } from "event-source-plus";
 import { useParams } from "next/navigation";
@@ -53,7 +59,7 @@ export const JoinButton = () => {
               sseMessage.data,
               // biome-ignore lint/suspicious/noExplicitAny: TODO: fill missing types
             ) as any;
-            if (status === "complete") {
+            if (status === "Completed") {
               if (data === undefined) {
                 throw new Error(
                   "Server responded with success, but returned no user",
@@ -63,11 +69,13 @@ export const JoinButton = () => {
             } else if (status === "error") {
               reject();
             }
-            const toastFunction =
-              status === "complete" ? toast.success : toast.info;
-            toastFunction(status, {
+
+            toast(status, {
               description: message,
-              richColors: status === "complete",
+              icon:
+                status === "Completed" ? (
+                  <CheckCircle weight="fill" className="text-icon-success" />
+                ) : undefined,
             });
           } catch (e) {
             console.warn("JSON parsing failed on join event stream", e);
@@ -103,17 +111,23 @@ export const JoinButton = () => {
   });
 
   return isJoined ? (
-    <Button
-      colorScheme="destructive"
-      className="rounded-2xl"
-      onClick={() => {
-        leaveMutation.mutate();
-      }}
-      isLoading={leaveMutation.isPending}
-      loadingText="Leaving Guild"
-    >
-      Leave Guild
-    </Button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {/* TODO: IconButton component */}
+        <Button
+          className="size-11 rounded-full"
+          onClick={() => {
+            leaveMutation.mutate();
+          }}
+          isLoading={leaveMutation.isPending}
+          leftIcon={<SignOut weight="bold" />}
+        />
+      </TooltipTrigger>
+
+      <TooltipContent>
+        <p>Leave guild</p>
+      </TooltipContent>
+    </Tooltip>
   ) : (
     <Button
       colorScheme="success"

diff --git a/src/app/(dashboard)/[guildUrlName]/layout.tsx b/src/app/(dashboard)/[guildUrlName]/layout.tsx
@@ -1,6 +1,5 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildImage } from "@/components/GuildImage";
-import { SignInButton } from "@/components/SignInButton";
 import { getQueryClient } from "@/lib/getQueryClient";
 import {
   guildOptions,
@@ -65,7 +64,8 @@ const GuildLayout = async ({
                   {guild.data.name}
                 </h1>
               </div>
-              <AuthBoundary fallback={<SignInButton />}>
+              {/* TODO: JoinButton should open a modal where the user can sign in and also connect the required platforms. So we won't need an AuthBoundary here. */}
+              <AuthBoundary fallback={null}>
                 <JoinButton />
               </AuthBoundary>
             </div>

diff --git a/src/app/(dashboard)/explorer/layout.tsx b/src/app/(dashboard)/explorer/layout.tsx
@@ -5,8 +5,8 @@ import { guildSearchOptions } from "./options";
 
 const ExplorerLayout = async ({ children }: PropsWithChildren) => {
   const queryClient = getQueryClient();
-  void queryClient.prefetchInfiniteQuery(guildSearchOptions({}));
-  //void queryClient.prefetchQuery(associatedGuildsOption());
+  await queryClient.prefetchInfiniteQuery(guildSearchOptions({}));
+  // await queryClient.prefetchQuery(associatedGuildsOption());
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>