Upgrade to react-router 4

package.json

@@ -53,7 +53,8 @@
     "react-dom": "^16.7.0-alpha.0",
     "react-google-charts": "^3.0.0",
     "react-material-ui-form-validator": "^2.0.2",
-    "react-router": "^3.0.5",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "style-loader": "^0.23.0",
     "url-loader": "^1.1.2",
     "yargs": "^12.0.5"

src/client/components/Login.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { browserHistory } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
@@ -43,7 +43,7 @@ const styles = theme => ({
   },
 });
 
-const Login = ({ classes }) => {
+const Login = ({ classes, history }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loginFailure, setLoginFailure] = useState(false);
@@ -53,9 +53,7 @@ const Login = ({ classes }) => {
   });
 
   const register = () => {
-    browserHistory.push({
-      pathname: `/register`,
-    });
+    history.push('register');
   };
 
   const userLogin = e => {
@@ -64,13 +62,10 @@ const Login = ({ classes }) => {
       .userLogin(email, password)
       .then(response => {
         if (response.status === 200) {
-          browserHistory.push({
-            pathname: `/`,
-            state: {
-              username: response.data.username,
-              isAdmin: response.data.isAdmin,
-              token: response.data.token,
-            },
+          history.push('/dashboard', {
+            username: response.data.username,
+            isAdmin: response.data.isAdmin,
+            token: response.data.token,
           });
         } else {
           setLoginFailure(true);
@@ -175,4 +170,4 @@ Login.propTypes = {
   classes: PropTypes.shape().isRequired,
 };
 
-export default withTheme()(withStyles(styles)(Login));
+export default withTheme()(withRouter(withStyles(styles)(Login)));

src/client/components/Main.js

@@ -1,10 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Route, Redirect } from 'react-router-dom';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { Provider } from 'react-alert';
 import AlertTemplate from 'react-alert-template-basic';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import alertOptions from '../utils/alertOptions';
+import Login from './Login';
+import Logout from './Logout';
+import Register from './Register';
+import Dashboard from '../containers/DashboardContainer';
+import PayOffDetailsContainer from '../containers/PayOffDetailsContainer';
+import PayOffDetails from './PayOffDetails';
 
 const theme = createMuiTheme({
   typography: {
@@ -29,19 +35,23 @@ const theme = createMuiTheme({
   },
 });
 
-const Main = ({ children }) => (
+const Main = () => (
   <div>
     <Provider template={AlertTemplate} {...alertOptions}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
-        <div className="main-container">{children}</div>
+        <div className="main-container">
+          <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
+          <Route path="/dashboard" component={Dashboard} />
+          <Route path="/login" component={Login} />
+          <Route path="/logout" component={Logout} />
+          <Route path="/register" component={Register} />
+          <Route path="payoff/:card" component={PayOffDetailsContainer} />
+          <Route path="payoffdetails/:card" component={PayOffDetails} />
+        </div>
       </MuiThemeProvider>
     </Provider>
   </div>
 );
 
-Main.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default Main;

src/client/components/PayOffDetails.js

@@ -95,14 +95,12 @@ class PayOffDetails extends Component {
   };
 
   back = () => {
-    console.log('payoff props - ', this.props);
-    browserHistory.push({
-      pathname: '/',
-      state: {
-        username: this.props.location.state.username,
-        isAdmin: this.props.location.state.isAdmin,
-        token: this.props.location.state.token,
-      },
+    const { history } = this.props;
+
+    history.push('/', {
+      username: this.props.location.state.username,
+      isAdmin: this.props.location.state.isAdmin,
+      token: this.props.location.state.token,
     });
   };
 

src/client/components/Register.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import { browserHistory } from 'react-router';
+import { history } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -31,16 +31,14 @@ const styles = theme => ({
   },
 });
 
-function Register({ classes }) {
+function Register({ classes, history }) {
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [passwordConf, setPasswordConf] = useState('');
 
   const close = () => {
-    browserHistory.push({
-      pathname: `/login`,
-    });
+    history.push('/login');
   };
 
   const handleChange = name => event => {
@@ -69,12 +67,9 @@ function Register({ classes }) {
       .then(response => {
         if (response.status === 200) {
           setUsername(response.data.username);
-          browserHistory.push({
-            pathname: `/`,
-            state: {
-              username: response.data.username,
-              token: response.data.token,
-            },
+          history.push('/dashboard', {
+            username: response.data.username,
+            token: response.data.token,
           });
         }
       })

src/client/config/routes.js

@@ -1,23 +1,10 @@
 import React from 'react';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Main from '../components/Main';
-import Login from '../components/Login';
-import Logout from '../components/Logout';
-import Register from '../components/Register';
-import Dashboard from '../containers/DashboardContainer';
-import PayOffDetailsContainer from '../containers/PayOffDetailsContainer';
-import PayOffDetails from '../components/PayOffDetails';
 
 const routes = (
-  <Router history={browserHistory}>
-    <Route path="/" component={Main}>
-      <IndexRoute component={Dashboard} />
-      <Route path="/login" component={Login} />
-      <Route path="/logout" component={Logout} />
-      <Route path="/register" component={Register} />
-      <Route path="payoff/:card" component={PayOffDetailsContainer} />
-      <Route path="payoffdetails/:card" component={PayOffDetails} />
-    </Route>
+  <Router>
+    <Route path="/" component={Main} />
   </Router>
 );
 

src/client/containers/DashboardContainer.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import AlertContainer from 'react-alert';
-import { browserHistory } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import { withStyles, withTheme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
@@ -67,6 +66,7 @@ class DashboardContainer extends Component {
 
   componentDidMount() {
     document.body.style.overflowY = 'auto';
+    const { history } = this.props;
     if (
       !(
         this.props.location &&
@@ -75,7 +75,7 @@ class DashboardContainer extends Component {
         this.props.location.state.token
       )
     ) {
-      browserHistory.push('/login');
+      history.push('/login');
       return;
     }
     const { token, username, isAdmin } = this.props.location.state;
@@ -94,7 +94,7 @@ class DashboardContainer extends Component {
         });
       })
       .catch(() => {
-        browserHistory.push('/login');
+        history.push('/login');
       });
     utils.getTotals(token).then(totals => {
       this.setState({
@@ -254,14 +254,12 @@ class DashboardContainer extends Component {
 
   handleOnDetails = () => {
     const { selectedCards, username, token } = this.state;
+    const { history } = this.props;
     const card = selectedCards[0];
-    browserHistory.push({
-      pathname: `/payoffdetails/${card.name}`,
-      state: {
-        card,
-        username,
-        token,
-      },
+    history.push(`/payoffdetails/${card.name}`, {
+      card,
+      username,
+      token,
     });
   };
 
@@ -309,11 +307,10 @@ class DashboardContainer extends Component {
   // Logout from the app.
   logout = () => {
     const { token } = this.state;
+    const { history } = this.props;
     utils.userLogout(token).then(res => {
       if (res.status === 200) {
-        browserHistory.push({
-          pathname: '/login',
-        });
+        history.push('/login');
       }
     });
   };
@@ -434,4 +431,6 @@ DashboardContainer.propTypes = {
   classes: PropTypes.shape().isRequired,
 };
 
-export default withTheme()(withStyles(styles)(withAlert(DashboardContainer)));
+export default withTheme()(
+  withRouter(withStyles(styles)(withAlert(DashboardContainer))),
+);