feat: integrate react-hot-toast for improved notification handling and replace sonner

Author: kingRayhan

package.json

@@ -59,6 +59,7 @@
     "react": "^19",
     "react-dom": "^19",
     "react-hook-form": "^7.55.0",
+    "react-hot-toast": "^2.5.2",
     "recharts": "^2.15.1",
     "schema-dts": "^1.1.5",
     "sonner": "^2.0.5",

src/app/dashboard/_components/ArticleList.tsx

@@ -7,8 +7,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import VisibilitySensor from "@/components/VisibilitySensor";
@@ -21,7 +19,7 @@ import {
   PlusIcon,
 } from "@radix-ui/react-icons";
 
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
 import { TrashIcon } from "lucide-react";
 import Link from "next/link";
 
@@ -39,6 +37,10 @@ const ArticleList = () => {
     },
   });
 
+  // const deleteMutation = useMutation({
+  //   mutationFn: ac
+  // })
+
   const appConfirm = useAppConfirm();
 
   return (

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Toaster } from "@/components/ui/sonner";
+import { Toaster } from "@/components/toast";
 import "../styles/app.css";
 
 import * as sessionActions from "@/backend/services/session.actions";

src/app/test/page.tsx

@@ -1,13 +1,22 @@
 "use client";
 
-import { useLoginPopup } from "@/components/app-login-popup";
-import React from "react";
+import { myBookmarks } from "@/backend/services/bookmark.action";
+import { toast } from "@/components/toast";
+import { actionPromisify, sleep } from "@/lib/utils";
 
 const Page = () => {
-  const pp = useLoginPopup();
   return (
     <div>
-      <button onClick={() => pp.show()}>open</button>
+      <button
+        onClick={async () => {
+          const res = await toast.promise(
+            myBookmarks({ limit: 1, page: 1, offset: 0 })
+          );
+          toast.success(res!);
+        }}
+      >
+        open
+      </button>
     </div>
   );
 };

src/backend/services/article.actions.ts

@@ -16,6 +16,7 @@ import { ArticleRepositoryInput } from "./inputs/article.input";
 import { authID } from "./session.actions";
 import { syncTagsWithArticles } from "./tag.action";
 import { addDays } from "date-fns";
+import { ActionResponse } from "../models/action-contracts";
 
 export async function createMyArticle(
   _input: z.infer<typeof ArticleRepositoryInput.createMyArticleInput>
@@ -184,7 +185,9 @@ export async function updateMyArticle(
   }
 }
 
-export const scheduleArticleDelete = async (article_id: string) => {
+export const scheduleArticleDelete = async (
+  article_id: string
+): Promise<ActionResponse<unknown>> => {
   try {
     const session_userID = await authID();
     if (!session_userID) {

src/components/providers/CommonProviders.tsx

@@ -12,6 +12,7 @@ import { ThemeProvider } from "next-themes";
 import { AppConfirmProvider } from "../app-confirm";
 import { AppAlertProvider } from "../app-alert";
 import { AppLoginPopupProvider } from "../app-login-popup";
+import { Toaster } from "../toast";
 
 interface Props {
   session: SessionResult;
@@ -28,7 +29,10 @@ const CommonProviders: React.FC<PropsWithChildren<Props>> = ({
           <AppConfirmProvider>
             <AppAlertProvider>
               <AppLoginPopupProvider>
-                <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
+                <ThemeProvider attribute="data-theme">
+                  <Toaster />
+                  {children}
+                </ThemeProvider>
               </AppLoginPopupProvider>
             </AppAlertProvider>
           </AppConfirmProvider>

src/components/toast.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import _toast, {
+  Toaster as ReactHotToast,
+  ToasterProps,
+} from "react-hot-toast";
+
+const toast = {
+  success: function (message: string) {
+    _toast.success(message);
+  },
+  error: function (message: string) {
+    _toast.error(message);
+  },
+  promise: function <T = unknown>(
+    promise: Promise<T> | (() => Promise<T>),
+    config?: {
+      loading: string;
+      success?: string;
+      error?: string;
+    }
+  ) {
+    return _toast.promise(promise, {
+      loading: config?.loading ?? "Loading",
+      success: config?.success ?? "Successful",
+      error: config?.error ?? "Unsuccessful",
+    });
+  },
+  // custom: function (() => React.ReactNo) {
+  // toast((t) => (
+  //   <span>
+  //     Custom and <b>bold</b>
+  //     <button onClick={() => toast.dismiss(t.id)}>
+  //       Dismiss
+  //     </button>
+  //   </span>
+  // ));
+  // },
+};
+
+const Toaster = (props: ToasterProps) => {
+  return <ReactHotToast {...props} />;
+};
+
+export { toast, Toaster };

src/components/ui/sonner.tsx

@@ -1,4 +1,6 @@
+import { ActionResponse } from "@/backend/models/action-contracts";
 import { clsx, type ClassValue } from "clsx";
+import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 import { z, ZodAnyDef, ZodObject } from "zod";
 
@@ -110,3 +112,49 @@ export function filterUndefined<T>(
     Object.entries(mapping).filter(([_, value]) => value !== undefined)
   ) as Partial<Record<string, any>>;
 }
+
+// Improved with automatic type inference
+export const actionPromisify = async <T = any>(
+  action: Promise<ActionResponse<T>>
+): Promise<T> => {
+  const promise = new Promise<T>(async (resolve, reject) => {
+    try {
+      const resolvedAction = await action;
+
+      if (!resolvedAction) {
+        reject("Action returned undefined");
+        return;
+      }
+
+      if (!resolvedAction.success) {
+        // @ts-ignore
+        reject(resolvedAction.error ?? "Unknown error occurred");
+        return;
+      }
+
+      if (resolvedAction.success) {
+        resolve(resolvedAction.data);
+        return;
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        reject(error.message);
+      } else {
+        reject("An unexpected error occurred");
+      }
+    }
+  });
+
+  // if (options?.withToast) {
+  //   toast.promise(promise, {
+  //     loading: options?.messages?.loading ?? "Loading...",
+  //     success: options?.messages?.success ?? "Success!",
+  //     error: (errorMsg: string) => errorMsg || "Operation failed",
+  //   });
+  // }
+
+  return promise;
+};
+
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(() => resolve("Hello"), ms));