tercul-frontend/client/src/hooks/use-toast.ts
mukimovd 5fe41c1b1d Implement a simple notification system for important updates and messages
Refactors Toast component to a simpler, functional implementation using useState, useEffect, and createPortal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/424807ac-864a-4f04-9919-0e483ee2b3ff.jpg
2025-05-08 00:34:08 +00:00

51 lines
1003 B
TypeScript

// Basic toast hook for notifications
import { useState } from "react";
type ToastVariant = "default" | "destructive";
interface ToastOptions {
title?: string;
description?: string;
variant?: ToastVariant;
duration?: number;
id?: number;
className?: string;
}
export function useToast() {
const [toasts, setToasts] = useState<ToastOptions[]>([]);
// Create a function that matches the expected signature in BlogManagement
const toast = (options: ToastOptions) => {
const id = Date.now();
const newToast = {
...options,
id,
duration: options.duration || 3000,
};
setToasts((prev) => [...prev, newToast]);
// Auto dismiss
setTimeout(() => {
dismiss(id);
}, newToast.duration);
return id;
};
const dismiss = (id?: number) => {
if (id) {
setToasts((prev) => prev.filter((toast) => toast.id !== id));
} else {
setToasts([]);
}
};
return {
toast,
dismiss,
toasts
};
}