add auto refresh

components/OverallStatus.tsx

@@ -1,5 +1,25 @@
 import { Center, Title } from '@mantine/core'
 import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react'
+import { useEffect, useState } from 'react';
+
+function useWindowVisibility() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      console.log('visibility change', document.visibilityState);
+      setIsVisible(document.visibilityState === 'visible');
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  return isVisible;
+}
 
 export default function OverallStatus({
   state,
@@ -16,11 +36,28 @@ export default function OverallStatus({
     statusString = 'All systems operational'
     icon = <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
   } else {
-    statusString = `Some systems not operational (${state.overallDown} out of ${
+    statusString = `Some systems not operational (${state.overallDown} out of ${state.overallUp + state.overallDown})`
-      state.overallUp + state.overallDown
-    })`
   }
 
+  const [openTime] = useState(Math.round(Date.now() / 1000))
+  const [currentTime, setCurrentTime] = useState(Math.round(Date.now() / 1000))
+  const isWindowVisible = useWindowVisibility();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!isWindowVisible) {
+        return
+      }
+      if (currentTime - state.lastUpdate > 300 && currentTime - openTime > 30) {
+        // trigger a re-fetch
+        window.location.reload()
+      }
+      setCurrentTime(Math.round(Date.now() / 1000))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  })
+
   return (
     <>
       <Center>{icon}</Center>
@@ -29,9 +66,7 @@ export default function OverallStatus({
       </Title>
       <Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
         Last updated on:{' '}
-        {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${
+        {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${currentTime - state.lastUpdate} sec ago)`}
-          Math.round(Date.now() / 1000) - state.lastUpdate
-        } sec ago)`}
       </Title>
     </>
   )