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 ${
- state.overallUp + state.overallDown
- })`
+ statusString = `Some systems not operational (${state.overallDown} out of ${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()} (${
- Math.round(Date.now() / 1000) - state.lastUpdate
- } sec ago)`}
+ {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${currentTime - state.lastUpdate} sec ago)`}
  </Title>
  </>
  )