merge master into alexicauvin

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,
@@ -16,7 +18,8 @@
         "id": 1,
         "title": "La programmation fonctionnelle",
         "type": "pageHtml",
-        "status": "validated"
+        "status": "validated",
+        "text": "<h1>Mon titre nul</h1>Je suis le contenu de cette fameuse <b>page HTML</b><br /> sur la programmation fonctionnelle"
       },
       {
         "id": 2,
@@ -26,25 +29,25 @@
       },
       {
         "id": 6,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Une photo moche",
         "type": "file",
         "status": "current"
       },
       {
         "id": 10,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "le README.md d'un random repo github",
         "type": "pageMarkdown",
         "status": "current"
       },
       {
         "id": 7,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Une liste de truc à faire que je ferai jamais",
         "type": "task",
         "status": "current"
       },
       {
         "id": 8,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Ça, ça marche pas. Merci de le fix",
         "type": "issue",
         "status": "current"
       },

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/action-creator.sync.js

@@ -7,3 +7,7 @@ export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data:
 
 export const WORKSPACE = 'Workspace'
 export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`, workspace })
+
+export const FILE_CONTENT = 'FileContent'
+export const setActiveFileContent = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
+export const hideActiveFileContent = () => ({ type: `Set/${FILE_CONTENT}/Hide` })

src/component/Workspace/FileContentViewer.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PopinFixed from '../common/PopinFixed/PopinFixed'
+import PopinFixedHeader from '../common/PopinFixed/PopinFixedHeader.jsx'
+import PopinFixedOption from '../common/PopinFixed/PopinFixedOption.jsx'
+import PopinFixedContent from '../common/PopinFixed/PopinFixedContent.jsx'
+import PageHtml from './FileType/PageHtml.jsx'
+import Thread from './FileType/Thread.jsx'
+import Timeline from '../Timeline.jsx'
+import { FILE_TYPE } from '../../helper.js'
+
+const FileContentViewer = props => {
+  const { customClass, icon } = FILE_TYPE.find(f => f.name === props.file.type) || {customClass: '', icon: ''}
+
+  const [leftPart, rightPart] = (() => {
+    switch (props.file.type) {
+      case FILE_TYPE[0].name: // pageHtml
+        return [
+          <PageHtml version={props.file.version} text={props.file.text} />,
+          <Timeline customClass={`${customClass}__contentpage`} />
+        ]
+      case FILE_TYPE[3].name: // thread
+        return [
+          <Thread />
+        ]
+    }
+  })()
+
+  return (
+    <PopinFixed customClass={`${customClass}`}>
+      <PopinFixedHeader
+        customClass={`${customClass}`}
+        icon={icon}
+        name={props.file.title}
+        onClickCloseBtn={props.onClose}
+      />
+
+      <PopinFixedOption customClass={`${customClass}`} />
+
+      <PopinFixedContent customClass={`${customClass}__contentpage`}>
+        { leftPart }
+        { rightPart }
+      </PopinFixedContent>
+    </PopinFixed>
+  )
+}
+
+export default FileContentViewer
+
+FileContentViewer.PropTypes = {
+  file: PropTypes.shape({
+    type: PropTypes.oneOf(FILE_TYPE.map(f => f.name)).isRequired,
+    title: PropTypes.string.isRequired
+  }).isRequired,
+  onClose: PropTypes.func.isRequired
+}

src/component/Workspace/FileItem.jsx

@@ -4,22 +4,7 @@ import classnames from 'classnames'
 import { FILE_TYPE } from '../../helper.js'
 
 const FileItem = props => {
-  const iconType = (() => {
-    switch (props.type) {
-      case FILE_TYPE.PAGE_HTML:
-        return 'fa fa-file-word-o'
-      case FILE_TYPE.PAGE_MARKDOWN:
-        return 'fa fa-file-code-o'
-      case FILE_TYPE.FILE:
-        return 'fa fa-file-image-o'
-      case FILE_TYPE.THREAD:
-        return 'fa fa-comments-o'
-      case FILE_TYPE.TASK:
-        return 'fa fa-list-ul'
-      case FILE_TYPE.ISSUE:
-        return 'fa fa-ticket'
-    }
-  })()
+  const iconType = (FILE_TYPE.find(f => f.name === props.type) || {icon: ''}).icon
 
   const iconStatus = (() => {
     switch (props.status) {

src/component/Workspace/FileType/PageHtml.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const PageHtml = props => {
+  return (
+    <div className='wsFilePageHtml__contentpage__textnote'>
+      <div className='wsFilePageHtml__contentpage__textnote__latestversion'>
+        { props.version }
+      </div>
+      <div className='wsFilePageHtml__contentpage__textnote__text'>
+        { props.text }
+      </div>
+    </div>
+  )
+}
+
+export default PageHtml

src/container/Thread.jsx → src/component/Workspace/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/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/component/common/PopinFixed/PopinFixedContent.jsx

@@ -1,21 +1,42 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import PageHtml from '../../Workspace/FileType/PageHtml.jsx'
+import Thread from '../../Workspace/FileType/Thread.jsx'
+import Timeline from '../../Timeline.jsx'
 
 const PopinFixedContent = props => {
-  return (
-    <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
-      <div className={classnames('wsFileGeneric__textnote', `${props.customClass}__textnote`)} />
+  return props.children.length === 2
+    ? (
+      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+        {props.children[0]}
 
-      <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
-        {props.children}
+        <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
+          {props.children[1]}
+        </div>
       </div>
-    </div>
-  )
+    )
+    : (
+      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+        { props.children }
+      </div>
+    )
 }
 
 export default PopinFixedContent
 
 PopinFixedContent.propTypes = {
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  // from http://www.mattzabriskie.com/blog/react-validating-children
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
+    if (
+      (Array.isArray(children.length) && (
+        children.length > 2 ||
+        (children.length === 2 && children.some(c => ![PageHtml, Thread, Timeline].includes(c.type)))
+      )) ||
+      (children.type === Timeline)
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be one of [PageHtml, Thread, Timeline, undefined].`)
+    }
+  }).isRequired
 }

