feat: add success and error toasts

guildxyz · Nov 25, 2024 · 66082db · 66082db
1 parent 568b1e6
commit 66082db
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/src/app/create-guild/components/CreateGuildButton.tsx b/src/app/create-guild/components/CreateGuildButton.tsx
@@ -7,10 +7,12 @@ import { env } from "@/lib/env";
 import { fetcher } from "@/lib/fetcher";
 import { getCookie } from "@/lib/getCookie";
 import type { CreateGuildForm, Guild } from "@/lib/schemas/guild";
+import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useFormContext } from "react-hook-form";
 import slugify from "slugify";
+import { toast } from "sonner";
 
 const CreateGuildButton = () => {
   const { handleSubmit } = useFormContext<CreateGuildForm>();
@@ -36,7 +38,7 @@ const CreateGuildButton = () => {
         }),
       };
 
-      return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guild`, {
+      return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guilddsd`, {
         method: "POST",
         headers: {
           "X-Auth-Token": token,
@@ -45,9 +47,19 @@ const CreateGuildButton = () => {
         body: JSON.stringify(guild),
       });
     },
-    onError: (error) => console.error(error),
+    onError: (error) => {
+      // TODO: parse the error and display it in a user-friendly way
+      toast("An error occurred", {
+        icon: <XCircle weight="fill" className="text-icon-error" />,
+      });
+      console.error(error);
+    },
     onSuccess: (res) => {
       confetti.current();
+      toast("Guild successfully created", {
+        description: "You're being redirected to its page",
+        icon: <CheckCircle weight="fill" className="text-icon-success" />,
+      });
       router.push(`/${res.urlName}`);
     },
   });

diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx
@@ -16,11 +16,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
         classNames: {
           toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg data-[button]:bg-button-primary-background gap-2 focus-visible:ring-2",
+          title: "font-bold",
           description: "group-[.toast]:text-foreground-secondary",
           actionButton:
             "group-[.toast]:!bg-button-primary-background group-[.toast]:!text-button-primary-foreground",
           closeButton:
             "group-[.toast]:bg-background group-[.toast]:text-foreground group-[.toast]:border-border",
+          icon: "group-[.toast]:[&>svg]:size-5",
         },
       }}
       {...props}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -144,6 +144,9 @@ html {
 
   --drawer-handle: var(--blackAlpha);
   --scroll-thumb: var(--blackAlpha-medium);
+
+  --icon-success: var(--green-500);
+  --icon-error: var(--red-500);
 }
 
 .dark {
@@ -192,6 +195,9 @@ html {
 
   --drawer-handle: var(--whiteAlpha);
   --scroll-thumb: var(--whiteAlpha-medium);
+
+  --icon-success: var(--green-400);
+  --icon-error: var(--red-400);
 }
 
 .dark video,

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -55,7 +55,11 @@ const config = {
           foreground: "var(--badge-foreground)"
         },
         "drawer-handle": "var(--drawer-handle)",
-        "scroll-thumb": "var(--scroll-thumb)"
+        "scroll-thumb": "var(--scroll-thumb)",
+        icon: {
+          success: "var(--icon-success)",
+          error: "var(--icon-error)"
+        }
       },
       keyframes: {
         "collapse-open": {