refactor: moved toast message clear logic from toast component to toa…

…st context provider

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}
       </BrandText>
     </View>
   );

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<MiniToastProps>(initialValues.toast);
+  const [toast, setToast] = useState<MiniToastProps>(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 (
     <ToastContext.Provider value={{ setToast, toast }}>
       <MiniToast {...toast} />