Upgrade react-router and mobx-react-router

Signed-off-by: Adam Abeshouse <[email protected]>

Former-commit-id: 660da00efb1993a0510f037174356b6f5dbc70ca

.babelrc

@@ -2,10 +2,12 @@
     "presets": ["@babel/preset-env"],
     "env": {
         "development": {
-            "presets": ["@babel/preset-env"]
+            "presets": ["@babel/preset-env"],
+            "plugins": ["@babel/plugin-syntax-dynamic-import"]
         },
         "production": {
-            "presets": []
+            "presets": [],
+            "plugins": ["@babel/plugin-syntax-dynamic-import"]
         },
         "test": {
             "presets": [],
@@ -15,8 +17,9 @@
                     "rewire",
                     {
                         "exclude": ["**/*.spec.js"]
-                    }
-                ],
+                    },
+                    "@babel/plugin-syntax-dynamic-import"
+                ]
             ]
         }
     }

package.json

@@ -85,6 +85,7 @@
     "@types/enzyme": "2.8.0",
     "@types/expired-storage": "^1.0.0",
     "@types/google.analytics": "0.0.39",
+    "@types/history": "^4.7.8",
     "@types/jquery": "^3.3.31",
     "@types/js-combinatorics": "0.5.29",
     "@types/jspdf": "^1.1.31",
@@ -94,6 +95,7 @@
     "@types/mocha": "2.2.41",
     "@types/numeral": "0.0.22",
     "@types/pdfobject": "2.0.5",
+    "@types/qs": "^6.9.5",
     "@types/raphael": "2.1.30",
     "@types/rc-slider": "^8.2.0",
     "@types/rc-tooltip": "3.7.0",
@@ -106,6 +108,7 @@
     "@types/react-helmet": "^5.0.7",
     "@types/react-overlays": "^0.6.9",
     "@types/react-router": "3.0.2",
+    "@types/react-router-dom": "^5.1.6",
     "@types/react-sortable-hoc": "^0.6.5",
     "@types/react-spinkit": "^1.1.35",
     "@types/react-table": "^6.8.7",
@@ -160,6 +163,7 @@
     "fork-ts-checker-webpack-plugin": "^1.2.0",
     "genome-nexus-ts-api-client": "^1.1.9",
     "git-revision-webpack-plugin": "^3.0.3",
+    "history": "4.10.1",
     "html-webpack-plugin": "3.2.0",
     "igv": "github:cBioPortal/igv.js#ccaeb7657200c8c1ceb276b53066d47804533418",
     "imports-loader": "^0.8.0",
@@ -187,7 +191,7 @@
     "mobx-react": "^4.1.3",
     "mobx-react-devtools": "^4.2.11",
     "mobx-react-lite": "^2.0.7",
-    "mobx-react-router": "^3.1.2",
+    "mobx-react-router": "4.1.0",
     "mobx-utils": "^2.0.1",
     "mobxpromise": "github:cbioportal/mobxpromise#v1.0.2",
     "node-sass": "^4.9.3",
@@ -241,7 +245,8 @@
     "react-renderif": "^1.0.2",
     "react-resize-detector": "^0.5.0",
     "react-reveal": "^1.2.2",
-    "react-router": "^3.0.2",
+    "react-router": "5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.0.4",
     "react-select1": "npm:[email protected]",
     "react-sortable-hoc": "^1.9.1",
@@ -299,6 +304,7 @@
     "word-wrap": "^1.2.3"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "argparse": "^1.0.9",
     "babel-plugin-rewire": "^1.0.0",
     "chai": "^4.2.0",

