toast hook

Author: izadoesdev

apps/dashboard/app/providers.tsx

@@ -12,6 +12,7 @@ import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { useState } from "react";
 import { OrganizationsProvider } from "@/components/providers/organizations-provider";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { useToastTracking } from "@/hooks/toast-hooks";
 
 const defaultQueryClientOptions = {
 	defaultOptions: {
@@ -53,7 +54,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
 				<TooltipProvider>
 					<FlagsProviderWrapper>
 						<OrganizationsProvider>
-							<NuqsAdapter>{children}</NuqsAdapter>
+							<ToastTracker>
+								<NuqsAdapter>{children}</NuqsAdapter>
+							</ToastTracker>
 						</OrganizationsProvider>
 					</FlagsProviderWrapper>
 				</TooltipProvider>
@@ -95,3 +98,8 @@ function FlagsProviderWrapper({ children }: { children: React.ReactNode }) {
 		</FlagsProvider>
 	);
 }
+
+function ToastTracker({ children }: { children: React.ReactNode }) {
+	useToastTracking();
+	return <>{children}</>;
+}

apps/dashboard/hooks/toast-hooks.ts

@@ -0,0 +1,20 @@
+import { track } from "@databuddy/sdk";
+import { useEffect, useRef } from "react";
+import { useSonner } from "sonner";
+
+export function useToastTracking() {
+    const { toasts } = useSonner();
+    const tracked = useRef(new Set<string | number>());
+
+    useEffect(() => {
+        for (const toast of toasts) {
+            if (!tracked.current.has(toast.id)) {
+                tracked.current.add(toast.id);
+                track("toast_shown", {
+                    type: toast.type, // success, error, warning, info
+                    message: toast.title,
+                });
+            }
+        }
+    }, [toasts]);
+}