refactor: migrate to shadcn/ui sonner toaster

Signed-off-by: rajput-hemant <[email protected]>

app/(auth)/components/auth-form.tsx

@@ -14,12 +14,12 @@ import {
 } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type * as z from "zod";
 
 import { createNewAccount, resetPassword } from "@/lib/actions";
 import { cn } from "@/lib/utils";
 import { authSchema } from "@/lib/validations";
-import { toast } from "@/hooks/use-toast";
 import { GitHub, Google } from "@/components/icons";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -58,33 +58,32 @@ export function AuthForm({ mode }: AuthFormProps) {
     mode: "onChange",
   });
 
-  function signInToaster() {
-    const { dismiss } = toast({
-      title: "Signing in...",
-      description: "Please wait while we sign you in",
+  function signInToaster(promise: Promise<unknown>) {
+    toast.promise(promise, {
+      loading: "Signing in...",
+      success: "You have been signed in.",
+      error: "Something went wrong.",
     });
-
-    return { dismiss };
   }
 
   async function onSubmit({ email, username, password }: FormData) {
     try {
       if (mode === "login") {
-        const { dismiss } = signInToaster();
-        await signIn("credentials", { username, email, password });
-        dismiss();
+        signInToaster(signIn("credentials", { username, email, password }));
       } else if (mode === "signup") {
-        toast({
-          title: "Creating account...",
-          description: "Please wait while we create your account",
+        // @ts-expect-error eslint-disable-line @typescript-eslint/ban-ts-comment
+        toast.promise(createNewAccount({ mode: "email", email, password }), {
+          loading: "Creating account...",
+          success: "You have successfully created your account.",
+          error: "Something went wrong.",
         });
-        await createNewAccount({ mode: "email", email: email!, password });
       } else {
-        toast({
-          title: "Resetting password...",
-          description: "Please wait while we reset your password",
+        // @ts-expect-error eslint-disable-line @typescript-eslint/ban-ts-comment
+        toast.promise(resetPassword({ mode: "email", email, password }), {
+          loading: "Resetting password...",
+          success: "You have successfully reset your password.",
+          error: "Something went wrong.",
         });
-        await resetPassword({ mode: "email", email: email!, password });
       }
     } catch (error) {
       const err = error as Error;
@@ -96,9 +95,7 @@ export function AuthForm({ mode }: AuthFormProps) {
     setOauthLoading("google");
 
     try {
-      const { dismiss } = signInToaster();
-      await signIn("google");
-      dismiss();
+      signInToaster(signIn("google"));
     } catch (error) {
       const err = error as Error;
       console.error(err.message);
@@ -111,9 +108,7 @@ export function AuthForm({ mode }: AuthFormProps) {
     setOauthLoading("github");
 
     try {
-      const { dismiss } = signInToaster();
-      await signIn("github");
-      dismiss();
+      signInToaster(signIn("github"));
     } catch (error) {
       const err = error as Error;
       console.error(err.message);

app/dashboard/(workspaces)/[workspaceId]/layout.tsx

@@ -1,9 +1,9 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { toast } from "sonner";
 
 import { getCurrentUser } from "@/lib/auth";
 import { getFolders } from "@/lib/db/queries";
-import { toast } from "@/hooks/use-toast";
 import { ResizableLayout } from "../components/resizable-layout";
 
 type WorkspaceLayoutProps = React.PropsWithChildren<{
@@ -29,8 +29,7 @@ export default async function WorkspaceLayout({
   const { data: folders, error } = await getFolders(workspaceId);
 
   if (error) {
-    toast({
-      title: "Something went wrong",
+    toast.error("Something went wrong", {
       description: "Unable to fetch folders for this workspace.",
     });
   }

app/dashboard/new-workspace/page.tsx

@@ -1,9 +1,9 @@
 import Image from "next/image";
 import { redirect } from "next/navigation";
+import { toast } from "sonner";
 
 import { getCurrentUser } from "@/lib/auth";
 import { getUserSubscriptionStatus } from "@/lib/db/queries";
-import { toast } from "@/hooks/use-toast";
 import {
   Card,
   CardContent,
@@ -27,8 +27,9 @@ export default async function WorkspaceSetupPage() {
   const { data: status, error } = await getUserSubscriptionStatus(user.id);
 
   if (error) {
-    toast({
-      title: "An unexpected error occurred",
+    console.error(error);
+
+    toast.error("An unexpected error occurred", {
       description:
         "Unable to fetch your subscription status. Please try again later.",
     });

app/dashboard/new-workspace/workspace-form.tsx

@@ -6,11 +6,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import type { User } from "next-auth";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 
 import type { Subscription } from "@/types/db";
 import { createWorkspace } from "@/lib/db/queries";
-import { toast } from "@/hooks/use-toast";
 import { EmojiPicker } from "@/components/emoji-picker";
 import { Button } from "@/components/ui/button";
 import {
@@ -57,8 +57,7 @@ export function WorkspaceForm({
     });
 
     if (data) {
-      toast({
-        title: "Workspace created",
+      toast.success("Workspace created", {
         description: `Your workspace "${name}" was created successfully.`,
       });
 
@@ -67,9 +66,8 @@ export function WorkspaceForm({
 
     if (error) {
       console.log(error, "Error");
-      toast({
-        variant: "destructive",
-        title: "Could not create your workspace",
+
+      toast.error("Could not create your workspace", {
         description:
           "Oops! Something went wrong, and we couldn't create your workspace. Try again or come back later.",
       });

app/layout.tsx

@@ -7,7 +7,7 @@ import { fontHandwriting, fontHeading, fontMono, fontSans } from "@/lib/fonts";
 import { absoluteUrl, cn } from "@/lib/utils";
 import { Providers } from "@/components/providers";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
-import { Toaster } from "@/components/ui/toaster";
+import { Toaster } from "@/components/ui/sonner";
 
 export const viewport: Viewport = {
   viewportFit: "cover",

components/sidebar/sidebar.tsx

@@ -12,11 +12,11 @@ import {
 } from "lucide-react";
 import type { User } from "next-auth";
 import { signOut } from "next-auth/react";
+import { toast } from "sonner";
 
 import type { Folder } from "@/types/db";
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
-import { toast } from "@/hooks/use-toast";
 import { Logo } from "../icons";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Button, buttonVariants } from "../ui/button";
@@ -30,13 +30,16 @@ type SidebarProps = React.ComponentProps<"aside"> & {
 
 export function Sidebar({ user, folders, className, ...props }: SidebarProps) {
   async function signOutHandler() {
-    const { dismiss } = toast({
-      title: "Signing out...",
-      description: "Please wait while we sign you out.",
-    });
+    // const { dismiss } = toast({
+    //   title: "Signing out...",
+    //   description: "Please wait while we sign you out.",
+    // });
 
-    await signOut();
-    dismiss();
+    toast.promise(signOut, {
+      loading: "Signing out...",
+      success: "You have been signed out.",
+      error: "Something went wrong.",
+    });
   }
 
   return (

components/site-footer/newsletter-subscription-form.tsx

@@ -2,9 +2,9 @@
 
 import { CheckCircle } from "lucide-react";
 import { useFormState, useFormStatus } from "react-dom";
+import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
-import { toast } from "@/hooks/use-toast";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
@@ -23,14 +23,12 @@ export function NewsletterSubscriptionForm() {
 
   const [state, formAction] = useFormState(subscribeToNewsletter, initialState);
 
-  // TODO: Add newsletter subscription logic here.
   async function subscribeToNewsletter(_: Form, _formData: FormData) {
-    // simulate a 1s delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    toast({
-      title: "Subscribed!",
-      description: "You have successfully subscribed to our newsletter.",
+    // TODO: Add newsletter subscription logic here.
+    toast.promise(new Promise((resolve) => setTimeout(resolve, 1500)), {
+      loading: "Subscribing...",
+      error: "Something went wrong.",
+      success: "You have successfully subscribed to our newsletter.",
     });
 
     return {

components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package.json

@@ -54,6 +54,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.2",
     "react-resizable-panels": "^1.0.4",
+    "sonner": "^1.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",