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([]) 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)) }, [])