STCOR-842 refactor away from deprecated getChildContext (#1481)

`getChildContext` will be deprecated in React v19. `AddContext` can be eliminated completely; it duplicates the functionality offered by `StripesContext`. Refs STCOR-842
folio-org · Jun 3, 2024 · d1cdfa8 · d1cdfa8
1 parent 9d7cee9
commit d1cdfa8
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 146 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Implement password validation for Login Page. Refs STCOR-741.
 * Avoid deprecated `defaultProps` for functional components. Refs STCOR-844..
 * Update session data with values from `_self` request on reload. Refs STCOR-846.
+* Avoid deprecated `getChildContext`. Refs STCOR-842.
 
 ## [10.1.0](https://github.com/folio-org/stripes-core/tree/v10.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v10.0.0...v10.1.0)

diff --git a/src/AddContext.js b/src/AddContext.js
diff --git a/src/AppRoutes.js b/src/AppRoutes.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { connectFor } from '@folio/stripes-connect';
 
 import { StripesContext } from './StripesContext';
-import AddContext from './AddContext';
 import TitleManager from './components/TitleManager';
 import RouteErrorBoundary from './components/RouteErrorBoundary';
 import { getEventHandlers } from './handlerService';
@@ -62,21 +61,19 @@ const AppRoutes = ({ modules, stripes }) => {
 
         return (
           <StripesContext.Provider value={moduleStripes}>
-            <AddContext context={{ stripes: moduleStripes }}>
-              <ModuleHierarchyProvider module={module.module}>
-                <div id={`${name}-module-display`} data-module={module.module} data-version={module.version}>
-                  <RouteErrorBoundary
-                    escapeRoute={module.home ?? module.route}
-                    moduleName={displayName}
-                    stripes={moduleStripes}
-                  >
-                    <TitleManager page={displayName}>
-                      <ModuleComponent {...props} connect={connect} stripes={moduleStripes} actAs="app" />
-                    </TitleManager>
-                  </RouteErrorBoundary>
-                </div>
-              </ModuleHierarchyProvider>
-            </AddContext>
+            <ModuleHierarchyProvider module={module.module}>
+              <div id={`${name}-module-display`} data-module={module.module} data-version={module.version}>
+                <RouteErrorBoundary
+                  escapeRoute={module.home ?? module.route}
+                  moduleName={displayName}
+                  stripes={moduleStripes}
+                >
+                  <TitleManager page={displayName}>
+                    <ModuleComponent {...props} connect={connect} stripes={moduleStripes} actAs="app" />
+                  </TitleManager>
+                </RouteErrorBoundary>
+              </div>
+            </ModuleHierarchyProvider>
           </StripesContext.Provider>
         );
       }}

diff --git a/src/moduleRoutes.js → src/ModuleRoutes.js b/src/moduleRoutes.js → src/ModuleRoutes.js
diff --git a/src/RootWithIntl.js b/src/RootWithIntl.js
@@ -10,7 +10,7 @@ import { CookiesProvider } from 'react-cookie';
 import { connectFor } from '@folio/stripes-connect';
 import { Callout, HotKeys } from '@folio/stripes-components';
 
