feat: refresh providers and proxies on window regain focus

2 files changed, 25 insertions, 6 deletions

diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 01be151..fb18e59 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -23,7 +23,7 @@ import {
 
 import { getClashAPIConfig } from '../ducks/app';
 
-const { useEffect, useMemo, useCallback } = React;
+const { useEffect, useMemo, useCallback, useRef } = React;
 
 const mapStateToProps = s => ({
   apiConfig: getClashAPIConfig(s)
@@ -31,13 +31,33 @@ const mapStateToProps = s => ({
 
 function Proxies({ dispatch, groupNames, proxies, delay, proxyProviders }) {
   const { apiConfig } = useStoreState(mapStateToProps);
-  useEffect(() => {
-    dispatch(fetchProxies(apiConfig));
-  }, [dispatch, apiConfig]);
+  const refFetchedTimestamp = useRef({});
   const requestDelayAllFn = useCallback(
     () => dispatch(requestDelayAll(apiConfig)),
     [apiConfig, dispatch]
   );
+  const fetchProxiesHooked = useCallback(() => {
+    refFetchedTimestamp.current.startAt = new Date();
+    dispatch(fetchProxies(apiConfig)).then(() => {
+      refFetchedTimestamp.current.completeAt = new Date();
+    });
+  }, [apiConfig, dispatch]);
+  useEffect(() => {
+    // fetch it now
+    fetchProxiesHooked();
+
+    // arm a window on focus listener to refresh it
+    const fn = () => {
+      if (
+        refFetchedTimestamp.current.startAt &&
+        new Date() - refFetchedTimestamp.current.startAt > 3e4 // 30s
+      ) {
+        fetchProxiesHooked();
+      }
+    };
+    window.addEventListener('focus', fn, false);
+    return () => window.removeEventListener('focus', fn, false);
+  }, [fetchProxiesHooked]);
   const icon = useMemo(() => <Zap width={16} />, []);
 
   return (
diff --git a/src/components/StateProvider.js b/src/components/StateProvider.js
index adb1b24..1f3e4d9 100644
--- a/src/components/StateProvider.js
+++ b/src/components/StateProvider.js
@@ -34,8 +34,7 @@ export default function Provider({ initialState, children }) {
     }
   }, [getState]);
   const dispatch = useCallback(
-    (actionId, fn, thunk) => {
-      // if (thunk) return thunk(dispatch, getState);
+    (actionId, fn) => {
       if (typeof actionId === 'function') return actionId(dispatch, getState);
 
       const stateNext = produce(getState(), fn);