Shaw/appeals 44523 efolder express reactv18.20.x upgrade UAT branch (#…

…1719)

* inital commit

* updated react-redux to match frontend toolkit

* lint fix

* Merge branch 'main' into Shaw/APPEALS-44523-eFolder-Express-Reactv18.20.x

client/package.json

@@ -37,19 +37,19 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.7.0",
     "@babel/runtime-corejs2": "^7.0.0",
-    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a05abe6",
+    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#upgrade-test",
     "babel-loader": "^8.0.0",
     "es5-shim": "^4.5.10",
     "glamor": "^2.20.40",
     "history": "^4.7.2",
     "imports-loader": "^0.7.1",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "18.2.0",
     "react-hot-loader": "^4.12.18",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.2.2",
+    "react-redux": "7.2.0",
+    "react-router-dom": "5.3.4",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
     "superagent": "^3.8.2",

client/src/containers/InitContainer.jsx

@@ -16,6 +16,10 @@ import RecentDownloadsContainer from './RecentDownloadsContainer';
 import FeedbackContainer from './FeedbackContainer';
 
 class InitContainer extends React.PureComponent {
+  // componentDidMount() {
+  //   console.log('InitContainer mounted. Props:', this.props);
+  //   console.log('Redux store state:', this.context.store.getState());
+  // }
   render() {
     return <BrowserRouter basename="/">
       <React.Fragment>

client/src/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import ReduxBase from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/ReduxBase';
 
@@ -8,14 +8,16 @@ import InitContainer from './containers/InitContainer';
 
 const efolderExpress = {
   init(props) {
-    render(
+    const container = document.getElementById('efolder_express_app');
+    const root = createRoot(container);
+
+    root.render(
       <ReduxBase reducer={reducer} initialState={{
         ...initState,
         ...props
       }}>
         <InitContainer />
-      </ReduxBase>,
-      document.getElementById('efolder_express_app')
+      </ReduxBase>
     );
   }
 };