Finish versions upgrade

Author: darrillaga

client/components/App.js

@@ -1,19 +1,30 @@
 import React, { Component } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import User from "./User";
+import Login from "./Login";
+import Error from "./Error";
 
 /**
  * Main app component
  * Has a header and then render's the page content
  */
 export default class SpotifyLogin extends Component {
+
+  constructor (props){
+    super(props);
+  }
+
   render() {
-    // injected via react router
-    const {children} = this.props;
     return (
       <div className="spotify-login">
         <h1>Example Spotify + React + React-Router Login Flow</h1>
         <div className="page-content">
           <p>This is an example of the Authorization Code flow using routes.</p>
-          {children}
+          <Switch>
+            <Route exact path="/user/:accessToken/:refreshToken" component={User} />
+            <Route exact path="/error/:errorMsg" component={Error} />
+            <Route exact path="/" component={Login} />
+          </Switch>
         </div>
       </div>
     );

client/components/Error.js

@@ -5,9 +5,14 @@ import React, { Component } from 'react';
  * Displays the error
  */
 export default class Login extends Component {
+
+  constructor (props){
+    super(props);
+  }
+
   render() {
     // injected via react-router
-    const { errorMsg } = this.props.params;
+    const { errorMsg } = this.props.match.params;
     return (
       <div className="error">
         <h2>An Error Occured</h2>

client/components/Login.js

@@ -6,6 +6,11 @@ import loginSVG from '../log_in.svg';
  * Has a login button that hit's the login url
  */
 export default class Login extends Component {
+
+  constructor (props){
+    super(props);
+  }
+
   render() {
     return (
       <div className="login">

client/components/User.js

@@ -10,11 +10,16 @@ import {
  * Displays the user's information
  */
 class User extends Component {
+
+  constructor (props){
+    super(props);
+  }
+
   /** When we mount, get the tokens from react-router and initiate loading the info */
   componentDidMount() {
     // params injected via react-router, dispatch injected via connect
-    const {dispatch, params} = this.props;
-    const {accessToken, refreshToken} = params;
+    const {dispatch, match} = this.props;
+    const {accessToken, refreshToken} = match.params;
     dispatch(setTokens({accessToken, refreshToken}));
     dispatch(getMyInfo());
   }

client/index.js

@@ -1,40 +1,33 @@
 import React, { Component } from 'react';
 import { render }           from 'react-dom';
-import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import thunk        from 'redux-thunk';
 import { Provider } from 'react-redux';
-import { Router, Route, IndexRoute, hashHistory } from 'react-router';
-import { syncHistory, routeReducer }     from 'react-router-redux';
-import { createHistory } from 'history';
+import { Route } from 'react-router-dom';
+import createHashHistory from 'history/createHashHistory';
+import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
 import reducer from './reducers';
 import App     from './components/App';
-import Login   from './components/Login';
-import User    from './components/User';
-import Error   from './components/Error';
 
 // load our css. there probably is a better way to do this
 // but for now this is our move
 require('./style.less');
 
 // Sync dispatched route actions to the history
-const reduxRouterMiddleware = syncHistory(hashHistory)
-const createStoreWithMiddleware = applyMiddleware(
-  thunk,
-  reduxRouterMiddleware
-)(createStore)
-const store = createStoreWithMiddleware(reducer)
+const hashHistory = createHashHistory();
+
+const store = createStore(reducer, undefined, compose(
+    applyMiddleware(thunk, routerMiddleware(history)),
+    window.devToolsExtension ? window.devToolsExtension() : f => f,
+));
 
 class Root extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Router history={hashHistory}>
-          <Route path="/" component={App}>
-            <IndexRoute component={Login} />
-            <Route path="/user/:accessToken/:refreshToken" component={User} />
-            <Route path="/error/:errorMsg" component={Error} />
-          </Route>
-        </Router>
+        <ConnectedRouter history={hashHistory}>
+          <Route path="/" component={App}/>
+        </ConnectedRouter>
       </Provider>
     );
   }