|
import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react'; |
|
import Toast, { ToastType } from '@/components/ui/Toast'; |
|
|
|
interface ToastContextProps { |
|
showToast: (message: string, type?: ToastType, duration?: number) => void; |
|
} |
|
|
|
const ToastContext = createContext<ToastContextProps | undefined>(undefined); |
|
|
|
export const useToast = () => { |
|
const context = useContext(ToastContext); |
|
if (!context) { |
|
throw new Error('useToast must be used within a ToastProvider'); |
|
} |
|
return context; |
|
}; |
|
|
|
interface ToastProviderProps { |
|
children: ReactNode; |
|
} |
|
|
|
export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => { |
|
const [toast, setToast] = useState<{ |
|
message: string; |
|
type: ToastType; |
|
visible: boolean; |
|
duration: number; |
|
}>({ |
|
message: '', |
|
type: 'info', |
|
visible: false, |
|
duration: 3000, |
|
}); |
|
|
|
const showToast = useCallback((message: string, type: ToastType = 'info', duration: number = 3000) => { |
|
setToast({ |
|
message, |
|
type, |
|
visible: true, |
|
duration, |
|
}); |
|
}, []); |
|
|
|
const hideToast = useCallback(() => { |
|
setToast((prev) => ({ ...prev, visible: false })); |
|
}, []); |
|
|
|
return ( |
|
<ToastContext.Provider value={{ showToast }}> |
|
{children} |
|
<Toast |
|
message={toast.message} |
|
type={toast.type} |
|
duration={toast.duration} |
|
onClose={hideToast} |
|
visible={toast.visible} |
|
/> |
|
</ToastContext.Provider> |
|
); |
|
}; |