-import ModuleRoutes from './moduleRoutes';
+import ModuleRoutes from './ModuleRoutes';
 import events from './events';
 
 import {

diff --git a/src/components/BadRequestScreen/BadRequestScreen.js b/src/components/BadRequestScreen/BadRequestScreen.js
@@ -3,44 +3,38 @@ import { FormattedMessage } from 'react-intl';
 
 import { Headline } from '@folio/stripes-components';
 
-import AddContext from '../../AddContext';
 import Pluggable from '../../Pluggable';
-import { useStripes } from '../../StripesContext';
 
 import css from './BadRequestScreen.css';
 
 const BadRequestScreen = () => {
-  const stripes = useStripes();
-
   return (
-    <AddContext context={{ stripes }}>
-      <Pluggable type="frontpage">
-        <div className={css.titleWrap}>
-          <Headline
-            faded
-            tag="h1"
-            margin="none"
-            className={css.title}
-          >
-            <FormattedMessage id="stripes-core.front.error.header" />
-          </Headline>
-          <Headline
-            faded
-            tag="h3"
-            margin="none"
-            className={css.title}
-          >
-            <FormattedMessage
-              id="stripes-core.front.error.general.message"
-              values={{
-                url: window.location.href,
-                br: <br />,
-              }}
-            />
-          </Headline>
-        </div>
-      </Pluggable>
-    </AddContext>
+    <Pluggable type="frontpage">
+      <div className={css.titleWrap}>
+        <Headline
+          faded
+          tag="h1"
+          margin="none"
+          className={css.title}
+        >
+          <FormattedMessage id="stripes-core.front.error.header" />
+        </Headline>
+        <Headline
+          faded
+          tag="h3"
+          margin="none"
+          className={css.title}
+        >
+          <FormattedMessage
+            id="stripes-core.front.error.general.message"
+            values={{
+              url: window.location.href,
+              br: <br />,
+            }}
+          />
+        </Headline>
+      </div>
+    </Pluggable>
   );
 };
 

diff --git a/src/components/Front.js b/src/components/Front.js
@@ -7,19 +7,16 @@ import { FormattedMessage } from 'react-intl';
 import Pluggable from '../Pluggable';
 
 import css from './Front.css';
-import AddContext from '../AddContext';
 
 const Front = ({ stripes }) => {
   const tag = get(stripes, 'config.welcomeMessage') || 'stripes-core.front.welcome';
 
   return (
-    <AddContext context={{ stripes }}>
-      <Pluggable type="frontpage">
-        <div className={css.frontWrap}>
-          <Headline faded tag="h1" margin="none" className={css.frontTitle}><FormattedMessage id={tag} /></Headline>
-        </div>
-      </Pluggable>
-    </AddContext>
+    <Pluggable type="frontpage">
+      <div className={css.frontWrap}>
+        <Headline faded tag="h1" margin="none" className={css.frontTitle}><FormattedMessage id={tag} /></Headline>
+      </div>
+    </Pluggable>
   );
 };
 

diff --git a/src/components/NoPermissionScreen/NoPermissionScreen.js b/src/components/NoPermissionScreen/NoPermissionScreen.js
@@ -3,29 +3,23 @@ import { FormattedMessage } from 'react-intl';
 
 import { Headline } from '@folio/stripes-components';
 
-import AddContext from '../../AddContext';
 import Pluggable from '../../Pluggable';
-import { useStripes } from '../../StripesContext';
 
 import css from './NoPermissionScreen.css';
 
 const NoPermissionScreen = () => {
-  const stripes = useStripes();
-
   return (
-    <AddContext context={{ stripes }}>
-      <Pluggable type="frontpage">
-        <div className={css.titleWrap}>
-          <Headline
-            faded
-            tag="h2"
-            className={css.title}
-          >
-            <FormattedMessage id="stripes-core.front.error.noPermission" />
-          </Headline>
-        </div>
-      </Pluggable>
-    </AddContext>
+    <Pluggable type="frontpage">
+      <div className={css.titleWrap}>
+        <Headline
+          faded
+          tag="h2"
+          className={css.title}
+        >
+          <FormattedMessage id="stripes-core.front.error.noPermission" />
+        </Headline>
+      </div>
+    </Pluggable>
   );
 };
 

diff --git a/src/components/ResetPasswordNotAvailableScreen/ResetPasswordNotAvailableScreen.js b/src/components/ResetPasswordNotAvailableScreen/ResetPasswordNotAvailableScreen.js
@@ -3,38 +3,32 @@ import { FormattedMessage } from 'react-intl';
 
 import { Headline } from '@folio/stripes-components';
 
-import AddContext from '../../AddContext';
 import Pluggable from '../../Pluggable';
-import { useStripes } from '../../StripesContext';
 
 import css from './ResetPasswordNotAvailableScreen.css';
 
 const ResetPasswordNotAvailableScreen = () => {
-  const stripes = useStripes();
-
   return (
-    <AddContext context={{ stripes }}>
-      <Pluggable type="frontpage">
-        <div className={css.titleWrap}>
-          <Headline
-            faded
-            tag="h1"
-            margin="none"
-            className={css.title}
-          >
-            <FormattedMessage id="stripes-core.front.error.header" />
-          </Headline>
-          <Headline
-            faded
-            tag="h3"
-            margin="none"
-            className={css.title}
-          >
-            <FormattedMessage id="stripes-core.front.error.setPassword.message" />
-          </Headline>
-        </div>
-      </Pluggable>
-    </AddContext>
+    <Pluggable type="frontpage">
+      <div className={css.titleWrap}>
+        <Headline
+          faded
+          tag="h1"
+          margin="none"
+          className={css.title}
+        >
+          <FormattedMessage id="stripes-core.front.error.header" />
+        </Headline>
+        <Headline
+          faded
+          tag="h3"
+          margin="none"
+          className={css.title}
+        >
+          <FormattedMessage id="stripes-core.front.error.setPassword.message" />
+        </Headline>
+      </div>
+    </Pluggable>
   );
 };
 

diff --git a/src/components/Root/Root.js b/src/components/Root/Root.js
@@ -11,10 +11,6 @@ import { ApolloProvider } from '@apollo/client';
 import { ErrorBoundary } from '@folio/stripes-components';
 import { metadata, icons } from 'stripes-config';
 
-/* ConnectContext - formerly known as RootContext, now comes from stripes-connect, so stripes-connect
-* is providing the infrastructure for store connectivity to the system. This eliminates a circular
-* dependency between stripes-connect and stripes-core. STCON-76
-*/
 import { ConnectContext } from '@folio/stripes-connect';
 import initialReducers from '../../initialReducers';
 import enhanceReducer from '../../enhanceReducer';
@@ -80,10 +76,6 @@ class Root extends Component {
     }
   }
 
