working exemple with login through private routes

jsonserver/server.js

@@ -17,6 +17,7 @@ server.post('/user/login', (req, res) => {
 })
 server.get('/user_logged', (req, res) => res.jsonp(jsonDb.user_logged))
 server.delete('/deletenodata', (req,res) => res.status(204).jsonp(''))
+server.patch('/user', (req, res) => res.jsonp({lang: 'fr'}))
 
 // server.put('/api/data/raw_materials_vendors/:vendorid', (req, res) => {
 //  res.jsonp(jsonVendorColorData.vendorVariableData)

package.json

@@ -21,13 +21,14 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "classnames": "^2.2.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.5",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
-    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
@@ -42,7 +43,6 @@
   },
   "devDependencies": {
     "json-server": "^0.12.0",
-    "react-router-dom": "^4.2.2",
     "webpack-dev-server": "^2.9.2"
   },
   "standard": {

src/action-creator.async.js

@@ -1,8 +1,10 @@
 import { FETCH_CONFIG } from './helper.js'
 import {
   USER_LOGIN,
+  USER_DATA,
   USER_CONNECTED,
-  updateUserConnected
+  updateUserConnected,
+  updateUserData
 } from './action-creator.sync.js'
 
 /*
@@ -32,24 +34,21 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
       case 304:
         return fetchResult.json()
       case 204:
-        return ''
       case 400:
       case 404:
-        return ''
       case 409:
-        return ''
       case 500:
       case 501:
       case 502:
       case 503:
       case 504:
-        const jsonRes = await fetchResult.json()
-        return jsonRes.errorHandled ? jsonRes.errorMsg : ''
+        return '' // @TODO : handle errors
     }
   })()
   if (debug) console.log(`fetch ${param.method}/${actionName} result: `, fetchResult)
 
-  dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
+  if ([200, 204, 304].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/SUCCESS`, data: fetchResult.json})
+  else if ([400, 404, 500].includes(fetchResult.status)) dispatch({type: `${param.method}/${actionName}/FAILED`, data: fetchResult.json})
 
   return fetchResult
 }
@@ -74,6 +73,16 @@ export const getUserConnected = () => async dispatch => {
   if (fetchUserLogged.status === 200) dispatch(updateUserConnected(fetchUserLogged.json))
 }
 
+export const updateUserLang = newLang => async dispatch => {
+  const fetchUpdateUserLang = await fetchWrapper({
+    url: 'http://localhost:3001/user',
+    param: {...FETCH_CONFIG, method: 'PATCH', body: JSON.stringify({lang: newLang})},
+    actionName: USER_DATA,
+    dispatch
+  })
+  if (fetchUpdateUserLang.status === 200) dispatch(updateUserData({lang: fetchUpdateUserLang.json.lang}))
+}
+
 // export const testResponseNoData = () => async dispatch => {
 //   const fetchResponseNoData = await fetchWrapper({
 //     url: 'http://localhost:3001/deletenodata',

src/action-creator.sync.js

@@ -1,4 +1,6 @@
 export const USER_LOGIN = 'User/Login'
+export const USER_DATA = 'User/Data'
 
 export const USER_CONNECTED = 'User/Connected'
 export const updateUserConnected = user => ({ type: `Update/${USER_CONNECTED}`, user })
+export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data: userData })

src/component/ConnectionForm.jsx

@@ -1,11 +1,29 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export const ConnectionForm = props => {
   return (
     <div>
-      <input type='text' onChange={props.onChangeLogin} placeholder='Login' />
-      <input type='text' onChange={props.onChangePassword} placeholder='Password' />
-      <button type='button' onClick={props.onClickSubmit}>Connect</button>
+      { props.user.isLoggedIn
+        ? 'You are already logged in.'
+        : (
+          <div>
+            Login:
+            <input type='text' onChange={props.onChangeLogin} placeholder='Login' />
+            <input type='text' onChange={props.onChangePassword} placeholder='Password' />
+            <button type='button' onClick={props.onClickSubmit}>Connect</button>
+          </div>
+        )
+      }
     </div>
   )
 }
+
+ConnectionForm.PropTypes = {
+  user: PropTypes.shape({
+    isLoggedIn: PropTypes.bool.isRequired
+  }),
+  onChangeLogin: PropTypes.func,
+  onChangePassword: PropTypes.func,
+  onClickSubmit: PropTypes.func
+}

src/component/Footer.jsx → src/component/FooterTpl.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
-export const Footer = props => {
+const Footer = props => {
   return (
     <div>
       Footer
     </div>
   )
 }
+export default Footer

src/component/Header.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-export const Header = props => {
-  return (
-    <div>
-      { props.user.isLogedIn
-        ? `'Soir ${props.user.firstname} ${props.user.lastname}.`
-        : 'Why dont you connect yourself ?'
-      }
-    </div>
-  )
-}

src/component/HeaderTpl.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+const HeaderTpl = props => {
+  return (
+    <div>
+      { props.user.isLoggedIn
+        ? `'Soir ${props.user.firstname} ${props.user.lastname}.`
+        : 'Why dont you connect yourself ?'
+      }
+      <ul>
+        <li><Link to={'/'}>Home</Link></li>
+        <li><Link to={'/login'}>Login</Link></li>
+        <li><Link to={'/page'}>Page</Link></li>
+      </ul>
+      <button onClick={e => props.onChangeLang('fr')}>Click Me</button>
+    </div>
+  )
+}
+export default HeaderTpl
+
+HeaderTpl.PropTypes = {
+  user: PropTypes.shape({
+    isLoggedIn: PropTypes.bool.isRequired
+  }),
+  onChangeLang: PropTypes.func,
+  onSubmitSearch: PropTypes.func
+}

src/container/Header.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import HeaderTpl from '../component/HeaderTpl.jsx'
+import { updateUserLang } from '../action-creator.async.js'
+
+class Header extends React.Component {
+  handleChangeLang = newLang => this.props.dispatch(updateUserLang(newLang))
+  handleSubmitSearch = search => console.log('search submited : ', search)
+
+  render () {
+    return (
+      <HeaderTpl
+        user={this.props.user}
+        onChangeLang={this.handleChangeLang}
+        onSubmitSearch={this.handleSubmitSearch}
+      />
+    )
+  }
+}
+export default connect(({ user }) => ({ user }))(Header)

src/container/Home.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+class Home extends React.Component {
+  render () {
+    const { user } = this.props
+    return (
+      <div>
+        Home.<br />
+        User logged in : {user.isLoggedIn.toString()}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ user }) => ({ user })
+export default connect(mapStateToProps)(Home)

src/container/Login.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Header } from '../component/Header.jsx'
 import { ConnectionForm } from '../component/ConnectionForm.jsx'
-import { Footer } from '../component/Footer.jsx'
 import { userLogin } from '../action-creator.async.js'
 
 class Login extends React.Component {
@@ -23,13 +21,12 @@ class Login extends React.Component {
     const { user } = this.props
     return (
       <div>
-        <Header user={user} />
         <ConnectionForm
+          user={user}
           onChangeLogin={this.handleChangeLogin}
           onChangePassword={this.handleChangePassword}
           onClickSubmit={this.handleClickSubmit}
         />
-        <Footer />
       </div>
     )
   }

src/container/Page.jsx

@@ -1,16 +1,12 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Header } from '../component/Header.jsx'
-import { Footer } from '../component/Footer.jsx'
 
 class Page extends React.Component {
   render () {
     const { user } = this.props
     return (
       <div>
-        <Header user={user} />
-        <div>You are now connected, gg</div>
-        <Footer />
+        Page ! user Logged in : {user.isLoggedIn.toString()}
       </div>
     )
   }

src/container/PrivateRoute.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Route, Redirect, withRouter } from 'react-router-dom'
+
+// component inspired from https://reacttraining.com/react-router/web/example/auth-workflow
+
+// /!\ you shall destruct props.component otherwise you get a warning:
+// "You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  return (
+    <Route {...rest} render={props => rest.user.isLoggedIn
+      ? <Component {...props} />
+      : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
+    } />
+  )
+}
+
+const mapStateToProps = ({ user }) => ({ user })
+export default withRouter(connect(mapStateToProps)(PrivateRoute))
+
+PrivateRoute.PropTypes = {
+  component: PropTypes.shape({
+    Component: PropTypes.object.isRequired
+  }),
+  user: PropTypes.shape({ // user is get with redux connect
+    isLoggedIn: PropTypes.bool.isRequired
+  })
+}

src/container/Tracim.jsx

@@ -1,27 +1,33 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import Footer from '../component/FooterTpl.jsx'
+import HeaderContainer from './Header.jsx'
 import Login from './Login.jsx'
 import Page from './Page.jsx'
+import Home from './Home.jsx'
 import {
-  BrowserRouter,
-  Route
+  Route,
+  withRouter
 } from 'react-router-dom'
+import PrivateRoute from './PrivateRoute.jsx'
 
 class Tracim extends React.Component {
   render () {
     return (
-      <BrowserRouter>
-        <div>
-          <Route path='/' render={() =>
-            this.props.user.isLogedIn
-              ? <Page />
-              : <Login />
-          } />
-        </div>
-      </BrowserRouter>
+      <div>
+        <HeaderContainer />
+
+        <br /><hr /><br />
+
+        <PrivateRoute exact path='/' component={Home} />
+        <Route path='/login' component={Login} />
+        <PrivateRoute path='/page' component={Page} />
+
+        <Footer />
+      </div>
     )
   }
 }
 
 const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(Tracim)
+export default withRouter(connect(mapStateToProps)(Tracim))

src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { store } from './store.js'
 import Tracim from './container/Tracim.jsx'
+import { BrowserRouter } from 'react-router-dom'
 
 // require('./css/index.styl')
 
 ReactDOM.render(
   <Provider store={store}>
-    <Tracim />
+    <BrowserRouter>
+      <Tracim />
+    </BrowserRouter>
   </Provider>
   , document.getElementById('content')
 )

src/reducer/user.js

@@ -1,13 +1,19 @@
-import { USER_CONNECTED } from '../action-creator.sync.js'
+import {
+  USER_CONNECTED,
+  USER_DATA
+} from '../action-creator.sync.js'
 
 export default function user (state = {
-  isLogedIn: false,
+  isLoggedIn: false,
   username: '',
   email: ''
 }, action) {
   switch (action.type) {
     case `Update/${USER_CONNECTED}`:
-      return {...state, isLogedIn: true, ...action.user}
+      return {...state, isLoggedIn: true, ...action.user}
+
+    case `Update/${USER_DATA}`:
+      return {...state, ...action.data}
 
     default:
       return state

webpack.config.js

@@ -16,7 +16,6 @@ module.exports = {
       'react',
       'react-dom',
       'react-redux',
-      // 'react-router',
       'react-router-dom',
       // 'react-select',
       'redux',
@@ -24,7 +23,7 @@ module.exports = {
       // 'redux-saga',
       'redux-thunk',
       'whatwg-fetch',
-      // 'classnames'
+      'classnames'
     ]
   },
   output: {
@@ -40,12 +39,13 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
-    }
+    },
+    historyApiFallback: true
     // headers: {
     //   'Access-Control-Allow-Origin': '*'
     // }
   },
-  devtool: isProduction ? false : 'cheap-eval-source-map',
+  devtool: isProduction ? false : 'cheap-module-source-map',
   module: {
     rules: [{
       test: /\.jsx?$/,
@@ -77,23 +77,23 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.jsx']
   },
-  plugins: isProduction
-    ? [
+  plugins:[
+    ...[ // generic plugins always present
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         filename: 'tracim.vendor.bundle.js'
-      }),
-      new webpack.DefinePlugin({
-        'process.env': { 'NODE_ENV': JSON.stringify('production') }
-      }),
-      new webpack.optimize.UglifyJsPlugin({
-        compress: { warnings: false }
       })
-    ]
-    : [
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'vendor',
-        filename: 'tracim.vendor.bundle.js'
-      })
-    ]
+    ],
+    ...(isProduction
+      ? [ // production specific plugins
+        new webpack.DefinePlugin({
+          'process.env': { 'NODE_ENV': JSON.stringify('production') }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+          compress: { warnings: false }
+        })
+      ]
+      : [] // development specific plugins
+    )
+  ]
 }