From b4c8264d86412a85b1e849325de782885505f23d Mon Sep 17 00:00:00 2001 From: Nikki Ysendoorn Date: Wed, 21 Feb 2024 16:51:14 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20[#645]=20change=20the=20SessionT?= =?UTF-8?q?rackerModal=20path=20and=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/App.js | 3 +- src/components/Form.js | 10 ++--- .../{ => Sessions}/SessionExpired.js | 18 +++++--- ...ModalTracker.js => SessionTrackerModal.js} | 6 +-- src/components/Sessions/index.js | 5 ++- src/components/Summary/CosignSummary.js | 8 ++-- .../CreateAppointment/CreateAppointment.js | 44 +++++++++---------- 7 files changed, 48 insertions(+), 46 deletions(-) rename src/components/{ => Sessions}/SessionExpired.js (70%) rename src/components/Sessions/{SessionModalTracker.js => SessionTrackerModal.js} (97%) diff --git a/src/components/App.js b/src/components/App.js index 06f59a039..af185823a 100644 --- a/src/components/App.js +++ b/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/*', diff --git a/src/components/Form.js b/src/components/Form.js index c8b0e85e0..df61f2cb2 100644 --- a/src/components/Form.js +++ b/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={ - + { onClearProcessingErrors={() => dispatch({type: 'CLEAR_PROCESSING_ERROR'})} onDestroySession={onDestroySession} /> - + } /> @@ -392,7 +392,7 @@ const Form = () => { path="stap/:step" element={ - + { component={FormStep} onDestroySession={onDestroySession} /> - + } /> diff --git a/src/components/SessionExpired.js b/src/components/Sessions/SessionExpired.js similarity index 70% rename from src/components/SessionExpired.js rename to src/components/Sessions/SessionExpired.js index 729eba8be..c40712f14 100644 --- a/src/components/SessionExpired.js +++ b/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 ( { ]; }; -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; diff --git a/src/components/Sessions/index.js b/src/components/Sessions/index.js index a2d870782..716b59121 100644 --- a/src/components/Sessions/index.js +++ b/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}; diff --git a/src/components/Summary/CosignSummary.js b/src/components/Summary/CosignSummary.js index b4515b321..6658a8366 100644 --- a/src/components/Summary/CosignSummary.js +++ b/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 ( - + - + ); }; diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.js b/src/components/appointments/CreateAppointment/CreateAppointment.js index c65b9759f..56ed67b33 100644 --- a/src/components/appointments/CreateAppointment/CreateAppointment.js +++ b/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 ( - - - - - {isLoading ? ( - - ) : ( - + + + + + + {isLoading ? ( + + ) : ( - - )} - - - - + )} + + + + + ); };