54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
|
|
|
type ToastType = 'success' | 'error' | 'info';
|
|
|
|
interface ToastMessage {
|
|
id: number;
|
|
message: string;
|
|
type: ToastType;
|
|
}
|
|
|
|
interface ToastContextType {
|
|
toasts: ToastMessage[];
|
|
addToast: (message: string, type: ToastType) => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
|
|
|
export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
|
const [toasts, setToasts] = useState<ToastMessage[]>([]);
|
|
|
|
const addToast = useCallback((message: string, type: ToastType) => {
|
|
const id = Date.now();
|
|
setToasts((prev) => [...prev, { id, message, type }]);
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
}, 4000);
|
|
}, []);
|
|
|
|
const value = {
|
|
toasts,
|
|
addToast,
|
|
};
|
|
|
|
return <ToastContext.Provider value={value}>{children}</ToastContext.Provider>;
|
|
};
|
|
|
|
// FIX: Modified useToast to return the full context including `toasts` array,
|
|
// so that ToastContainer can access it. Kept helper functions for backward compatibility.
|
|
export const useToast = (): ToastContextType & {
|
|
success: (message: string) => void;
|
|
error: (message: string) => void;
|
|
info: (message: string) => void;
|
|
} => {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error('useToast must be used within a ToastProvider');
|
|
}
|
|
return {
|
|
...context,
|
|
success: (message: string) => context.addToast(message, 'success'),
|
|
error: (message: string) => context.addToast(message, 'error'),
|
|
info: (message: string) => context.addToast(message, 'info'),
|
|
};
|
|
}; |