feat: update react router

Nike-Inc · May 19, 2021 · 68a5e65 · 68a5e65
1 parent baa1450
commit 68a5e65
Show file tree

Hide file tree

Showing 18 changed files with 1,365 additions and 2,334 deletions.
diff --git a/cerberus-dashboard/package-lock.json b/cerberus-dashboard/package-lock.json
diff --git a/cerberus-dashboard/package.json b/cerberus-dashboard/package.json
@@ -19,25 +19,26 @@
   "license": "Apache-2.0",
   "dependencies": {
     "axios": "^0.21.1",
+    "connected-react-router": "^6.9.1",
     "cookie": "0.4.1",
     "downloadjs": "1.4.7",
     "handlebars": "^4.7.7",
+    "history": "^4.10.1",
     "humps": "2.0.1",
     "klona": "^2.0.4",
     "lodash": "^4.17.21",
     "loglevel": "1.7.1",
-    "node-sass": "5.0.0",
     "prop-types": "^15.7.2",
-    "react": "15.7",
+    "react": "^16.14.0",
     "react-addons-create-fragment": "15.6.2",
     "react-addons-shallow-compare": "15.6.3",
     "react-copy-to-clipboard": "5.0.3",
-    "react-dom": "15.7.0",
+    "react-dom": "^16.14.0",
     "react-json-pretty": "^2.2.0",
     "react-paginate": "4.4.4",
-    "react-redux": "5.1.2",
-    "react-router": "^3.2.6",
-    "react-router-redux": "4.0.8",
+    "react-redux": "^6.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-select": "1.3.0",
     "react-simple-file-input": "2.1.0",
     "react-transition-group": "2.9.0",
@@ -50,23 +51,22 @@
   "devDependencies": {
     "babel-core": "6.26.3",
     "babel-preset-stage-1": "6.24.1",
+    "bufferutil": "^4.0.3",
+    "canvas": "^2.7.0",
     "eslint-html-reporter": "^0.7.4",
     "eslint-loader": "4.0.2",
     "eslint-plugin-react": "7.22.0",
     "estraverse-fb": "1.3.2",
-    "react-scripts": "4.0.3",
-    "redux-devtools": "3.7.0",
-    "bufferutil": "^4.0.3",
-    "utf-8-validate": "^5.0.4",
-    "typescript": "^4.2.3",
-    "sass": "^1.32.8",
     "fibers": "^5.0.0",
-    "canvas": "^2.7.0",
+    "react-scripts": "^4.0.3",
+    "redux-devtools": "3.7.0",
+    "sass": "^1.32.11",
+    "sockjs-client": "^1.5.1",
     "ts-node": "^9.1.1",
-    "webpack-plugin-serve": "^1.3.0",
-    "webpack-hot-middleware": "^2.25.0",
     "type-fest": "~0.21.3",
-    "sockjs-client": "^1.4.0"
+    "utf-8-validate": "^5.0.4",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-plugin-serve": "^1.4.1"
   },
   "browserslist": {
     "production": [

diff --git a/cerberus-dashboard/src/actions/appActions.js b/cerberus-dashboard/src/actions/appActions.js
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { hashHistory } from 'react-router';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as cms from '../constants/cms';
@@ -26,6 +25,7 @@ import CreateSDBoxForm from '../components/CreateSDBoxForm/CreateSDBoxForm';
 import { initCreateNewSDB } from './createSDBoxActions';
 import ApiError from '../components/ApiError/ApiError';
 import * as messengerActions from './messengerActions';
+import { push } from 'connected-react-router';
 
 import { getLogger } from "../utils/logger";
 var log = getLogger('application-actions');
@@ -149,7 +149,7 @@ export function loadManageSDBPage(id, path, cerberusAuthToken) {
         dispatch(mSDBActions.resetToInitialState());
         dispatch(mSDBActions.fetchSDBDataFromCMS(id, cerberusAuthToken));
         dispatch(mSDBActions.updateNavigatedPath(path, cerberusAuthToken));
-        hashHistory.push(`/manage-safe-deposit-box/${id}`);
+        dispatch(push(`/manage-safe-deposit-box/${id}`));
     };
 }
 

diff --git a/cerberus-dashboard/src/actions/authenticationActions.js b/cerberus-dashboard/src/actions/authenticationActions.js
@@ -16,7 +16,6 @@
 
 import React from 'react';
 import environmentService from '../service/EnvironmentService';
-import { hashHistory } from 'react-router';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as appActions from './appActions';
@@ -30,6 +29,7 @@ import * as modalActions from './modalActions';
 import * as manageSDBActions from './manageSafetyDepositBoxActions';
 import * as workerTimers from 'worker-timers';
 import { getLogger } from "../utils/logger";
+import { push } from 'connected-react-router';
 
 var log = getLogger('authentication-actions');
 
@@ -129,7 +129,7 @@ function handleUserLogin(response, dispatch, redirectToWelcome = true) {
     dispatch(loginUserSuccess(response.data, sessionExpirationCheckIntervalId));
     dispatch(appActions.fetchSideBarData(token));
     if (redirectToWelcome) {
-        hashHistory.push("/");
+        dispatch(push("/"));
     }
 }
 
@@ -305,7 +305,7 @@ export function refreshAuth(token, redirectPath = '/', redirect = true) {
                 workerTimers.setTimeout(function () {
                     handleUserLogin(response, dispatch, false);
                     if (redirect) {
-                        hashHistory.push(redirectPath);
+                        dispatch(push(redirectPath));
                     }
                 }, 2000);
 
@@ -315,7 +315,7 @@ export function refreshAuth(token, redirectPath = '/', redirect = true) {
                 dispatch(modalActions.clearAllModals());
                 log.error('Failed to login user', response);
                 dispatch(resetAuthState());
-                hashHistory.push('dashboard/#/login');
+                dispatch(push('dashboard/#/login'));
                 dispatch(messengerActions.addNewMessage(<ApiError message="Failed to refresh user token" response={response} />));
             });
     };
@@ -340,7 +340,7 @@ export function logoutUser(token) {
                 dispatch(removeSessionWarningTimeout());
                 dispatch(resetAuthState());
                 dispatch(headerActions.mouseOutUsername());
-                hashHistory.push('/login');
+                dispatch(push('/login'));
             })
             .catch(function ({ response }) {
                 log.error('Failed to logout user', response);

diff --git a/cerberus-dashboard/src/actions/createSDBoxActions.js b/cerberus-dashboard/src/actions/createSDBoxActions.js
@@ -18,13 +18,13 @@ import React from 'react';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as cms from '../constants/cms';
-import { hashHistory } from 'react-router';
 import environmentService from '../service/EnvironmentService';
 import * as messengerActions from './messengerActions';
 import * as modalActions from './modalActions';
 import * as appActions from './appActions';
 import ApiError from '../components/ApiError/ApiError';
 import * as humps from 'humps';
+import { push } from 'connected-react-router';
 
 import { getLogger } from "../utils/logger";
 var log = getLogger('create-new-sdb-actions');
@@ -49,7 +49,7 @@ export function submitCreateNewSDB(data, token) {
                 dispatch(clearSecureData());
                 dispatch(resetVersionBrowserState());
                 dispatch(appActions.fetchSideBarData(token));
-                hashHistory.push(`/manage-safe-deposit-box/${response.data.id}`);
+                dispatch(push(`/manage-safe-deposit-box/${response.data.id}`));
             })
             .catch(function ({ response }) {
                 log.error('Failed to create new SDB', response);

diff --git a/cerberus-dashboard/src/actions/manageSafetyDepositBoxActions.js b/cerberus-dashboard/src/actions/manageSafetyDepositBoxActions.js
@@ -22,8 +22,8 @@ import * as actions from '../constants/actions';
 import * as cms from '../constants/cms';
 import * as appActions from './appActions';
 import * as messengerActions from './messengerActions';
-import { hashHistory } from 'react-router';
 import * as modalActions from './modalActions';
+import { push } from 'connected-react-router';
 import ApiError from '../components/ApiError/ApiError';
 import ConfirmationBox from '../components/ConfirmationBox/ConfirmationBox';
 import downloadjs from 'downloadjs';
@@ -521,7 +521,7 @@ export function deleteSDB(sdbId, token) {
                 dispatch(resetToInitialState());
                 dispatch(resetVersionBrowserState());
                 dispatch(appActions.fetchSideBarData(token));
-                hashHistory.push('/');
+                dispatch(push('/'));
             })
             .catch(({ response }) => {
                 log.error("Failed to delete SDB", response);

diff --git a/cerberus-dashboard/src/components/App/App.js b/cerberus-dashboard/src/components/App/App.js
@@ -17,6 +17,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { connect } from 'react-redux';
+import { Route, Switch } from 'react-router-dom';
 import axios from 'axios';
 import * as appActions from '../../actions/appActions';
 import Login from '../Login/Login';
@@ -26,6 +27,13 @@ import Messenger from '../Messenger/Messenger';
 import SideBar from '../SideBar/SideBar';
 import Footer from '../Footer/Footer';
 import './App.scss';
+import LandingView from "../LandingView/LandingView";
+import ManageSafeDepositBox from "../ManageSafeDepositBox/ManageSafeDepositBox";
+import SDBMetadataList from "../SDBMetadataList/SDBMetadataList";
+import NotFound from "../NotFound/NotFound";
+
+import {ConnectedRouter} from "connected-react-router";
+import { history } from '../../store/configureStore';
 
 /**
  * This is the main Component that loads the header, content div and footer
@@ -44,34 +52,44 @@ class App extends Component {
         axios.defaults.headers.common['X-Cerberus-Client'] = `Dashboard/${dashboardVersion}`;
 
         return (
-            <div id='main-wrapper'>
-                <Modal modalStack={modalStack} />
+            <ConnectedRouter history={history}>
+                <div id='main-wrapper'>
+                    <Modal modalStack={modalStack} />
 
-                {!isAuthenticated && <Login />}
-                {(isAuthenticated || isSessionExpired) &&
-                    <div id='content-wrapper'>
-                        <Header userName={userName}
-                            displayUserContextMenu={displayUserContextMenu}
-                            dispatch={dispatch}
-                            cerberusAuthToken={cerberusAuthToken}
-                            isAdmin={isAdmin} />
-                        {isAuthenticated &&
-                            <div id="app-messenger-wrapper">
-                                <Messenger />
-                            </div>
-                        }
-                        <div id='content'>
-                            <SideBar />
-                            <div id='workspace'>
-                                <div id='workspace-wrapper'>
-                                    {children}
+                    {!isAuthenticated && <Login />}
+                    {(isAuthenticated || isSessionExpired) &&
+                        <div id='content-wrapper'>
+                            <Header userName={userName}
+                                displayUserContextMenu={displayUserContextMenu}
+                                dispatch={dispatch}
+                                cerberusAuthToken={cerberusAuthToken}
+                                isAdmin={isAdmin} />
+                            {isAuthenticated &&
+                                <div id="app-messenger-wrapper">
+                                    <Messenger />
+                                </div>
+                            }
+                            <div id='content'>
+                                <SideBar />
+                                <div id='workspace'>
+                                    <div id='workspace-wrapper'>
+                                        <Switch>
+                                            <Route
+                                                path="/manage-safe-deposit-box/:id"
+                                                component={ManageSafeDepositBox}
+                                            />
+                                            <Route path="/admin/sdb-metadata" component={SDBMetadataList} />
+                                            <Route path="/" exact component={LandingView} />
+                                            <Route path="*" component={NotFound} />
+                                        </Switch>
+                                    </div>
                                 </div>
                             </div>
+                            <Footer />
                         </div>
-                        <Footer />
-                    </div>
-                }
-            </div>
+                    }
+                </div>
+            </ConnectedRouter>
         );
     }
 }

diff --git a/cerberus-dashboard/src/components/Header/Header.js b/cerberus-dashboard/src/components/Header/Header.js
@@ -16,13 +16,13 @@
 
 import React from 'react'
 import { Component } from 'react'
-import { hashHistory } from 'react-router'
 import * as headerActions from '../../actions/headerActions'
 import * as authActions from '../../actions/authenticationActions'
 import './Header.scss'
 import '../../assets/images/cerberus-logo-narrow-off-white.svg'
 import * as modalActions from '../../actions/modalActions'
 import ViewTokenModal from '../ViewTokenModal/ViewTokenModal'
+import { push } from 'connected-react-router';
 
 export default class Header extends Component {
 
@@ -31,7 +31,7 @@ export default class Header extends Component {
             <header id='header'>
                 <div id='bottom-header'>
                     <div id='header-logo' onClick={ function(dispatch) {
-                        hashHistory.push('/')
+                        push('/')
                     }.bind(this, this.props.dispatch)
                     }></div>
                     <div id='header-title' className='ncss-brand u-uppercase un-selectable'>Cerberus</div>
@@ -83,7 +83,7 @@ class UserBox extends Component {
                 <div id='u-b-context-menu' className={this.props.displayUserContextMenu ? 'show-me-block' : 'hide-me'}
                      onMouseEnter={this.handleMouseClickUserName}
                      onMouseLeave={this.handleMouseLeaveUserMenuContext} >
-                    {isAdmin && <div className='context-menu-button' onClick={() => {hashHistory.push('/admin/sdb-metadata')}}>SDB Summary</div>}
+                    {isAdmin && <div className='context-menu-button' onClick={() => {push('/admin/sdb-metadata')}}>SDB Summary</div>}
                     <div className='context-menu-button' onClick={this.handleMouseClickViewToken}>View Token</div>
                     <div className='context-menu-button' onClick={this.handleMouseClickLogout}>Logout</div>
                 </div>

diff --git a/cerberus-dashboard/src/components/Login/Login.js b/cerberus-dashboard/src/components/Login/Login.js
@@ -68,7 +68,7 @@ const mapStateToProps = state => ({
     isMfaRequired: state.auth.isMfaRequired,
     statusText: state.auth.statusText,
     initialValues: {
-        redirectTo: state.routing.locationBeforeTransitions.query.next || '/'
+        redirectTo: state.router.location.query.next || '/'
     }
 });
 

diff --git a/cerberus-dashboard/src/components/LoginMfaForm/LoginMfaForm.js b/cerberus-dashboard/src/components/LoginMfaForm/LoginMfaForm.js
@@ -150,7 +150,7 @@ const mapStateToProps = state => ({
     isChallengeSent: state.auth.isChallengeSent,
     statusText: state.auth.statusText,
     initialValues: {
-        redirectTo: state.routing.locationBeforeTransitions.query.next || '/',
+        redirectTo: state.router.location.query.next || '/',
     }
 });
 

diff --git a/cerberus-dashboard/src/components/LoginUserForm/LoginUserForm.js b/cerberus-dashboard/src/components/LoginUserForm/LoginUserForm.js
@@ -109,7 +109,7 @@ const mapStateToProps = state => ({
     isAuthenticating: state.auth.isAuthenticating,
     statusText: state.auth.statusText,
     initialValues: {
-        redirectTo: state.routing.locationBeforeTransitions.query.next || '/'
+        redirectTo: state.router.location.query.next || '/'
     }
 });
 

diff --git a/cerberus-dashboard/src/components/ManageSafeDepositBox/ManageSafeDepositBox.js b/cerberus-dashboard/src/components/ManageSafeDepositBox/ManageSafeDepositBox.js
@@ -29,10 +29,10 @@ import './ManageSafeDepositBox.scss';
 
 class ManageSafeDepositBox extends Component {
 
-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate(prevProps) {
         // Fetch and load SDB details based on id in uri
-        if (nextProps.routeParams.id !== this.props.routeParams.id) {
-            this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(nextProps.routeParams.id, this.props.cerberusAuthToken));
+        if (prevProps.match.params.id !== this.props.match.params.id) {
+            this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.match.params.id, this.props.cerberusAuthToken));
         }
     }
 
@@ -44,7 +44,7 @@ class ManageSafeDepositBox extends Component {
             this.props.dispatch(appActions.fetchCmsDomainData(this.props.cerberusAuthToken));
         }
         if (!this.props.hasFetchedSDBData) {
-            this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.routeParams.id, this.props.cerberusAuthToken));
+            this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.match.params.id, this.props.cerberusAuthToken));
         }
     }
 

diff --git a/cerberus-dashboard/src/components/NotFound/NotFound.js b/cerberus-dashboard/src/components/NotFound/NotFound.js
@@ -16,11 +16,12 @@
 
 import React from "react";
 import { Component } from "react";
-import { hashHistory } from "react-router";
+import store from '../../store/configureStore';
+import { push } from 'connected-react-router';
 
 export default class NotFound extends Component {
   componentDidMount() {
-    hashHistory.push("/");
+    store.dispatch(push("/"));
   }
 
   render() {

diff --git a/cerberus-dashboard/src/components/SecureDataForm/SecureDataForm.js b/cerberus-dashboard/src/components/SecureDataForm/SecureDataForm.js
@@ -22,7 +22,6 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import AddButton from '../AddButton/AddButton';
 import * as mSDBActions from '../../actions/manageSafetyDepositBoxActions';
 import './SecureDataForm.scss';
-const { DOM: { textarea } } = React;
 
 const fields = [
     'path',