Upgrade to use react-router v4 for real-world example (#2593)

* Upgrade to use react-router v4 for react-router-dom with web

* add jest-cli

Author: roth1002

examples/real-world/package-lock.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "humps": "^2.0.0",
+    "jest-cli": "^20.0.4",
     "lodash": "^4.16.1",
     "normalizr": "^3.2.3",
     "prop-types": "^15.5.10",
     "react": "^15.5.0",
     "react-dom": "^15.5.0",
     "react-redux": "^5.0.5",
-    "react-router": "^3.0.2",
-    "react-router-redux": "^4.0.5",
+    "react-router-dom": "^4.1.2",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0"
   },

examples/real-world/package.json

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 const Repo = ({ repo, owner }) => {
   const { login } = owner

examples/real-world/src/components/Repo.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 const User = ({ user }) => {
   const { login, avatarUrl, name } = user

examples/real-world/src/components/User.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { browserHistory } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import Explore from '../components/Explore'
 import { resetErrorMessage } from '../actions'
 
@@ -23,7 +23,7 @@ class App extends Component {
   }
 
   handleChange = nextValue => {
-    browserHistory.push(`/${nextValue}`)
+    this.props.history.push(`/${nextValue}`)
   }
 
   renderErrorMessage() {
@@ -62,6 +62,6 @@ const mapStateToProps = (state, ownProps) => ({
   inputValue: ownProps.location.pathname.substring(1)
 })
 
-export default connect(mapStateToProps, {
+export default withRouter(connect(mapStateToProps, {
   resetErrorMessage
-})(App)
+})(App))

examples/real-world/src/containers/App.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { loadRepo, loadStargazers } from '../actions'
 import Repo from '../components/Repo'
 import User from '../components/User'
@@ -69,8 +70,8 @@ class RepoPage extends Component {
 const mapStateToProps = (state, ownProps) => {
   // We need to lower case the login/name due to the way GitHub's API behaves.
   // Have a look at ../middleware/api.js for more details.
-  const login = ownProps.params.login.toLowerCase()
-  const name = ownProps.params.name.toLowerCase()
+  const login = ownProps.match.params.login.toLowerCase()
+  const name = ownProps.match.params.name.toLowerCase()
 
   const {
     pagination: { stargazersByRepo },
@@ -91,7 +92,7 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-export default connect(mapStateToProps, {
+export default withRouter(connect(mapStateToProps, {
   loadRepo,
   loadStargazers
-})(RepoPage)
+})(RepoPage))

examples/real-world/src/containers/RepoPage.js

@@ -1,22 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Provider } from 'react-redux'
-import routes from '../routes'
 import DevTools from './DevTools'
-import { Router } from 'react-router'
+import { Route } from 'react-router-dom'
+import App from './App'
+import UserPage from './UserPage'
+import RepoPage from './RepoPage'
 
-const Root = ({ store, history }) => (
+const Root = ({ store }) => (
   <Provider store={store}>
     <div>
-      <Router history={history} routes={routes} />
+      <Route path="/" component={App} />
+      <Route path="/:login/:name"
+             component={RepoPage} />
+      <Route path="/:login"
+             component={UserPage} />
       <DevTools />
     </div>
   </Provider>
 )
 
 Root.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
 }
 
 export default Root

examples/real-world/src/containers/Root.dev.js

@@ -1,17 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Provider } from 'react-redux'
-import routes from '../routes'
-import { Router } from 'react-router'
+import { Route } from 'react-router-dom'
+import App from './App'
+import UserPage from './UserPage'
+import RepoPage from './RepoPage'
 
-const Root = ({ store, history }) => (
+const Root = ({ store }) => (
   <Provider store={store}>
-    <Router history={history} routes={routes} />
+    <Route path="/" component={App} />
+      <Route path="/:login/:name"
+             component={RepoPage} />
+      <Route path="/:login"
+             component={UserPage} />
   </Provider>
 )
 
 Root.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
 }
 export default Root

examples/real-world/src/containers/Root.prod.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { loadUser, loadStarred } from '../actions'
 import User from '../components/User'
 import Repo from '../components/Repo'
@@ -72,7 +73,7 @@ class UserPage extends Component {
 const mapStateToProps = (state, ownProps) => {
   // We need to lower case the login due to the way GitHub's API behaves.
   // Have a look at ../middleware/api.js for more details.
-  const login = ownProps.params.login.toLowerCase()
+  const login = ownProps.match.params.login.toLowerCase()
 
   const {
     pagination: { starredByUser },
@@ -92,7 +93,7 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-export default connect(mapStateToProps, {
+export default withRouter(connect(mapStateToProps, {
   loadUser,
   loadStarred
-})(UserPage)
+})(UserPage))

examples/real-world/src/containers/UserPage.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { browserHistory } from 'react-router'
-import { syncHistoryWithStore } from 'react-router-redux'
+import { BrowserRouter as Router } from 'react-router-dom'
 import Root from './containers/Root'
 import configureStore from './store/configureStore'
 
 const store = configureStore()
-const history = syncHistoryWithStore(browserHistory, store)
 
 render(
-  <Root store={store} history={history} />,
+  <Router>
+    <Root store={store} />
+  </Router>,
   document.getElementById('root')
 )

examples/real-world/src/index.js

@@ -1,7 +1,6 @@
 import * as ActionTypes from '../actions'
 import merge from 'lodash/merge'
 import paginate from './paginate'
-import { routerReducer as routing } from 'react-router-redux'
 import { combineReducers } from 'redux'
 
 // Updates an entity cache in response to any action with response.entities.
@@ -50,7 +49,6 @@ const rootReducer = combineReducers({
   entities,
   pagination,
   errorMessage,
-  routing
 })
 
 export default rootReducer