Merge branch 'feature/IO-2733-pwa-timer' into release/2024-09-13

client/src/components/update-alert/update-alert.component.jsx

@@ -1,13 +1,14 @@
 import { AlertOutlined } from "@ant-design/icons";
-import { Alert, Button, Col, Row, Space } from "antd";
+import { Alert, Button, Col, notification, Row, Space } from "antd";
 import i18n from "i18next";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectUpdateAvailable } from "../../redux/application/application.selectors";
 import { useRegisterSW } from "virtual:pwa-register/react";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import useCountDown from "../../utils/countdownHook";
 
 const mapStateToProps = createStructuredSelector({
   updateAvailable: selectUpdateAvailable
@@ -19,6 +20,13 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function UpdateAlert({ updateAvailable }) {
   const { t } = useTranslation();
+  const [
+    timeLeft,
+    {
+      start //pause, resume, reset
+    }
+  ] = useCountDown(180000, 1000);
+
   const {
     offlineReady: [offlineReady],
     needRefresh: [needRefresh],
@@ -40,11 +48,41 @@ export function UpdateAlert({ updateAvailable }) {
     }
   });
 
+  const ReloadNewVersion = useCallback(() => {
+    updateServiceWorker(true);
+    setTimeout(() => {
+      window.location.reload(true);
+    }, 2000);
+  }, [updateServiceWorker]);
+
   useEffect(() => {
-    if (import.meta.env.DEV) {
-      console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
+    if (needRefresh) {
+      start();
     }
-  }, [needRefresh, offlineReady]);
+  }, [start, needRefresh, offlineReady]);
+
+  useEffect(() => {
+    if (needRefresh && timeLeft < 60000) {
+      notification.open({
+        type: "warning",
+        closable: false,
+        duration: 65000,
+        key: "autoupdate",
+        message: t("general.actions.autoupdate", {
+          time: (timeLeft / 1000).toFixed(0),
+          app: InstanceRenderManager({
+            imex: "$t(titles.imexonline)",
+            rome: "$t(titles.romeonline)",
+            promanager: "$t(titles.promanager)"
+          })
+        }),
+        placement: "bottomRight"
+      });
+    }
+    if (needRefresh && timeLeft <= 0) {
+      ReloadNewVersion();
+    }
+  }, [timeLeft, t, needRefresh, ReloadNewVersion]);
 
   if (!needRefresh) return null;
 
@@ -75,9 +113,10 @@ export function UpdateAlert({ updateAvailable }) {
               <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
                 {i18n.t("general.actions.viewreleasenotes")}
               </Button>
-              <Button type="primary" onClick={() => updateServiceWorker(true)}>
-                {i18n.t("general.actions.refresh")}
+              <Button type="primary" onClick={() => ReloadNewVersion()}>
+                {i18n.t("general.actions.refresh")} {`(${(timeLeft / 1000).toFixed(0)} s)`}
               </Button>
+              <Button onClick={() => start(300000)}>{i18n.t("general.actions.delay")}</Button>
             </Space>
           </Col>
         </Row>

client/src/utils/countdownHook.js

@@ -0,0 +1,84 @@
+import React from "react";
+
+const useCountDown = (timeToCount = 60 * 1000, interval = 1000) => {
+  const [timeLeft, setTimeLeft] = React.useState(0);
+  const timer = React.useRef({});
+
+  const run = (ts) => {
+    if (!timer.current.started) {
+      timer.current.started = ts;
+      timer.current.lastInterval = ts;
+    }
+
+    const localInterval = Math.min(interval, timer.current.timeLeft || Infinity);
+    if (ts - timer.current.lastInterval >= localInterval) {
+      timer.current.lastInterval += localInterval;
+      setTimeLeft((timeLeft) => {
+        timer.current.timeLeft = timeLeft - localInterval;
+        return timer.current.timeLeft;
+      });
+    }
+
+    if (ts - timer.current.started < timer.current.timeToCount) {
+      timer.current.requestId = window.requestAnimationFrame(run);
+    } else {
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  };
+
+  const start = React.useCallback(
+    (ttc) => {
+      window.cancelAnimationFrame(timer.current.requestId);
+
+      const newTimeToCount = ttc !== undefined ? ttc : timeToCount;
+      timer.current.started = null;
+      timer.current.lastInterval = null;
+      timer.current.timeToCount = newTimeToCount;
+      timer.current.requestId = window.requestAnimationFrame(run);
+
+      setTimeLeft(newTimeToCount);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const pause = React.useCallback(() => {
+    window.cancelAnimationFrame(timer.current.requestId);
+    timer.current.started = null;
+    timer.current.lastInterval = null;
+    timer.current.timeToCount = timer.current.timeLeft;
+  }, []);
+
+  const resume = React.useCallback(
+    () => {
+      if (!timer.current.started && timer.current.timeLeft > 0) {
+        window.cancelAnimationFrame(timer.current.requestId);
+        timer.current.requestId = window.requestAnimationFrame(run);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const reset = React.useCallback(() => {
+    if (timer.current.timeLeft) {
+      window.cancelAnimationFrame(timer.current.requestId);
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  }, []);
+
+  const actions = React.useMemo(
+    () => ({ start, pause, resume, reset }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  React.useEffect(() => {
+    return () => window.cancelAnimationFrame(timer.current.requestId);
+  }, []);
+
+  return [timeLeft, actions];
+};
+
+export default useCountDown;