From 5cc27f852b02446659e0ab85305916c9f5e5a5f0 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 6 Aug 2025 00:12:19 +0200
Subject: feat: Implement pull-to-refresh functionality across various
 components

- Added `PullToRefresh` component to enable pull-to-refresh behavior in `StopList` and `Estimates` pages.
- Integrated `usePullToRefresh` hook to manage pull-to-refresh state and actions.
- Created `UpdateNotification` component to inform users of available updates from the service worker.
- Enhanced service worker management with `ServiceWorkerManager` class for better update handling and caching strategies.
- Updated CSS styles for new components and improved layout for better user experience.
- Refactored API caching logic in service worker to handle multiple endpoints and dynamic cache expiration.
- Added auto-refresh functionality for estimates data to keep information up-to-date.
---
 src/frontend/app/hooks/useAutoRefresh.ts | 63 ++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/frontend/app/hooks/useAutoRefresh.ts

(limited to 'src/frontend/app/hooks/useAutoRefresh.ts')

diff --git a/src/frontend/app/hooks/useAutoRefresh.ts b/src/frontend/app/hooks/useAutoRefresh.ts
new file mode 100644
index 0000000..172fa94
--- /dev/null
+++ b/src/frontend/app/hooks/useAutoRefresh.ts
@@ -0,0 +1,63 @@
+import { useEffect, useRef, useCallback } from "react";
+
+interface UseAutoRefreshOptions {
+  onRefresh: () => Promise<void>;
+  interval?: number;
+  enabled?: boolean;
+}
+
+export function useAutoRefresh({
+  onRefresh,
+  interval = 30000, // 30 seconds default
+  enabled = true,
+}: UseAutoRefreshOptions) {
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const refreshCallbackRef = useRef(onRefresh);
+
+  // Update callback ref when it changes
+  useEffect(() => {
+    refreshCallbackRef.current = onRefresh;
+  }, [onRefresh]);
+
+  const startAutoRefresh = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    if (enabled) {
+      intervalRef.current = setInterval(() => {
+        refreshCallbackRef.current();
+      }, interval);
+    }
+  }, [interval, enabled]);
+
+  const stopAutoRefresh = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    startAutoRefresh();
+    return stopAutoRefresh;
+  }, [startAutoRefresh, stopAutoRefresh]);
+
+  // Handle visibility change to pause/resume auto-refresh
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        stopAutoRefresh();
+      } else {
+        startAutoRefresh();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [startAutoRefresh, stopAutoRefresh]);
+
+  return { startAutoRefresh, stopAutoRefresh };
+}
-- 
cgit v1.3