Upgrade to react-router v4

* Import from react-router-dom
* Use withRouter
* Remove react-router-redux
* Replace AuthenticatedPage with PrivateRoute

packages/component-app/package.json

@@ -14,8 +14,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
-    "react-router-redux": "^4.0.7",
+    "react-router-dom": "^4.2.2",
     "recompose": "^0.25.0",
     "redux": "^3.6.0",
     "xpub-bootstrap": "^0.0.2",
@@ -27,7 +26,6 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
-    "react-router-redux": "^4.0.7"
+    "react-router-dom": "^4.2.2"
   }
 }

packages/component-app/src/components/App.js

@@ -24,7 +24,7 @@ const App = ({ children, currentUser, journal }) => (
 export default compose(
   connect(
     state => ({
-      currentUser: state.currentUser.user
+      currentUser: state.currentUser.user,
     })
   ),
   withJournal

packages/component-authentication/package.json

@@ -15,8 +15,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
-    "react-router-redux": "^4.0.7",
+    "react-router-dom": "^4.2.2",
     "recompose": "^0.25.0",
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",
@@ -45,8 +44,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
-    "react-router-redux": "^4.0.7"
+    "react-router-dom": "^4.2.2"
   },
   "scripts": {
     "styleguide": "styleguidist server",

packages/component-authentication/src/components/AuthenticatedPage.js

-import React from 'react'
-import PropTypes from 'prop-types'
-import { compose } from 'recompose'
-import { connect } from 'react-redux'
-import { push } from 'react-router-redux'
-import { withRouter } from 'react-router'
-import { getCurrentUser } from '../redux/currentUser'
-
-class AuthenticatedPage extends React.Component {
-  componentDidMount () {
-    const { isAuthenticated, getCurrentUser } = this.props
-
-    if (!isAuthenticated) {
-      getCurrentUser()
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const { isAuthenticated, isFetching } = nextProps
-
-    if (!isAuthenticated && !isFetching) {
-      this.login()
-    }
-  }
-
-  login () {
-    const { location, push } = this.props
-
-    push('/login?next=' + encodeURIComponent(location.pathname))
-  }
-
-  render () {
-    const { isAuthenticated, children } = this.props
-
-    return isAuthenticated ? children : null
-  }
-}
-
-AuthenticatedPage.propTypes = {
-  children: PropTypes.node.isRequired,
-  getCurrentUser: PropTypes.func.isRequired,
-  isAuthenticated: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  location: PropTypes.object.isRequired,
-  push: PropTypes.func.isRequired
-}
-
-export default compose(
-  connect(
-    state => ({
-      isAuthenticated: state.currentUser.isAuthenticated,
-      isFetching: state.currentUser.isFetching
-    }),
-    {
-      getCurrentUser,
-      push
-    }
-  ),
-  withRouter
-)(AuthenticatedPage)

packages/component-authentication/src/components/Login.js

 import React from 'react'
 import { Field } from 'redux-form'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import { Button, TextField } from 'xpub-ui'
 import classes from './Form.local.scss'
 

packages/component-authentication/src/components/LoginPage.js

@@ -6,8 +6,10 @@ import Login from './Login'
 
 // TODO: const redirect = this.props.location.query.next | CONFIG['pubsweet-client']['login-redirect']
 
-const onSubmit = (values, dispatch) => {
-  dispatch(login(values)).catch(error => {
+const onSubmit = (values, dispatch, { history }) => {
+  dispatch(login(values)).then(() => {
+    history.push('/') // TODO: state
+  }).catch(error => {
     if (error.validationErrors) {
       throw new SubmissionError(error.validationErrors)
     } else {

packages/component-authentication/src/components/PrivateRoute.js

+import React from 'react'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { Route, Redirect, withRouter } from 'react-router-dom'
+import { getCurrentUser } from '../redux/currentUser'
+
+const PrivateRoute = ({ currentUser, getCurrentUser, component: Component, ...rest }) => (
+  <Route {...rest} render={props => {
+    if (!currentUser.isFetched) {
+      if (!currentUser.isFetching) {
+        getCurrentUser()
+      }
+
+      return <div>loading…</div>
+    }
+
+    if (!currentUser.isAuthenticated) {
+      return (
+        <Redirect to={{
+          pathname: '/login',
+          state: { from: props.location }
+        }}/>
+      )
+    }
+
+    return <Component {...props}/>
+  }}/>
+)
+
+export default compose(
+  withRouter,
+  connect(
+    state => ({
+      currentUser: state.currentUser,
+    }),
+    {
+      getCurrentUser
+    }
+  )
+)(PrivateRoute)

packages/component-authentication/src/components/Signup.js

 import React from 'react'
 import { Field } from 'redux-form'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import { Button, TextField } from 'xpub-ui'
 import classes from './Form.local.scss'
 

packages/component-authentication/src/components/index.js

-export { default as AuthenticatedPage } from './AuthenticatedPage'
+export { default as PrivateRoute } from './PrivateRoute'
 export { default as LoginPage } from './LoginPage'
 export { default as LogoutPage } from './LogoutPage'
 export { default as SignupPage } from './SignupPage'

packages/component-authentication/src/redux/currentUser.js

@@ -28,7 +28,7 @@ export const getCurrentUser = () => dispatch => {
   dispatch(getCurrentUserRequest())
   return api.get('/users/authenticate').then(
     user => {
-      dispatch(getCurrentUserSuccess(user))
+      return dispatch(getCurrentUserSuccess(user))
     },
     error => {
       dispatch(getCurrentUserFailure(error))
@@ -41,6 +41,7 @@ export const getCurrentUser = () => dispatch => {
 
 const initialState = {
   isFetching: false,
+  isFetched: false,
   isAuthenticated: false,
   user: null,
   error: null
@@ -51,6 +52,7 @@ export default (state = initialState, action) => {
     case GET_CURRENT_USER_REQUEST:
       return {
         isFetching: true,
+        isFetched: false,
         isAuthenticated: false,
         user: null,
         error: null,
@@ -59,6 +61,7 @@ export default (state = initialState, action) => {
     case GET_CURRENT_USER_FAILURE:
       return {
         isFetching: false,
+        isFetched: true,
         isAuthenticated: false,
         user: null,
         error: action.error
@@ -67,6 +70,7 @@ export default (state = initialState, action) => {
     case GET_CURRENT_USER_SUCCESS:
       return {
         isFetching: false,
+        isFetched: true,
         isAuthenticated: true,
         user: action.user,
         error: null
@@ -76,6 +80,7 @@ export default (state = initialState, action) => {
     case LOGOUT_SUCCESS:
       return {
         isFetching: false,
+        isFetched: false,
         isAuthenticated: false,
         user: null,
         error: null,

packages/component-authentication/src/redux/login.js

 import * as api from 'pubsweet-client/src/helpers/api'
-import { push } from 'react-router-redux'
 import { getCurrentUser } from './currentUser'
 
 // TODO: This will break when rendered on a server
@@ -26,14 +25,13 @@ export const loginFailure = error => ({
   error
 })
 
-export const login = (credentials, redirectTo) => dispatch => {
+export const login = (credentials) => dispatch => {
   dispatch(loginRequest())
   return api.create('/users/authenticate', credentials).then(
     user => {
       localStorage.setItem('token', user.token)
       dispatch(loginSuccess())
-      dispatch(getCurrentUser())
-      dispatch(push(redirectTo || '/'))
+      return dispatch(getCurrentUser())
     },
     error => {
       dispatch(loginFailure(error))

packages/component-authentication/src/redux/logout.js

-import { push } from 'react-router-redux'
-
 /* constants */
 
 export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
@@ -10,8 +8,7 @@ export const logoutSuccess = () => ({
   type: LOGOUT_SUCCESS
 })
 
-export const logout = redirectTo => dispatch => {
+export const logout = () => dispatch => {
   localStorage.removeItem('token')
-  dispatch(logoutSuccess())
-  if (redirectTo) dispatch(push(redirectTo))
+  return dispatch(logoutSuccess())
 }

packages/component-dashboard/package.json

@@ -17,7 +17,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
+    "react-router-dom": "^4.2.2",
     "react-dropzone": "^4.1.2",
     "react-moment": "^0.6.1",
     "recompose": "^0.25.0",

packages/component-dashboard/src/components/DashboardPage.js

 import { compose, withProps } from 'recompose'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { actions } from 'pubsweet-client'
 import { newestFirst, selectCurrentUser } from 'xpub-selectors'
 import { ConnectPage } from 'xpub-connect'
@@ -67,13 +68,14 @@ export default compose(
 
       return { collections, currentUser, conversion, dashboard }
     },
-    {
-      uploadManuscript,
-      reviewerResponse,
-      deleteProject: actions.deleteCollection,
-    }
+    (dispatch, { history }) => ({
+      uploadManuscript: acceptedFiles => dispatch(uploadManuscript(acceptedFiles, history)),
+      reviewerResponse: (project, version, reviewer, status) => dispatch(reviewerResponse(project, version, reviewer, status)),
+      deleteProject: collection => dispatch(actions.deleteCollection(collection)),
+    })
   ),
   withProps({
     AssignEditor: AssignEditorContainer
-  })
+  }),
+  withRouter,
 )(Dashboard)

packages/component-dashboard/src/components/ProjectLink.js

 import React from 'react'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 const projectUrl = ({ project, version, page, id }) => {
   const parts = []

packages/component-dashboard/src/redux/conversion.js

-import { push } from 'react-router-redux'
 import { actions } from 'pubsweet-client'
 import { ink as convertToHTML } from 'pubsweet-component-ink-frontend/actions'
 import uploadFile from 'xpub-upload'
@@ -27,7 +26,7 @@ export const uploadManuscriptFailure = error => ({
   error
 })
 
-export const uploadManuscript = acceptedFiles => dispatch => {
+export const uploadManuscript = (acceptedFiles, history) => dispatch => {
   if (acceptedFiles.length > 1) {
     throw new Error('Only one manuscript file can be uploaded')
   }
@@ -84,7 +83,7 @@ export const uploadManuscript = acceptedFiles => dispatch => {
 
             // redirect after a short delay
             window.setTimeout(() => {
-              dispatch(push(route))
+              history.push(route)
             }, 1000)
           })
         })

packages/component-manuscript/package.json

@@ -17,7 +17,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
+    "react-router-dom": "^4.2.2",
     "recompose": "^0.25.0"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
+    "react-router-dom": "^4.2.2",
     "xpub-styleguide": "^0.0.2"
   },
   "scripts": {

packages/component-manuscript/src/components/Manuscript.js

 import React from 'react'
-import { browserHistory } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import SimpleEditor from 'wax-editor-react'
 import classes from './Manuscript.local.scss'
 
 // TODO: convert user teams to roles (see SimpleEditorWrapper)?
 
-const Manuscript = ({ content, currentUser, fileUpload, updateManuscript }) => (
+const Manuscript = ({ content, currentUser, fileUpload, history, updateManuscript }) => (
   <SimpleEditor
     classes={classes.fullscreen}
     content={content}
     user={currentUser}
     fileUpload={fileUpload}
-    history={browserHistory}
+    history={history}
     readOnly={false}
     trackChanges={false}
     update={data => updateManuscript(data)}
@@ -19,4 +19,4 @@ const Manuscript = ({ content, currentUser, fileUpload, updateManuscript }) => (
   />
 )
 
-export default Manuscript
+export default withRouter(Manuscript)

packages/component-manuscript/src/components/ManuscriptPage.js

@@ -6,15 +6,15 @@ import { selectCurrentUser, selectCollection, selectFragment } from 'xpub-select
 import Manuscript from './Manuscript'
 
 export default compose(
-  ConnectPage(({ params }) => [
-    actions.getCollection({ id: params.project }),
-    actions.getFragment({ id: params.project }, { id: params.version })
+  ConnectPage(({ match }) => [
+    actions.getCollection({ id: match.params.project }),
+    actions.getFragment({ id: match.params.project }, { id: match.params.version })
   ]),
   connect(
-    (state, { params }) => {
+    (state, { match }) => {
       const currentUser = selectCurrentUser(state)
-      const project = selectCollection(state, params.project)
-      const version = selectFragment(state, params.version)
+      const project = selectCollection(state, match.params.project)
+      const version = selectFragment(state, match.params.version)
 
       const content = version.source // TODO: load from a file
 

packages/component-review/package.json

@@ -18,8 +18,7 @@
     "react-dom": "^15.6.1",
     "react-moment": "^0.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5",
-    "react-router-redux": "^4.0.7",
+    "react-router-dom": "^4.2.2",
     "react-select": "^1.0.0-rc.10",
     "recompose": "^0.25.0",
     "redux": "^3.6.0",
@@ -58,7 +57,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.5"
+    "react-router-dom": "^4.2.2"
   },
   "scripts": {
     "styleguide": "styleguidist server",