STCOR-883: create events portal constant, move createPortal to Sessio…

…nEventsContainer

CHANGELOG.md

@@ -33,7 +33,7 @@
 * Include optional okapi interfaces, `consortia`, `roles`, `users-keycloak`. Refs STCOR-889.
 * useUserTenantPermissions hook - provide `isFetched` property. Refs STCOR-890.
 * Reword error message "Error: server is forbidden, unreachable or down. VPN issue?". Refs STCOR-893.
-* Move session timout banner to the bottom of the page. Refs STCOR-883.
+* Move session timeout banner to the bottom of the page. Refs STCOR-883.
 
 
 ## [10.1.1](https://github.com/folio-org/stripes-core/tree/v10.1.1) (2024-03-25)

src/App.js

@@ -12,6 +12,7 @@ import { destroyStore } from './mainActions';
 import css from './components/SessionEventContainer/style.css';
 
 import Root from './components/Root';
+import { eventsPortal } from './constants';
 
 const StrictWrapper = ({ children }) => {
   if (config.disableStrictMode) {
@@ -64,7 +65,7 @@ export default class StripesCore extends Component {
     return (
       <StrictWrapper>
         <div
-          id="events-portal"
+          id={eventsPortal}
           className={css.eventsContainer}
         />
         <Root

src/RootWithIntl.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
 import {
   Router,
   Switch,
@@ -76,11 +75,7 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
                           {(typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
                             <ModuleContainer id="content">
                               <OverlayContainer />
-                              {connectedStripes.config.useSecureTokens &&
-                                createPortal(<SessionEventContainer
-                                  history={history}
-                                />,
-                                document.getElementById('events-portal'))}
+                              <SessionEventContainer history={history} />
                               <Switch>
                                 <TitledRoute
                                   name="home"

src/components/SessionEventContainer/FixedLengthSessionWarning.js

@@ -49,9 +49,7 @@ const FixedLengthSessionWarning = () => {
     return '00:00';
   };
 
-  return <MessageBanner show contentClassName={css.fixedSessionBanner}><FormattedMessage
-    id="stripes-core.rtr.fixedLengthSession.timeRemaining"
-  /> {timestampFormatter()}</MessageBanner>;
+  return <MessageBanner show contentClassName={css.fixedSessionBanner}><FormattedMessage id="stripes-core.rtr.fixedLengthSession.timeRemaining" />{timestampFormatter()}</MessageBanner>;
 };
 
 export default FixedLengthSessionWarning;

src/components/SessionEventContainer/SessionEventContainer.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import createInactivityTimer from 'inactivity-timer';
 import ms from 'ms';
@@ -15,6 +16,7 @@ import {
 } from '../Root/constants';
 import { toggleRtrModal } from '../../okapiActions';
 import FixedLengthSessionWarning from './FixedLengthSessionWarning';
+import { eventsPortal } from '../../constants';
 
 //
 // event listeners
@@ -278,7 +280,7 @@ const SessionEventContainer = ({ history }) => {
     renderList.push(<FixedLengthSessionWarning key="FixedLengthSessionWarning" />);
   }
 
-  return renderList.length ? renderList : null;
+  return renderList.length ? createPortal(renderList, document.getElementById(eventsPortal)) : null;
 };
 
 SessionEventContainer.propTypes = {

src/constants/eventsPortal.js

@@ -0,0 +1,3 @@
+const EVENTS_PORTAL = 'events-portal';
+
+export default EVENTS_PORTAL;

src/constants/index.js

@@ -5,3 +5,4 @@ export { default as ssoErrorCodes } from './ssoErrorCodes';
 export { default as defaultErrors } from './defaultErrors';
 export { default as packageName } from './packageName';
 export { default as delimiters } from './delimiters';
+export { default as eventsPortal } from './eventsPortal';