From 72f98c783a19b4667a382bf97b92f09f5c046192 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 00:37:43 +0000
Subject: [PATCH] Fix toast auto-dismiss and add debugging

- Added console logging to debug toast lifecycle
- Improved toast ID generation with timestamp
- Limited toasts to max 3 at a time
- Toasts should now auto-dismiss after 3 seconds
---
 components/Toast.tsx          | 11 +++++++++--
 components/ToastContainer.tsx | 10 ++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/Toast.tsx b/components/Toast.tsx
index 18b9cac..f176fae 100644
--- a/components/Toast.tsx
+++ b/components/Toast.tsx
@@ -15,8 +15,15 @@ interface ToastProps {
 export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {
   useEffect(() => {
     if (duration > 0) {
-      const timer = setTimeout(onClose, duration)
-      return () => clearTimeout(timer)
+      console.log(`[Toast] Setting timer for ${duration}ms`)
+      const timer = setTimeout(() => {
+        console.log('[Toast] Auto-dismissing')
+        onClose()
+      }, duration)
+      return () => {
+        console.log('[Toast] Clearing timer')
+        clearTimeout(timer)
+      }
     }
   }, [duration, onClose])
 
diff --git a/components/ToastContainer.tsx b/components/ToastContainer.tsx
index 6a37309..8049ed1 100644
--- a/components/ToastContainer.tsx
+++ b/components/ToastContainer.tsx
@@ -27,11 +27,17 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastMessage[]>([])
 
   const showToast = useCallback((message: string, type: ToastType) => {
-    const id = Math.random().toString(36).substring(7)
-    setToasts((prev) => [...prev, { id, message, type }])
+    const id = `${Date.now()}-${Math.random().toString(36).substring(7)}`
+    console.log('[ToastContainer] Showing toast:', id, message)
+    setToasts((prev) => {
+      // Limit to 3 toasts at a time
+      const newToasts = [...prev, { id, message, type }]
+      return newToasts.slice(-3)
+    })
   }, [])
 
   const removeToast = useCallback((id: string) => {
+    console.log('[ToastContainer] Removing toast:', id)
     setToasts((prev) => prev.filter((toast) => toast.id !== id))
   }, [])