app can now handle if user is already connected

jsonserver/server.js

@@ -24,6 +24,9 @@ server.post('/user/login', (req, res) => {
   if (req.body.login !== '' && req.body.password !== '') return res.jsonp(jsonDb.user_logged)
   else return res.jsonp('error')
 })
+
+server.get('/user/is_logged_in', (req, res) => res.jsonp(jsonDb.user_logged))
+
 server.get('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))
 
 server.use(router)

jsonserver/static_db.json

@@ -1,11 +1,13 @@
 {
-  "login": true,
   "user_logged": {
-    "id": 5,
-    "username": "Smoi",
-    "firstname": "Côme",
-    "lastname": "Stoilenom",
-    "email": "osef@algoo.fr"
+    "logged": true,
+    "user": {
+      "id": 5,
+      "username": "Smoi",
+      "firstname": "Côme",
+      "lastname": "Stoilenom",
+      "email": "osef@algoo.fr"
+    }
   },
   "workspace_detail": {
     "id": 1,

src/action-creator.async.js

@@ -75,9 +75,9 @@ export const userLogin = (login, password, rememberMe) => async dispatch => {
   if (fetchUserLogin.status === 200) dispatch(updateUserConnected(fetchUserLogin.json))
 }
 
-export const getUserConnected = () => async dispatch => {
+export const getIsUserConnected = () => async dispatch => {
   const fetchUserLogged = await fetchWrapper({
-    url: 'http://localhost:3001/user_logged',
+    url: 'http://localhost:3001/user/is_logged_in',
     param: {...FETCH_CONFIG, method: 'GET'},
     actionName: USER_CONNECTED,
     dispatch

src/container/Login.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Redirect } from 'react-router'
 import LoginLogo from '../component/Login/LoginLogo.jsx'
 import LoginLogoImg from '../img/logoTracimWhite.svg'
 import { userLogin } from '../action-creator.async.js'
@@ -34,7 +35,8 @@ class Login extends React.Component {
   }
 
   render () {
-    return (
+    if (this.props.user.isLoggedIn) return <Redirect to={{pathname: '/'}} />
+    else return (
       <section className='loginpage'>
         <div className='container-fluid'>
 

src/container/PrivateRoute.jsx

@@ -8,7 +8,8 @@ import { Route, Redirect, withRouter } from 'react-router-dom'
 // /!\ 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 (
+  if (rest.user.isLoggedIn === undefined) return <div />
+  else return (
     <Route {...rest} render={props => rest.user.isLoggedIn
       ? <Component {...props} />
       : <Redirect to={{pathname: '/login', state: {from: props.location}}} />

src/container/Tracim.jsx

@@ -11,39 +11,51 @@ import {
   withRouter
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
+import { getIsUserConnected } from '../action-creator.async.js'
 
 const SidebarWrapper = props => {
-  if (props.locationPath !== '/login') {
-    return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-        {props.children}
-      </div>
-    )
-  } else return props.children
+  if (props.locationPath !== '/login') return (
+    <div className='sidebarpagecontainer'>
+      <Sidebar />
+      {props.children}
+    </div>
+  )
+  else return props.children
 }
 
 class Tracim extends React.Component {
+  componentDidMount = () => {
+    this.props.dispatch(getIsUserConnected())
+  }
+
   render () {
-    const { location } = this.props
+    const { user, location } = this.props
+
     return (
       <div>
         <Header />
 
-        <Route path='/login' component={Login} />
+        { user.isLoggedIn === undefined
+          ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
+          : (
+            <div>
+              <Route path='/login' component={Login} />
 
-        <SidebarWrapper locationPath={location.pathname}>
+              <SidebarWrapper locationPath={location.pathname}>
 
-          <PrivateRoute exact path='/' component={WorkspaceContent} />
-          <PrivateRoute path='/page' component={Page} />
+                <PrivateRoute exact path='/' component={WorkspaceContent} />
+                <PrivateRoute path='/page' component={Page} />
 
-        </SidebarWrapper>
+              </SidebarWrapper>
 
-        <Footer />
+              <Footer />
+            </div>
+          )
+        }
       </div>
     )
   }
 }
 
-const mapStateToProps = () => ({})
+const mapStateToProps = ({ user }) => ({ user })
 export default withRouter(connect(mapStateToProps)(Tracim))

src/container/WorkspaceContent.jsx

@@ -43,13 +43,15 @@ class WorkspaceContent extends React.Component {
 
             { workspace.content.map(c => c.type === 'folder'
               ? <Folder folderData={c} key={c.id} />
-              : <FileItem
-                name={c.title}
-                type={c.type}
-                status={c.status}
-                onClickItem={() => this.setState({activeFileType: 'file'})}
-                key={c.id}
-              />
+              : (
+                <FileItem
+                  name={c.title}
+                  type={c.type}
+                  status={c.status}
+                  onClickItem={() => this.setState({activeFileType: 'file'})}
+                  key={c.id}
+                />
+              )
             )}
           </div>
 

src/reducer/user.js

@@ -3,8 +3,18 @@ import {
   USER_DATA
 } from '../action-creator.sync.js'
 
+const serializeUser = data => ({
+  id: data.user.id,
+  isLoggedIn: data.logged,
+  username: data.user.username,
+  firstname: data.user.firstname,
+  lastname: data.user.lastname,
+  email: data.user.email
+})
+
 export default function user (state = {
-  isLoggedIn: false,
+  id: 0,
+  isLoggedIn: undefined,
   username: '',
   firstname: '',
   lastname: '',
@@ -12,7 +22,7 @@ export default function user (state = {
 }, action) {
   switch (action.type) {
     case `Update/${USER_CONNECTED}`:
-      return {...state, isLoggedIn: true, ...action.user}
+      return serializeUser(action.user)
 
     case `Update/${USER_DATA}`:
       return {...state, ...action.data}