src/appBootstrapper.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'mobx-react';
-import { Router, useRouterHistory } from 'react-router';
-import { createHistory } from 'history';
+import { Router, Switch } from 'react-router-dom';
+import { createHistory, createBrowserHistory } from 'history';
 import { syncHistoryWithStore } from 'mobx-react-router';
 import ExtendedRoutingStore from './shared/lib/ExtendedRouterStore';
 import {
@@ -31,6 +31,7 @@ import { handleLongUrls } from 'shared/lib/handleLongUrls';
 import 'shared/polyfill/canvasToBlob';
 import mobx from 'mobx';
 import { setCurrentURLHeader } from 'shared/lib/extraHeader';
+import Container from 'appShell/App/Container';
 
 superagentCache(superagent);
 
@@ -97,9 +98,10 @@ _.noConflict();
 
 const routingStore = new ExtendedRoutingStore();
 
-const history = useRouterHistory(createHistory)({
+const history = createBrowserHistory();
+/*useRouterHistory(createHistory)({
     basename: AppConfig.basePath || '',
-});
+});*/
 
 const syncedHistory = syncHistoryWithStore(history, routingStore);
 
@@ -152,7 +154,9 @@ let render = () => {
 
     ReactDOM.render(
         <Provider {...stores}>
-            <Router history={syncedHistory} routes={makeRoutes()}></Router>
+            <Router history={syncedHistory}>
+                <Container location={routingStore.location} />
+            </Router>
         </Provider>,
         rootNode
     );

src/appShell/App/Container.tsx

@@ -27,6 +27,7 @@ import {
     GenieAgreement,
     shouldShowGenieWarning,
 } from 'appShell/App/usageAgreements/GenieAgreement';
+import makeRoutes from 'routes';
 
 interface IContainerProps {
     location: Location;
@@ -135,7 +136,7 @@ export default class Container extends React.Component<IContainerProps, {}> {
                     </Then>
                     <Else>
                         <div className="contentWrapper">
-                            {this.props.children}
+                            {makeRoutes(this.routingStore)}
                         </div>
                     </Else>
                 </If>

src/appShell/App/PortalFooter.tsx

@@ -4,7 +4,7 @@ import { If } from 'react-if';
 // tslint:disable-next-line:no-import-side-effect
 import './footer.scss';
 import _ from 'lodash';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { AppStore } from '../../AppStore';
 import { observer } from 'mobx-react';
 

src/appShell/App/PortalHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Link } from 'react-router';
+import { Link, NavLink } from 'react-router-dom';
 import AppConfig from 'appConfig';
 import { If, Then, Else } from 'react-if';
 import { openSocialAuthWindow } from '../../shared/lib/openSocialAuthWindow';
@@ -110,9 +110,9 @@ export default class PortalHeader extends React.Component<
             return (
                 <li>
                     {tab.internal ? (
-                        <Link activeClassName={'selected'} to={tab.address}>
+                        <NavLink activeClassName={'selected'} to={tab.address}>
                             {tab.text}
-                        </Link>
+                        </NavLink>
                     ) : (
                         <a href={tab.address}>{tab.text}</a>
                     )}

src/pages/groupComparison/GroupComparisonLoading.tsx

@@ -51,7 +51,7 @@ export default class GroupComparisonLoading extends React.Component<
     }
 
     render() {
-        const query = (window as any).routingStore.location.query as Partial<
+        const query = (window as any).routingStore.query as Partial<
             GroupComparisonLoadingParams
         >;
         if (this.studyViewWindowClosed) {

src/pages/groupComparison/GroupComparisonPage.tsx

@@ -89,7 +89,7 @@ export default class GroupComparisonPage extends React.Component<
     private getTabHref(tabId: string) {
         return URL.format({
             pathname: tabId,
-            query: this.props.routing.location.query,
+            query: this.props.routing.query,
             hash: this.props.routing.location.hash,
         });
     }

src/pages/patientView/PatientViewPage.tsx

@@ -169,7 +169,7 @@ export default class PatientViewPage extends React.Component<
         //TODO: this should be done by a module so that it can be reused on other pages
         reaction(
             () => [
-                props.routing.location.query,
+                props.routing.query,
                 props.routing.location.hash,
                 props.routing.location.pathname,
             ],

src/pages/resultsView/ResultsViewPage.tsx

@@ -534,7 +534,7 @@ export default class ResultsViewPage extends React.Component<
     private getTabHref(tabId: string) {
         return URL.format({
             pathname: tabId,
-            query: this.props.routing.location.query,
+            query: this.props.routing.query,
             hash: this.props.routing.location.hash,
         });
     }

src/pages/staticPages/tools/mutationMapper/MutationMapperTool.tsx

@@ -117,7 +117,7 @@ export default class MutationMapperTool extends React.Component<
     @computed get activeTabId(): string | undefined {
         // use routing if available, if not fall back to the observable variable
         return this.props.routing
-            ? this.props.routing.location.query.standaloneMutationMapperGeneTab
+            ? this.props.routing.query.standaloneMutationMapperGeneTab
             : this.standaloneMutationMapperGeneTab;
     }
 

src/pages/studyView/StudyViewPage.tsx

@@ -143,7 +143,7 @@ export default class StudyViewPage extends React.Component<
             return;
         }
 
-        const query = props.routing.location.query;
+        const query = props.routing.query;
         const hash = props.routing.location.hash;
         // clear hash if any
         props.routing.location.hash = '';