fixed merge conflict + fixed missing varaible name refactor

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,

package.json

@@ -7,7 +7,7 @@
     "mockapi": "node jsonserver/server.js",
     "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
     "servdevwindoz": "webpack-dev-server --watch --colors --inline --hot --progress",
-    "servdev-dashboard": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -- webpack-dev-server --watch --colors --inline --hot --progress",
     "build": "NODE_ENV=production webpack -p",
     "test": "echo \"Error: no test specified\" && exit 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/component/common/Card/Card.jsx

@@ -14,13 +14,6 @@ const Card = props => {
 export default Card
 
 Card.propTypes = {
-  // check https://stackoverflow.com/questions/27366077/only-allow-children-of-a-specific-type-in-a-react-component
-  // children: PropTypes.arrayOf( // children is an array
-  //   PropTypes.shape({ // of objects
-  //     type: PropTypes.oneOf([CardHeader, CardBody]) // that as an attribute 'type' equals to CardHeader or CardBody
-  //   })
-  // ),
-
   // from http://www.mattzabriskie.com/blog/react-validating-children
   children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
     if (

src/component/common/PopinFixed/PopinFixed.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import PopinFixedHeader from './PopinFixedHeader.jsx'
+import PopinFixedOption from './PopinFixedOption.jsx'
+import PopinFixedContent from './PopinFixedContent.jsx'
 
 const PopinFixed = props => {
   return (
@@ -17,6 +20,22 @@ PopinFixed.propTypes = {
   visible: PropTypes.bool
 }
 
+PopinFixed.propTypes = {
+  // from http://www.mattzabriskie.com/blog/react-validating-children
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
+    if (
+      children.length > 3 ||
+      children[0].type !== PopinFixedHeader ||
+      children[1].type !== PopinFixedOption ||
+      children[2].type !== PopinFixedContent
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be: 1 PopinFixedHeader, 1 PopinFixedOption and 1 PopinFixedContent.`)
+    }
+  }).isRequired,
+  customClass: PropTypes.string,
+  visible: PropTypes.bool
+}
+
 PopinFixed.defaultProps = {
   customClass: '',
   visible: true

src/container/PageText.jsx → src/container/FileType/PageHtml.jsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
-import PopinFixed from '../component/common/PopinFixed/PopinFixed'
-import PopinFixedHeader from '../component/common/PopinFixed/PopinFixedHeader.jsx'
-import PopinFixedOption from '../component/common/PopinFixed/PopinFixedOption.jsx'
-import PopinFixedContent from '../component/common/PopinFixed/PopinFixedContent.jsx'
-import Timeline from '../component/Timeline.jsx'
+import PopinFixed from '../../component/common/PopinFixed/PopinFixed'
+import PopinFixedHeader from '../../component/common/PopinFixed/PopinFixedHeader.jsx'
+import PopinFixedOption from '../../component/common/PopinFixed/PopinFixedOption.jsx'
+import PopinFixedContent from '../../component/common/PopinFixed/PopinFixedContent.jsx'
+import Timeline from '../../component/Timeline.jsx'
 
-class PageText extends Component {
+class PageHtml extends Component {
   render () {
     return (
       <PopinFixed customClass={'wsFileText'}>
@@ -25,7 +25,7 @@ class PageText extends Component {
   }
 }
 
-export default PageText
+export default PageHtml
 
 /*
       <div className={classnames('wsFileText wsFileGeneric', {'visible': this.props.visible})}>

src/container/Thread.jsx → src/container/FileType/Thread.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import classnames from 'classnames'
-import imgProfil from '../img/imgProfil.png'
+import imgProfil from '../../img/imgProfil.png'
 
 class Thread extends Component {
   render () {

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'
@@ -25,85 +26,88 @@ class Login extends React.Component {
   handleChangePassword = e => this.setState({inputPassword: e.target.value})
   handleChangeRememberMe = () => this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
 
-  handleClickSubmit = () => {
+  handleClickSubmit = async () => {
     const { history, dispatch } = this.props
     const { inputLogin, inputPassword, inputRememberMe } = this.state
 
-    dispatch(userLogin(inputLogin, inputPassword, inputRememberMe))
-    .then(() => history.push('/'))
+    await dispatch(userLogin(inputLogin, inputPassword, inputRememberMe))
+    history.push('/')
   }
 
   render () {
-    return (
-      <section className='loginpage'>
-        <div className='container-fluid'>
-
-          <LoginLogo customClass='loginpage__logo' logoSrc={LoginLogoImg} />
-
-          <div className='row justify-content-center'>
-            <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
-
-              <Card customClass='loginpage__connection'>
-                <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
-
-                <CardBody formClass='connection__form'>
-                  <InputGroupText
-                    parentClassName='connection__form__groupemail'
-                    customClass='mb-3 mt-4'
-                    icon='fa-envelope-open-o'
-                    type='email'
-                    placeHolder='Adresse Email'
-                    invalidMsg='Email invalide.'
-                    value={this.state.inputLogin}
-                    onChange={this.handleChangeLogin}
-                  />
-
-                  <InputGroupText
-                    parentClassName='connection__form__groupepw'
-                    customClass=''
-                    icon='fa-lock'
-                    type='password'
-                    placeHolder='Mot de passe'
-                    invalidMsg='Mot de passe invalide.'
-                    value={this.state.inputPassword}
-                    onChange={this.handleChangePassword}
-                  />
-
-                  <div className='row mt-4 mb-4'>
-                    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-                      <InputCheckbox
-                        parentClassName='connection__form__rememberme'
-                        customClass=''
-                        label='Se souvenir de moi'
-                        checked={this.state.inputRememberMe}
-                        onChange={this.handleChangeRememberMe}
-                      />
+    if (this.props.user.isLoggedIn) return <Redirect to={{pathname: '/'}} />
+    else {
+      return (
+        <section className='loginpage'>
+          <div className='container-fluid'>
+
+            <LoginLogo customClass='loginpage__logo' logoSrc={LoginLogoImg} />
+
+            <div className='row justify-content-center'>
+              <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
+
+                <Card customClass='loginpage__connection'>
+                  <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
+
+                  <CardBody formClass='connection__form'>
+                    <InputGroupText
+                      parentClassName='connection__form__groupemail'
+                      customClass='mb-3 mt-4'
+                      icon='fa-envelope-open-o'
+                      type='email'
+                      placeHolder='Adresse Email'
+                      invalidMsg='Email invalide.'
+                      value={this.state.inputLogin}
+                      onChange={this.handleChangeLogin}
+                    />
+
+                    <InputGroupText
+                      parentClassName='connection__form__groupepw'
+                      customClass=''
+                      icon='fa-lock'
+                      type='password'
+                      placeHolder='Mot de passe'
+                      invalidMsg='Mot de passe invalide.'
+                      value={this.state.inputPassword}
+                      onChange={this.handleChangePassword}
+                    />
+
+                    <div className='row mt-4 mb-4'>
+                      <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                        <InputCheckbox
+                          parentClassName='connection__form__rememberme'
+                          customClass=''
+                          label='Se souvenir de moi'
+                          checked={this.state.inputRememberMe}
+                          onChange={this.handleChangeRememberMe}
+                        />
+                      </div>
+
+                      <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
+                        <LoginBtnForgotPw
+                          customClass='connection__form__pwforgot'
+                          label='Mot de passe oublié ?'
+                        />
+                      </div>
                     </div>
 
-                    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
-                      <LoginBtnForgotPw
-                        customClass='connection__form__pwforgot'
-                        label='Mot de passe oublié ?'
-                      />
-                    </div>
-                  </div>
-
-                  <Button
-                    htmlType='button'
-                    bootstrapType='primary'
-                    customClass='connection__form__btnsubmit'
-                    label='Connexion'
-                    onClick={this.handleClickSubmit}
-                  />
-                </CardBody>
-              </Card>
-
+                    <Button
+                      htmlType='button'
+                      bootstrapType='primary'
+                      customClass='connection__form__btnsubmit'
+                      label='Connexion'
+                      onClick={this.handleClickSubmit}
+                    />
+                  </CardBody>
+                </Card>
+
+              </div>
             </div>
-          </div>
 
-        </div>
-      </section>
-    )
+          </div>
+        </section>
+      )
+    }
   }
 }
 

src/container/Page.jsx

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

src/container/PrivateRoute.jsx

@@ -7,14 +7,12 @@ 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 (
-    <Route {...rest} render={props => rest.user.isLoggedIn
-      ? <Component {...props} />
-      : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
-    } />
-  )
-}
+const PrivateRoute = ({ component: Component, ...rest }) => (
+  <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))

src/container/Tracim.jsx

@@ -4,46 +4,57 @@ import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
-import Page from './Page.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import {
   Route,
   withRouter
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
-
-const SidebarWrapper = props => {
-  if (props.locationPath !== '/login') {
-    return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-        {props.children}
-      </div>
-    )
-  } else return props.children
-}
+import { getIsUserConnected } from '../action-creator.async.js'
 
 class Tracim extends React.Component {
+  componentDidMount = () => {
+    this.props.dispatch(getIsUserConnected())
+  }
+
   render () {
-    const { location } = this.props
+    const { user, location } = this.props
+
+    const SidebarWrapper = props => {
+      if (props.locationPath !== '/login') {
+        return (
+          <div className='sidebarpagecontainer'>
+            <Sidebar />
+            {props.children}
+          </div>
+        )
+      } else return props.children
+    }
+
     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} />
 
-        </SidebarWrapper>
+              </SidebarWrapper>
 
-        <Footer />
+              <Footer />
+            </div>
+          )
+        }
       </div>
     )
   }
 }
 
-const mapStateToProps = () => ({})
+const mapStateToProps = ({ user }) => ({ user })
 export default withRouter(connect(mapStateToProps)(Tracim))

src/container/WorkspaceContent.jsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux'
 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-import Thread from './Thread.jsx'
-// import PageText from './PageText.jsx'
+// import Thread from './FileType/Thread.jsx'
+import PageHtml from './FileType/PageHtml.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
@@ -43,21 +43,23 @@ 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: 'thread'})}
-                key={c.id}
-              />
+              : (
+                <FileItem
+                  name={c.title}
+                  type={c.type}
+                  status={c.status}
+                  onClickItem={() => this.setState({activeFileType: 'file'})}
+                  key={c.id}
+                />
+              )
             )}
           </div>
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <Thread visible={this.state.activeFileType === 'thread'} />
+          <PageHtml visible={this.state.activeFileType === 'file'} />
           {/*
-          <PageText visible={this.state.activeFileType === 'file'} />
+          <Thread visible={this.state.activeFileType === 'chat'} />
           */}
         </PageContent>
 

src/css/Header.styl

@@ -19,7 +19,7 @@
           color blue
           font-size 16px
           &:hover
-            color dark-blue
+            color darkBlue
     &__rightside
       display flex
       margin-top 15px
@@ -60,7 +60,7 @@
         &__btnquestion
           margin-right 30px
           .btnquestion__icon
-            color dark-grey
+            color darkGrey
       &__itemprofil
         &__profilgroup
           .profilgroup__name

src/css/Variable.styl

@@ -22,7 +22,8 @@ darkBlue = #215e8e
 blue = #2571fe
 lightBlue = #569EDE
 
-btnCallAction = #28a745 // couleur des boutons call2action dans le contexte generale (tout contexte sauf celui d'un type de contenu particulier)
+// c2a btn color in general context ; meaning every context but specific one related to file type (file, pageHtml, issues, threads ...)
+btnCallAction = #28a745
 btnCallAction-hover = darken(btnCallAction, 15%)
 
 threadColor = #2674d3
@@ -41,13 +42,12 @@ issueColor = #a4835e
 // calendarColor =
 // dashboard =
 
-
 /*************************/
 /**** BOX SHADOW ****/
 shadow-bottom = 0px 0px 5px 1px #606060
 shadow-right = 2px 2px 5px 0px #404040
 shadow-all = 1px 1px 5px 2px #ababab
-shadow-all-side-blue = 0px 0px 1px 1px light-blue
+shadow-all-side-blue = 0px 0px 1px 1px lightBlue
 shadow-all-side-green = 0 0 1px 2px green
 
 /***********************/

src/css/index.styl

@@ -18,5 +18,5 @@ html, body, #content, #content > div
 @import 'Folder'
 
 @import 'Thread'
-@import 'PageText'
+@import 'PageHtml'
 @import 'Timeline'

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}