diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index 5762bef155..bfc3603592 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { View, useWindowDimensions } from "react-native"; import { Spinner } from "./Spinner"; @@ -30,7 +30,7 @@ type ToastVariantType = "solid" | "outline"; export type MiniToastProps = { status?: ToastStatusType; - message?: string; + message: string | null; variant?: ToastVariantType; duration?: number; topOffSet?: number; @@ -75,23 +75,8 @@ export const MiniToast = ({ showAlways = false, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); - const [toastMessage, setToastMessage] = useState(""); - useEffect(() => { - if (message) { - setToastMessage(message); - } - //always show toast when showAlways flag is enabled or status is loading - if (!showAlways && status !== "loading") { - const timeoutID = setTimeout(() => { - setToastMessage(""); - }, duration || 5000); - - return () => clearTimeout(timeoutID); - } - }, [message, duration, status, showAlways]); - - if (!toastMessage) { + if (!message) { return null; } @@ -134,7 +119,7 @@ export const MiniToast = ({ }, ]} > - {toastMessage} + {message} ); diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx index 3f5b98a104..a350444225 100644 --- a/packages/context/ToastProvider.tsx +++ b/packages/context/ToastProvider.tsx @@ -1,26 +1,42 @@ -import { ReactNode, createContext, useContext, useState } from "react"; +import { + ReactNode, + createContext, + useContext, + useEffect, + useState, +} from "react"; import { MiniToastProps, MiniToast } from "@/components/MiniToast"; -interface InitailValues { +interface DefaultValues { toast: MiniToastProps; setToast: (data: MiniToastProps) => void; } -const initialValues: InitailValues = { - toast: {}, +const defaultValues: DefaultValues = { + toast: { message: "" }, setToast: () => {}, }; -const ToastContext = createContext(initialValues); +const ToastContext = createContext(defaultValues); export const useToast = () => useContext(ToastContext); export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { - const [toast, setToast] = useState(initialValues.toast); + const [toast, setToast] = useState(defaultValues.toast); + useEffect(() => { + //always show toast when showAlways flag is enabled or status is loading + if (!toast.showAlways && toast.status !== "loading") { + const timeoutID = setTimeout(() => { + setToast(defaultValues.toast); + }, toast.duration || 5000); + + return () => clearTimeout(timeoutID); + } + }, [toast]); return (