src/component/common/PopinFixed/PopinFixedHeader.jsx

@@ -17,7 +17,10 @@ const PopinFixedHeader = props => {
         <i className='fa fa-pencil' />
       </div>
 
-      <div className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}>
+      <div
+        className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}
+        onClick={props.onClickCloseBtn}
+      >
         <i className='fa fa-times' />
       </div>
     </div>
@@ -28,6 +31,7 @@ export default PopinFixedHeader
 
 PopinFixedHeader.propTypes = {
   icon: PropTypes.string.isRequired,
+  onClickCloseBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
   name: PropTypes.string
 }

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/PageText.jsx

@@ -1,73 +0,0 @@
-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'
-
-class PageText extends Component {
-  render () {
-    return (
-      <PopinFixed customClass={'wsFileText'}>
-        <PopinFixedHeader
-          customClass='wsFileText'
-          icon='fa fa-file-word-o'
-          name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
-        />
-
-        <PopinFixedOption customClass={'wsFileText'} />
-
-        <PopinFixedContent customClass={'wsFileText__contentpage'}>
-          <Timeline customClass={'wsFileText__contentpage'} />
-        </PopinFixedContent>
-      </PopinFixed>
-    )
-  }
-}
-
-export default PageText
-
-/*
-      <div className={classnames('wsFileText wsFileGeneric', {'visible': this.props.visible})}>
-
-        <div className='wsFileText__contentpage wsFileGeneric__contentpage'>
-          <div className='wsFileText__contentpage__textnote'>
-            <div className='wsFileText__contentpage__textnote__latestversion'>
-              Dernière version : v3
-            </div>
-            <div className='wsFileText__contentpage__textnote__title'>
-              Titre de 30px de font size
-            </div>
-            <div className='wsFileText__contentpage__textnote__data'>
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-            </div>
-          </div>
-          <div className='wsFileText__contentpage__wrapper wsFileGeneric__wrapper'>
-
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default PageText
-*/

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,14 +3,14 @@ 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 Preview from './Preview.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'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
+import FileContentViewer from '../component/Workspace/FileContentViewer.jsx'
 import { getWorkspaceContent } from '../action-creator.async.js'
+import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
@@ -24,8 +24,16 @@ class WorkspaceContent extends React.Component {
     this.props.dispatch(getWorkspaceContent(/* this.props.workspace.id */1))
   }
 
+  handleClickFileItem = file => {
+    this.props.dispatch(setActiveFileContent(file))
+  }
+
+  handleClickCloseBtn = () => {
+    this.props.dispatch(hideActiveFileContent())
+  }
+
   render () {
-    const { workspace } = this.props
+    const { workspace, activeFileContent } = this.props
 
     return (
       <PageWrapper customeClass='workspace'>
@@ -44,24 +52,26 @@ 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.handleClickFileItem(c)}
+                  key={c.id}
+                />
+              )
             )}
           </div>
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <Preview visible={this.state.activeFileType === 'file'} />
-
-          {/*
-          <PageText visible={this.state.activeFileType === 'file'} />
-          <Thread visible={this.state.activeFileType === 'thread'} />
-          */}
+          { activeFileContent.display &&
+            <FileContentViewer
+              file={activeFileContent}
+              onClose={this.handleClickCloseBtn}
+            />
+          }
         </PageContent>
 
       </PageWrapper>
@@ -69,5 +79,5 @@ class WorkspaceContent extends React.Component {
   }
 }
 
-const mapStateToProps = ({ workspace }) => ({ workspace })
+const mapStateToProps = ({ workspace, activeFileContent }) => ({ workspace, activeFileContent })
 export default connect(mapStateToProps)(WorkspaceContent)

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/PageText.styl → src/css/PageHtml.styl

@@ -1,4 +1,4 @@
-.wsFileText
+.wsFilePageHtml
   width 1200px
   height calc(100% - 85px)
   overflow-Y auto
@@ -20,14 +20,8 @@
       &__latestversion
         text-align right
         opacity 0.7
-      &__title
-        margin 10px 0
-        font-size 30px
-        color htmlColor
-      &__data
-        flex-grow 1
-        flex-shrink 1
-        flex-basis 0
+      &__text
+        font-size 14px
     &__wrapper
       margin 10px
       border-radius 10px
