Re-enable timeout polling on CPS, market statistics & uptime on visibility change

Author: tombertrand

src/api/contexts/MarketStatistics.tsx

@@ -39,7 +39,7 @@ export interface Context {
   isError: boolean;
 }
 
-let pollMarketStatisticsInterval: number | undefined;
+let pollMarketStatisticsTimeout: number | undefined;
 
 export const MarketStatisticsContext = React.createContext<Context>({
   marketStatistics: {
@@ -77,7 +77,7 @@ const Provider: React.FC = ({ children }) => {
   const { fiat } = React.useContext(PreferencesContext);
 
   const getMarketStatistics = async (fiat: string) => {
-    clearTimeout(pollMarketStatisticsInterval);
+    clearTimeout(pollMarketStatisticsTimeout);
 
     setIsError(false);
     setIsLoading(true);
@@ -98,16 +98,27 @@ const Provider: React.FC = ({ children }) => {
     setIsInitialLoading(false);
     setIsLoading(false);
 
-    pollMarketStatisticsInterval = window.setTimeout(() => {
-      if (document.visibilityState !== 'visible') return;
+    pollMarketStatisticsTimeout = window.setTimeout(() => {
       getMarketStatistics(fiat);
     }, 7500);
   };
 
   React.useEffect(() => {
+    function visibilityChange() {
+      if (document.visibilityState === "visible") {
+        getMarketStatistics(fiat);
+      } else {
+        clearTimeout(pollMarketStatisticsTimeout);
+      }
+    }
+
     getMarketStatistics(fiat);
+    window.addEventListener("visibilitychange", visibilityChange);
 
-    return () => clearInterval(pollMarketStatisticsInterval);
+    return () => {
+      clearTimeout(pollMarketStatisticsTimeout);
+      window.removeEventListener("visibilitychange", visibilityChange);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/api/hooks/use-confirmations-per-second.tsx

@@ -4,12 +4,13 @@ export interface UseUptimeReturn {
   confirmationsPerSecond: string | undefined;
 }
 
-let confirmationsPerSecondInterval: number | undefined;
+let confirmationsPerSecondTimeout: number | undefined;
 
 const useConfirmationsPerSecond = (): UseUptimeReturn => {
   const [confirmationsPerSecond, setConfirmationsPerSecond] = React.useState();
 
   const getConfirmationsPerSecond = async () => {
+    clearTimeout(confirmationsPerSecondTimeout);
     try {
       const res = await fetch(`/api/confirmations-per-second`);
       const { cps } = await res.json();
@@ -19,16 +20,27 @@ const useConfirmationsPerSecond = (): UseUptimeReturn => {
       setConfirmationsPerSecond(undefined);
     }
 
-    confirmationsPerSecondInterval = window.setTimeout(() => {
-      if (document.visibilityState !== "visible") return;
+    confirmationsPerSecondTimeout = window.setTimeout(() => {
       getConfirmationsPerSecond();
     }, 3000);
   };
 
   React.useEffect(() => {
+    function visibilityChange() {
+      if (document.visibilityState === "visible") {
+        getConfirmationsPerSecond();
+      } else {
+        clearTimeout(confirmationsPerSecondTimeout);
+      }
+    }
+
     getConfirmationsPerSecond();
+    window.addEventListener("visibilitychange", visibilityChange);
 
-    return () => clearInterval(confirmationsPerSecondInterval);
+    return () => {
+      clearTimeout(confirmationsPerSecondTimeout);
+      window.removeEventListener("visibilitychange", visibilityChange);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/api/hooks/use-uptime.tsx

@@ -11,30 +11,45 @@ export interface UseUptimeReturn {
 }
 
 const ONE_MINUTE = 1000 * 60;
+let uptimeTimeout: number | undefined;
 
 const useUptime = (): UseUptimeReturn => {
   const [uptime, setUptime] = React.useState({} as UptimeResponse);
   const [isError, setIsError] = React.useState(false);
 
   const getUptime = async () => {
-    const json = await rpc("uptime");
+    clearTimeout(uptimeTimeout);
+    setIsError(false);
 
-    !json || json.error ? setIsError(true) : setUptime(json);
-  };
+    try {
+      const json = await rpc("uptime");
 
-  React.useEffect(() => {
-    if (!uptime?.seconds) return;
+      !json || json.error ? setIsError(true) : setUptime(json);
+    } catch (err) {
+      setIsError(true);
+    }
 
-    setTimeout(() => {
-      if (document.visibilityState !== "visible") return;
-      setUptime({
-        seconds: (parseInt(uptime.seconds) + 60).toString(),
-      });
+    uptimeTimeout = window.setTimeout(() => {
+      getUptime();
     }, ONE_MINUTE);
-  }, [uptime]);
+  };
 
   React.useEffect(() => {
+    function visibilityChange() {
+      if (document.visibilityState === "visible") {
+        getUptime();
+      } else {
+        clearTimeout(uptimeTimeout);
+      }
+    }
     getUptime();
+    window.addEventListener("visibilitychange", visibilityChange);
+
+    return () => {
+      clearTimeout(uptimeTimeout);
+      window.removeEventListener("visibilitychange", visibilityChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return { uptime, isError };