import React, { createContext, useContext, useCallback, useState } from 'react'; import { uuid } from 'uuidv4'; import ToastContainer from '../components/ToastContainer'; export interface IToastMessage { id: string; type?: 'success' | 'error' | 'info'; title: string; description?: string; } interface IToastContextData { addToast(message: Omit<IToastMessage, 'id'>): void; removeToast(id: string): void; } const ToastContext = createContext<IToastContextData>({} as IToastContextData); const ToastProvider: React.FC = ({ children }) => { const [messages, setMessages] = useState<IToastMessage[]>([]); const addToast = useCallback( ({ title, type, description }: Omit<IToastMessage, 'id'>) => { const id = uuid(); const toast = { id, type, title, description, }; setMessages(oldMessages => [...oldMessages, toast]); }, [], ); const removeToast = useCallback((id: string) => { setMessages(oldMessages => oldMessages.filter(message => message.id !== id), ); }, []); return ( <ToastContext.Provider value={{ addToast, removeToast }}> {children} <ToastContainer messages={messages} /> </ToastContext.Provider> ); }; function useToast(): IToastContextData { const context = useContext(ToastContext); if (!context) { throw new Error('useToast must be used within an ToastProvider'); } return context; } export { ToastProvider, useToast };