@@ -86,28 +80,17 @@
             border-color htmlColor
             background-color htmlColor
 
-/***** CLASS MESSAGELISTSIZE *****/
-
 .messagelistOpen
-  .wsFileText__contentpage__messagelist
+  .wsFilePageHtml__contentpage__messagelist
     flex 0
     min-height 0
 
-/*********************************/
-
-/***** SENDER RECEIVER *****/
-
 .received
-  .wsFileText__contentpage__messagelist__item__content
+  .wsFilePageHtml__contentpage__messagelist__item__content
       background-color htmlColor
 
-/*****************************/
-
-/**** MEDIA QUERIES ****/
-
 @media (min-width: max-xs) and (max-width: max-lg)
-
-  .wsFileText
+  .wsFilePageHtml
     &__contentpage
       display block
       overflow-Y scroll
@@ -123,11 +106,9 @@
       &__texteditor
         &__simpletext
           display inline-flex
-          display ms-inline-flex
           width 60%
         &__submit
           display inline-flex
-          display ms-inline-flex
           margin 10px 0
           &__btn
             display flex
@@ -135,46 +116,28 @@
             &__icon
               margin-left 15px
 
-/**** MEDIA 992px & 1199px ****/
-
 @media (min-width: min-lg) and (max-width: max-lg)
-
-  .wsFileText
+  .wsFilePageHtml
     width 692px
     &__contentpage__texteditor__simpletext
       margin-left 15px
 
-/******************************/
-
-/**** MEDIA 768px & 991px ****/
-
 @media (min-width: min-md) and (max-width: max-md)
-
-  .wsFileText
+  .wsFilePageHtml
     width 768px
     &__contentpage__texteditor__simpletext
       margin-left 25px
 
-/******************************/
-
-/**** MEDIA 576px & 767px ****/
-
 @media (min-width: min-sm) and (max-width: max-sm)
-
-  .wsFileText
+  .wsFilePageHtml
       top 69px
       width 576px
       height calc(100% - 69px)
       &__contentpage__texteditor__simpletext
         margin-left 10px
 
-/******************************/
-
-/**** MEDIA 575px ****/
-
 @media (max-width: max-xs)
-
-  .wsFileText
+  .wsFilePageHtml
     top 70px
     height calc(100% - 70px)
     width 100%

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
@@ -42,13 +43,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,7 +18,7 @@ html, body, #content, #content > div
 @import 'Folder'
 
 @import 'Thread'
-@import 'PageText'
+@import 'PageHtml'
 @import 'Timeline'
 @import 'Preview'
 

src/helper.js

@@ -5,11 +5,28 @@ export const FETCH_CONFIG = {
   }
 }
 
-export const FILE_TYPE = {
-  PAGE_HTML: 'pageHtml',
-  PAGE_MARKDOWN: 'pageMarkdown',
-  FILE: 'file',
-  THREAD: 'thread',
-  TASK: 'task',
-  ISSUE: 'issue'
-}
+export const FILE_TYPE = [{
+  name: 'pageHtml',
+  customClass: 'wsFilePageHtml',
+  icon: 'fa fa-file-word-o'
+}, {
+  name: 'pageMarkdown',
+  customClass: 'wsFilePageMarkdown',
+  icon: 'fa fa-file-code-o'
+}, {
+  name: 'file',
+  customClass: 'wsFileFile',
+  icon: 'fa fa-file-image-o'
+}, {
+  name: 'thread',
+  customClass: 'wsFileThread',
+  icon: 'fa fa-comments-o'
+}, {
+  name: 'task',
+  customClass: 'wsFileTask',
+  icon: 'fa fa-list-ul'
+}, {
+  name: 'issue',
+  customClass: 'wsFileIssue',
+  icon: 'fa fa-ticket'
+}]

src/reducer/activeFileContent.js

@@ -0,0 +1,22 @@
+import { FILE_CONTENT } from '../action-creator.sync.js'
+
+export default function activeFileContent (state = {
+  display: false,
+  type: '',
+  title: '',
+  status: ''
+}, action) {
+  switch (action.type) {
+    case `Set/${FILE_CONTENT}/Active`:
+      return {
+        display: true,
+        ...action.file
+      }
+
+    case `Set/${FILE_CONTENT}/Hide`:
+      return {...state, display: false}
+
+    default:
+      return state
+  }
+}

src/reducer/fileType/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux'
+
+// import color from './color.js'
+// import size from './size.js'
+// import price from './price.js'
+// import multicolor from './multicolor.js'
+
+export default combineReducers({
+
+})

src/reducer/fileType/pageHtml.js

@@ -0,0 +1,10 @@
+export default function pageHtml (state = {
+  title: '',
+  version: 0,
+  text: ''
+}, action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}

src/reducer/root.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux'
 import user from './user.js'
 import workspace from './workspace.js'
+import activeFileContent from './activeFileContent.js'
 
-const rootReducer = combineReducers({ user, workspace })
+const rootReducer = combineReducers({ user, workspace, activeFileContent })
 
 export default rootReducer

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}