Skip to content

Commit

Permalink
refactor: migrate to shadcn/ui sonner toaster
Browse files Browse the repository at this point in the history
Signed-off-by: rajput-hemant <[email protected]>
rajput-hemant committed Dec 25, 2023

Verified

This commit was signed with the committer’s verified signature.
rajput-hemant Hemant Rajput
1 parent e5b5c06 commit 8bf117e
Showing 13 changed files with 78 additions and 403 deletions.
43 changes: 19 additions & 24 deletions app/(auth)/components/auth-form.tsx
Original file line number Diff line number Diff line change
@@ -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);
5 changes: 2 additions & 3 deletions app/dashboard/(workspaces)/[workspaceId]/layout.tsx
Original file line number Diff line number Diff line change
@@ -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.",
});
}
7 changes: 4 additions & 3 deletions app/dashboard/new-workspace/page.tsx
Original file line number Diff line number Diff line change
@@ -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.",
});
10 changes: 4 additions & 6 deletions app/dashboard/new-workspace/workspace-form.tsx
Original file line number Diff line number Diff line change
@@ -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.",
});
2 changes: 1 addition & 1 deletion app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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",
Binary file modified bun.lockb
Binary file not shown.
17 changes: 10 additions & 7 deletions components/sidebar/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -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 (
14 changes: 6 additions & 8 deletions components/site-footer/newsletter-subscription-form.tsx
Original file line number Diff line number Diff line change
@@ -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 {
31 changes: 31 additions & 0 deletions components/ui/sonner.tsx
Original file line number Diff line number Diff line change
@@ -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 };
127 changes: 0 additions & 127 deletions components/ui/toast.tsx

This file was deleted.

35 changes: 0 additions & 35 deletions components/ui/toaster.tsx

This file was deleted.

189 changes: 0 additions & 189 deletions hooks/use-toast.ts

This file was deleted.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",

0 comments on commit 8bf117e

Please sign in to comment.