🚚 [#645] change the SessionTrackerModal path and name

src/components/App.js

@@ -4,6 +4,7 @@ import {Navigate, Outlet, useMatch} from 'react-router-dom';
 import {Cosign} from 'components/CoSign';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import Form from 'components/Form';
+import SessionExpired from 'components/Sessions/SessionExpired';
 import {
   CreateAppointment,
   appointmentRoutes,
@@ -13,8 +14,6 @@ import useFormContext from 'hooks/useFormContext';
 import useQuery from 'hooks/useQuery';
 import useZodErrorMap from 'hooks/useZodErrorMap';
 
-import SessionExpired from './SessionExpired';
-
 export const routes = [
   {
     path: 'afspraak-annuleren/*',

src/components/Form.js

@@ -14,7 +14,7 @@ import Loader from 'components/Loader';
 import {ConfirmationView, StartPaymentView} from 'components/PostCompletionViews';
 import ProgressIndicator from 'components/ProgressIndicator';
 import RequireSubmission from 'components/RequireSubmission';
-import {SessionModalTracker} from 'components/Sessions';
+import {SessionTrackerModal} from 'components/Sessions';
 import SubmissionSummary from 'components/Summary';
 import {START_FORM_QUERY_PARAM} from 'components/constants';
 import {findNextApplicableStep} from 'components/utils';
@@ -343,7 +343,7 @@ const Form = () => {
         path="overzicht"
         element={
           <ErrorBoundary useCard>
-            <SessionModalTracker expiryDate={expiryDate}>
+            <SessionTrackerModal expiryDate={expiryDate}>
               <RequireSubmission
                 submission={state.submission}
                 form={form}
@@ -353,7 +353,7 @@ const Form = () => {
                 onClearProcessingErrors={() => dispatch({type: 'CLEAR_PROCESSING_ERROR'})}
                 onDestroySession={onDestroySession}
               />
-            </SessionModalTracker>
+            </SessionTrackerModal>
           </ErrorBoundary>
         }
       />
@@ -392,7 +392,7 @@ const Form = () => {
         path="stap/:step"
         element={
           <ErrorBoundary useCard>
-            <SessionModalTracker expiryDate={expiryDate}>
+            <SessionTrackerModal expiryDate={expiryDate}>
               <RequireSubmission
                 form={form}
                 submission={state.submission}
@@ -408,7 +408,7 @@ const Form = () => {
                 component={FormStep}
                 onDestroySession={onDestroySession}
               />
-            </SessionModalTracker>
+            </SessionTrackerModal>
           </ErrorBoundary>
         }
       />

src/components/SessionExpired.js → src/components/Sessions/SessionExpired.js

@@ -1,25 +1,29 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import Card from 'components/Card';
 import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
+import useSessionTimeout from 'hooks/useSessionTimeout';
 
-import {ConfigContext} from '../Context';
-import {flagNoActiveSubmission} from '../data/submissions';
-import useSessionTimeout from '../hooks/useSessionTimeout';
+import {ConfigContext} from '../../Context';
+import {flagNoActiveSubmission} from '../../data/submissions';
 
 const SessionExpired = () => {
   const config = useContext(ConfigContext);
   const [expired] = useSessionTimeout();
 
+  // codecov:ignore:start
   if (!config.debug && !expired) {
     throw new Error("The session isn't expired");
   }
+  // codecov:ignore:end
 
-  flagNoActiveSubmission();
-  window.localStorage.clear();
-  window.sessionStorage.clear();
+  useEffect(() => {
+    flagNoActiveSubmission();
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+  });
 
   return (
     <Card

src/components/Sessions/SessionModalTracker.js → src/components/Sessions/SessionTrackerModal.js

@@ -44,7 +44,7 @@ const useTriggerWarning = numSeconds => {
   ];
 };
 
-const SessionModalTracker = ({expiryDate = null, children}) => {
+const SessionTrackerModal = ({expiryDate = null, children}) => {
   const [warningDismissed, setWarningDismissed] = useState(false);
 
   // re-render when the session is expired to show the error message
@@ -86,7 +86,7 @@ const SessionModalTracker = ({expiryDate = null, children}) => {
   );
 };
 
-SessionModalTracker.propTypes = {
+SessionTrackerModal.propTypes = {
   expiryDate: PropTypes.instanceOf(Date),
   children: PropTypes.node,
 };
@@ -142,4 +142,4 @@ ExpiryModal.propTypes = {
   setWarningDismissed: PropTypes.func.isRequired,
 };
 
-export default SessionModalTracker;
+export default SessionTrackerModal;

src/components/Sessions/index.js

@@ -1 +1,4 @@
-export {default as SessionModalTracker} from './SessionModalTracker';
+import SessionExpired from './SessionExpired.js';
+import SessionTrackerModal from './SessionTrackerModal';
+
+export {SessionExpired, SessionTrackerModal};

src/components/Summary/CosignSummary.js

@@ -5,7 +5,7 @@ import {useAsync} from 'react-use';
 
 import {post} from 'api';
 import {LiteralsProvider} from 'components/Literal';
-import {SessionModalTracker} from 'components/Sessions';
+import {SessionTrackerModal} from 'components/Sessions';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 import useRecycleSubmission from 'hooks/useRecycleSubmission';
 import useSessionTimeout from 'hooks/useSessionTimeout';
@@ -73,7 +73,7 @@ const CosignSummary = ({
     await destroySession();
   };
 
-  const [expiryDate] = useSessionTimeout(async () => {
+  const [, expiryDate] = useSessionTimeout(async () => {
     await destroySession();
   });
 
@@ -82,7 +82,7 @@ const CosignSummary = ({
   }
 
   return (
-    <SessionModalTracker expiryDate={expiryDate}>
+    <SessionTrackerModal expiryDate={expiryDate}>
       <LiteralsProvider literals={form.literals}>
         <GenericSummary
           title={
@@ -101,7 +101,7 @@ const CosignSummary = ({
           onLogout={onLogout}
         />
       </LiteralsProvider>
-    </SessionModalTracker>
+    </SessionTrackerModal>
   );
 };
 

src/components/appointments/CreateAppointment/CreateAppointment.js

@@ -6,7 +6,7 @@ import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
-import {SessionModalTracker} from 'components/Sessions';
+import {SessionTrackerModal} from 'components/Sessions';
 import {checkMatchesPath} from 'components/utils/routers';
 import useFormContext from 'hooks/useFormContext';
 import useGetOrCreateSubmission from 'hooks/useGetOrCreateSubmission';
@@ -36,7 +36,7 @@ const CreateAppointment = () => {
   } = useGetOrCreateSubmission(form, skipSubmissionCreation);
   if (error) throw error;
 
-  const [sessionExpired, expiryDate, resetSession] = useSessionTimeout(clearSubmission);
+  const [sessionExpired, expiryDate, resetSession] = useSessionTimeout();
 
   const supportsMultipleProducts = form?.appointmentOptions.supportsMultipleProducts ?? false;
 
@@ -55,31 +55,27 @@ const CreateAppointment = () => {
 
   return (
     <AppointmentConfigContext.Provider value={{supportsMultipleProducts}}>
-      <CreateAppointmentState
-        currentStep={currentStep}
-        submission={submission}
-        resetSession={reset}
-      >
-        <FormDisplay progressIndicator={progressIndicator}>
-          <Wrapper sessionExpired={sessionExpired} title={form.name}>
-            <ErrorBoundary>
-              {isLoading ? (
-                <Loader modifiers={['centered']} />
-              ) : (
-                <SessionModalTracker
-                  expired={sessionExpired}
-                  expiryDate={expiryDate}
-                  onNavigate={reset}
-                >
+      <SessionTrackerModal expiryDate={expiryDate}>
+        <CreateAppointmentState
+          currentStep={currentStep}
+          submission={submission}
+          resetSession={reset}
+        >
+          <FormDisplay progressIndicator={progressIndicator}>
+            <Wrapper sessionExpired={sessionExpired} title={form.name}>
+              <ErrorBoundary>
+                {isLoading ? (
+                  <Loader modifiers={['centered']} />
+                ) : (
                   <LiteralsProvider literals={form.literals}>
                     <Outlet />
                   </LiteralsProvider>
-                </SessionModalTracker>
-              )}
-            </ErrorBoundary>
-          </Wrapper>
-        </FormDisplay>
-      </CreateAppointmentState>
+                )}
+              </ErrorBoundary>
+            </Wrapper>
+          </FormDisplay>
+        </CreateAppointmentState>
+      </SessionTrackerModal>
     </AppointmentConfigContext.Provider>
   );
 };