-  getChildContext() {
-    return { addReducer: this.addReducer, addEpic: this.addEpic };
-  }
-
   componentDidMount() {
     const { okapi, store, locale, defaultTranslations } = this.props;
     if (this.withOkapi) checkOkapiSession(okapi.url, store, okapi.tenant);
@@ -198,11 +190,6 @@ class Root extends Component {
   }
 }
 
-Root.childContextTypes = {
-  addReducer: PropTypes.func,
-  addEpic: PropTypes.func,
-};
-
 Root.propTypes = {
   store: PropTypes.shape({
     subscribe: PropTypes.func.isRequired,

diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
@@ -26,7 +26,6 @@ import {
 
 import About from '../About';
 import { StripesContext } from '../../StripesContext';
-import AddContext from '../../AddContext';
 import { useModules } from '../../ModulesContext';
 import { stripesShape } from '../../Stripes';
 import AppIcon from '../AppIcon';
@@ -102,11 +101,9 @@ const Settings = ({ stripes }) => {
         render={(props2) => (
           <RouteErrorBoundary escapeRoute={path} moduleName={module.displayName} isSettings>
             <StripesContext.Provider value={moduleStripes}>
-              <AddContext context={{ stripes: moduleStripes }}>
-                <ModuleHierarchyProvider module={module.module}>
-                  <Component {...props2} stripes={moduleStripes} showSettings actAs="settings" />
-                </ModuleHierarchyProvider>
-              </AddContext>
+              <ModuleHierarchyProvider module={module.module}>
+                <Component {...props2} stripes={moduleStripes} showSettings actAs="settings" />
+              </ModuleHierarchyProvider>
               {props2.match.isExact ? <div className={css.panePlaceholder} /> : null}
             </StripesContext.Provider>
           </RouteErrorBoundary>