qpp-style 9.37.0 → 9.37.1

package/components/Footer/FooterUI.jsx

@@ -8,7 +8,6 @@ import { OpenInNewIcon } from "../../lib/SvgComponents";
 const infoTipLabel =
   "When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.";
 const { version: buildVersion } = pjson;
-
 const FooterUI = () => (
   <>
     <div className="feedback-session-sign-up">

package/components/Session/Session.jsx

@@ -11,45 +11,9 @@ const MINUTE = 60 * SECOND;
 const TWO_MINUTES = 2 * MINUTE;
 const DEFAULT_SESSION_CHECK_INTERVAL = TWO_MINUTES;
 
-// This Dialog shows up 2 minutes before the user session ends
-// giving the user an opportunity to refresh the token
-// or to sign out
-const InactiveDialog = () => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => logoutSession(window), TWO_MINUTES);
-    return () => clearInterval(timeout);
-  }, []);
-
-  return (
-    <Modal
-      useDesignSystem
-      title="You will be signed out within two minutes"
-      isOpen={isOpen}
-      primary={{
-        title: "Keep me signed in",
-        onClick: () => {
-          refreshSession();
-          setIsOpen(false);
-        },
-      }}
-      secondary={{
-        title: "Sign me out now",
-        onClick: () => logoutSession(window),
-      }}
-      onRequestClose={() => setIsOpen(false)}
-    >
-      <p>
-        You have been inactive for thirty minutes. For your security, we will
-        sign you out automatically.
-      </p>
-    </Modal>
-  );
-};
-
 // 120 seconds is 2 minutes
 const DEFAULT_WARNING_TIMEOUT_SECONDS = 120;
+
 function shouldShowInactiveDialog(
   timeRemainingSeconds,
   warningTimeoutSeconds = DEFAULT_WARNING_TIMEOUT_SECONDS,
@@ -58,18 +22,20 @@ function shouldShowInactiveDialog(
 }
 
 const Session = () => {
-  const [isInactiveDialogOpen, setIsInactiveDialogOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  let ttlInterval;
 
   useEffect(() => {
     let didCancel = false;
     const cookies = cookie.parse(document.cookie);
     const hasAuthToken = !!cookies.qpp_auth_token;
+
     async function isSessionValid() {
       if (hasAuthToken) {
         const timeRemaining = await fetchTtl(cookies.qpp_auth_token);
         // safeguard against unmounted component
         if (didCancel) return;
-
         // token expired
         if (timeRemaining === 0) {
           logoutSession(window);
@@ -77,23 +43,47 @@ const Session = () => {
         }
         // token is about to expire
         if (shouldShowInactiveDialog(timeRemaining)) {
-          setIsInactiveDialogOpen(true);
+          setIsOpen(true);
         }
       }
     }
-    isSessionValid();
-    const interval = setInterval(
-      isSessionValid,
-      DEFAULT_SESSION_CHECK_INTERVAL,
-    );
+
+    ttlInterval = setInterval(isSessionValid, DEFAULT_SESSION_CHECK_INTERVAL);
 
     return () => {
-      clearInterval(interval);
+      clearInterval(ttlInterval);
       didCancel = true;
     };
   }, []);
 
-  return <>{isInactiveDialogOpen && <InactiveDialog />}</>;
+  // This Dialog shows up 2 minutes before the user session ends
+  // giving the user an opportunity to refresh the token
+  // or to sign out
+  return (
+    <Modal
+      useDesignSystem
+      title="You will be signed out within two minutes"
+      isOpen={isOpen}
+      primary={{
+        title: "Keep me signed in",
+        onClick: () => {
+          refreshSession();
+          clearInterval(ttlInterval);
+          setIsOpen(false);
+        },
+      }}
+      secondary={{
+        title: "Sign me out now",
+        onClick: () => logoutSession(window),
+      }}
+      onRequestClose={() => setIsOpen(false)}
+    >
+      <p>
+        You have been inactive for thirty minutes. For your security, we will
+        sign you out automatically.
+      </p>
+    </Modal>
+  );
 };
 
 export default Session;