added login and workspace content loading from mockapi

dist/index.html

@@ -34,7 +34,6 @@
         var jsScript = document.createElement("script");
         jsScript.type = "text/javascript";
         jsScript.src = "https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=dfdhxdokxj2wagzkbxfgysgh86d6rr9m3dln0172vo3shipc";
-        console.log("load the lib");
 
         jsScript.onload = function() {
           function base64EncodeAndTinyMceInsert (files) {
@@ -91,18 +90,20 @@
                 icon: 'mce-ico mce-i-image',
                 title: 'Image',
                 onclick: function () {
-                  if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
+                  var hiddenTinyMceInput = $('#hidden_tinymce_fileinput')
+
+                  if (hiddenTinyMceInput.length > 0) hiddenTinyMceInput.remove()
 
                   fileTag = document.createElement('input')
                   fileTag.id = 'hidden_tinymce_fileinput'
                   fileTag.type = 'file'
                   $('body').append(fileTag)
 
-                  $('#hidden_tinymce_fileinput').on('change', function () {
+                  hiddenTinyMceInput.on('change', function () {
                     base64EncodeAndTinyMceInsert($(this)[0].files)
                   })
 
-                  $('#hidden_tinymce_fileinput').click()
+                  hiddenTinyMceInput.click()
                 }
               })
 

jsonserver/server.js

@@ -11,20 +11,21 @@ server.use(jsonServer.bodyParser)
 // res.jsonp(req.query)
 server.get('/echo', (req, res) => res.jsonp('gg'))
 server.get('/login', (req, res) => res.jsonp(jsonDb.login))
-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_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)
 //   console.log(req.body)
 //   res.jsonp('gg')
 // })
 
+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('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))
+
 server.use(router)
 server.listen(GLOBAL_PORT, () => {
   console.log('JSON Server is running on port : ' + GLOBAL_PORT)

jsonserver/static_db.json

@@ -6,5 +6,43 @@
     "firstname": "Côme",
     "lastname": "Stoilenom",
     "email": "osef@algoo.fr"
+  },
+  "workspace_detail": {
+    "id": 1,
+    "title": "Mission interne - développement",
+    "owner_id": 5,
+    "content": [
+      {
+        "id": 1,
+        "title": "La programmation fonctionnelle",
+        "type": "pageHtml",
+        "status": "validated"
+      },
+      {
+        "id": 2,
+        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "type": "thread",
+        "status": "current"
+      },
+      {
+        "id": 3,
+        "title": "Programmation objet",
+        "type": "folder",
+        "content": [
+          {
+            "id": 4,
+            "title": "des trucs de backend",
+            "type": "file",
+            "status": "outdated"
+          },
+          {
+            "id": 5,
+            "title": "on s'emmerde",
+            "type": "pageHtml",
+            "status": "outdated"
+          }
+        ]
+      }
+    ]
   }
 }

src/action-creator.async.js

@@ -4,7 +4,9 @@ import {
   USER_DATA,
   USER_CONNECTED,
   updateUserConnected,
-  updateUserData
+  updateUserData,
+  WORKSPACE,
+  updateWorkspaceData
 } from './action-creator.sync.js'
 
 /*
@@ -53,10 +55,20 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
   return fetchResult
 }
 
-export const userLogin = (login, password) => async dispatch => {
+export const userLogin = (login, password, rememberMe) => async dispatch => {
+  const jsonBody = JSON.stringify({
+    login,
+    password,
+    remember_me: rememberMe
+  })
+
   const fetchUserLogin = await fetchWrapper({
     url: 'http://localhost:3001/user/login',
-    param: {...FETCH_CONFIG, method: 'POST', body: JSON.stringify({login, password})},
+    param: {
+      ...FETCH_CONFIG,
+      method: 'POST',
+      body: jsonBody
+    },
     actionName: USER_LOGIN,
     dispatch
   })
@@ -92,3 +104,13 @@ export const updateUserLang = newLang => async dispatch => {
 //   })
 //   console.log('jsonResponseNoData', fetchResponseNoData)
 // }
+
+export const getWorkspaceContent = workspaceId => async dispatch => {
+  const fetchGetWorkspaceContent = await fetchWrapper({
+    url: `http://localhost:3001/workspace/${workspaceId}`,
+    param: {...FETCH_CONFIG, method: 'GET'},
+    actionName: WORKSPACE,
+    dispatch
+  })
+  if (fetchGetWorkspaceContent.status === 200) dispatch(updateWorkspaceData(fetchGetWorkspaceContent.json))
+}

src/action-creator.sync.js

@@ -4,3 +4,6 @@ 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 })
+
+export const WORKSPACE = 'Workspace'
+export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`, workspace })

src/component/Timeline.jsx

@@ -14,7 +14,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilOrange} alt='avatar'/>
+            <img src={imgProfilOrange} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
@@ -28,7 +28,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} alt='avatar'/>
+            <img src={imgProfilReverse} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
@@ -46,7 +46,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
           <div className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}>
-            <i className='fa fa-code-fork'/>
+            <i className='fa fa-code-fork' />
             version 3
           </div>
           <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
@@ -56,7 +56,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilOrange} alt='avatar'/>
+            <img src={imgProfilOrange} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
@@ -70,7 +70,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} alt='avatar'/>
+            <img src={imgProfilReverse} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
@@ -90,27 +90,27 @@ const Timeline = props => {
       <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
         <div
           className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group')}>
-          <input type='text'
-                 className={classnames(`${props.customClass}__texteditor__simpletext__input`, 'timeline__texteditor__simpletext__input form-control')}
-                 placeholder='...'/>
+          <input
+            type='text'
+            className={classnames(`${props.customClass}__texteditor__simpletext__input`, 'timeline__texteditor__simpletext__input form-control')}
+            placeholder='...'
+          />
           <div
             className={classnames(`${props.customClass}__texteditor__simpletext__icon`, 'timeline__texteditor__simpletext__icon input-group-addon')}>
-            <i className='fa fa-font'/>
+            <i className='fa fa-font' />
           </div>
         </div>
-        <div
-          className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-xl-block')}>
-          <textarea/>
+        <div className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-xl-block')}>
+          <textarea />
         </div>
-        <div
-          className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-xl-flex justify-content-xl-center')}>
+        <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-xl-flex justify-content-xl-center')}>
           <button
             type='submit'
             className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
           >
             Envoyer
             <div className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
-              <i className='fa fa-paper-plane-o'/>
+              <i className='fa fa-paper-plane-o' />
             </div>
           </button>
         </div>

src/component/Workspace/FileItem.jsx

@@ -1,16 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { FILE_TYPE } from '../../helper.js'
 
 const FileItem = props => {
   const iconType = (() => {
     switch (props.type) {
-      case 'file':
+      case FILE_TYPE.PAGE_HTML:
+        return 'fa fa-exclamation-triangle'
+      case FILE_TYPE.PAGE_MARKDOWN:
+        return 'fa fa-exclamation-triangle'
+      case FILE_TYPE.FILE:
         return 'fa fa-file-text-o docandfile-color'
-      case 'chat':
+      case FILE_TYPE.THREAD:
         return 'fa fa-comments talk-color'
-      case 'task':
+      case FILE_TYPE.TASK:
         return 'fa fa-list-ul task-color'
+      case FILE_TYPE.ISSUE:
+        return 'fa fa-exclamation-triangle'
     }
   })()
 

src/component/Workspace/Folder.jsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
-// import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import FileItem from './FileItem.jsx'
 
-// @TODO set Folder as a component, state open will come from parent container (which will come from redux)
+// @TODO set Folder as a component, state open will come from parent container (which will come from redux) // update: or not ?
 
 class Folder extends Component {
   constructor (props) {
@@ -20,8 +21,9 @@ class Folder extends Component {
   }
 
   render () {
+    const { title, content } = this.props.folderData
     return (
-      <div className={'folder' + (this.state.open ? ' active' : '')}>
+      <div className={classnames('folder', {'active': this.state.open})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
           <div className='folder__header__triangleborder'>
             <div className='folder__header__triangleborder__triangle' />
@@ -31,7 +33,7 @@ class Folder extends Component {
               <i className='fa fa-folder-open-o' />
             </div>
             <div className='folder__header__name__text'>
-              Dossier Facture
+              { title }
             </div>
             <div className='folder__header__name__addbtn' onClick={this.handleClickNewFile}>
               <div className='folder__header__name__addbtn__text btn btn-primary'>
@@ -52,7 +54,16 @@ class Folder extends Component {
         </div>
 
         <div className='folder__content'>
-          { this.props.children }
+          { content.map(c => c.type === 'folder'
+            ? <Folder folderData={c} key={c.id} />
+            : <FileItem
+              name={c.title}
+              type={c.type}
+              status={c.status}
+              onClickItem={() => {}}
+              key={c.id}
+            />
+          )}
         </div>
       </div>
     )
@@ -60,3 +71,10 @@ class Folder extends Component {
 }
 
 export default Folder
+
+Folder.propTypes = {
+  folderData: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.array
+  })
+}

src/component/common/PopinFixed/PopinFixedContent.jsx

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types'
 const PopinFixedContent = props => {
   return (
     <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
-      <div className={classnames('wsFileGeneric__textnote', `${props.customClass}__textnote`)}>
-      </div>
+      <div className={classnames('wsFileGeneric__textnote', `${props.customClass}__textnote`)} />
 
       <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
         {props.children}
@@ -18,5 +17,5 @@ const PopinFixedContent = props => {
 export default PopinFixedContent
 
 PopinFixedContent.propTypes = {
-
+  customClass: PropTypes.string
 }

src/component/common/PopinFixed/PopinFixedOption.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import classnames from 'classnames'
-import PropTypes from 'prop-types'
+// import classnames from 'classnames'
+// import PropTypes from 'prop-types'
 
 const PopinFixedOption = props => {
   return (

src/container/Login.jsx

@@ -27,9 +27,9 @@ class Login extends React.Component {
 
   handleClickSubmit = () => {
     const { history, dispatch } = this.props
-    const { inputLogin, inputPassword } = this.state
+    const { inputLogin, inputPassword, inputRememberMe } = this.state
 
-    dispatch(userLogin(inputLogin, inputPassword))
+    dispatch(userLogin(inputLogin, inputPassword, inputRememberMe))
     .then(() => history.push('/'))
   }
 

src/container/Tracim.jsx

@@ -5,13 +5,24 @@ import Header from './Header.jsx'
 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Page from './Page.jsx'
-import Workspace from './Workspace.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
+}
+
 class Tracim extends React.Component {
   render () {
     const { location } = this.props
@@ -21,15 +32,12 @@ class Tracim extends React.Component {
 
         <Route path='/login' component={Login} />
 
-        <div className='sidebarpagecontainer'>
+        <SidebarWrapper locationPath={location.pathname}>
 
-          { location.pathname !== '/login' && // cant find "except" in <Route path />
-            <Sidebar />
-          }
-          <Route exact path='/' component={Workspace} />
+          <PrivateRoute exact path='/' component={WorkspaceContent} />
           <PrivateRoute path='/page' component={Page} />
 
-        </div>
+        </SidebarWrapper>
 
         <Footer />
       </div>

src/container/Workspace.jsx

@@ -1,91 +0,0 @@
-import React from 'react'
-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 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'
-
-class Workspace extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      activeFileType: ''
-    }
-  }
-
-  render () {
-    return (
-      <PageWrapper customeClass='workspace'>
-        <PageTitle
-          parentClass='workspace__header'
-          customClass='justify-content-between'
-          title='Documents & Fichiers'
-        >
-          <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
-        </PageTitle>
-
-        <PageContent parentClass='workspace__content'>
-
-          <div className='workspace__content__fileandfolder folder__content active'>
-            <FileItemHeader />
-
-            <FileItem
-              name='Facture 57841 - Pierre Maurice - 06/06/2017'
-              type='file'
-              status='current'
-              onClickItem={() => this.setState({activeFileType: 'file'})}
-            />
-            <FileItem
-              name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
-              type='file'
-              status='validated'
-              onClickItem={() => this.setState({activeFileType: 'file'})}
-            />
-            <FileItem
-              name='Discussions à propos du nouveau système de facturation'
-              type='chat'
-              status='canceled'
-              onClickItem={() => this.setState({activeFileType: 'chat'})}
-            />
-
-            <Folder>
-              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
-              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
-              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='validated' />
-
-              <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='canceled' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='validated' />
-              </Folder>
-
-              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
-              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='validated' />
-              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
-
-              <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='canceled' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='validated' />
-              </Folder>
-            </Folder>
-          </div>
-
-          <DropdownCreateButton customClass='workspace__content__button mb-5' />
-
-          <PageText visible={this.state.activeFileType === 'file'} />
-          {/*
-          <Thread visible={this.state.activeFileType === 'chat'} />
-          */}
-        </PageContent>
-
-      </PageWrapper>
-    )
-  }
-}
-
-const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(Workspace)

src/container/WorkspaceContent.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+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 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 { getWorkspaceContent } from '../action-creator.async.js'
+
+class WorkspaceContent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      activeFileType: ''
+    }
+  }
+
+  componentDidMount () {
+    this.props.dispatch(getWorkspaceContent(/* this.props.workspace.id */1))
+  }
+
+  render () {
+    const { workspace } = this.props
+
+    return (
+      <PageWrapper customeClass='workspace'>
+        <PageTitle
+          parentClass='workspace__header'
+          customClass='justify-content-between'
+          title={workspace.title}
+        >
+          <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
+        </PageTitle>
+
+        <PageContent parentClass='workspace__content'>
+
+          <div className='workspace__content__fileandfolder folder__content active'>
+            <FileItemHeader />
+
+            { 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}
+              />
+            )}
+          </div>
+
+          <DropdownCreateButton customClass='workspace__content__button mb-5' />
+
+          <PageText visible={this.state.activeFileType === 'file'} />
+          {/*
+          <Thread visible={this.state.activeFileType === 'chat'} />
+          */}
+        </PageContent>
+
+      </PageWrapper>
+    )
+  }
+}
+
+const mapStateToProps = ({ workspace }) => ({ workspace })
+export default connect(mapStateToProps)(WorkspaceContent)

src/helper.js

@@ -4,3 +4,12 @@ export const FETCH_CONFIG = {
     'Content-Type': 'application/json'
   }
 }
+
+export const FILE_TYPE = {
+  PAGE_HTML: 'pageHtml',
+  PAGE_MARKDOWN: 'pageMarkdown',
+  FILE: 'file',
+  THREAD: 'thread',
+  TASK: 'task',
+  ISSUE: 'issue'
+}

src/reducer/root.js

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

src/reducer/user.js

@@ -6,6 +6,8 @@ import {
 export default function user (state = {
   isLoggedIn: false,
   username: '',
+  firstname: '',
+  lastname: '',
   email: ''
 }, action) {
   switch (action.type) {

src/reducer/workspace.js

@@ -0,0 +1,23 @@
+import {
+  WORKSPACE
+} from '../action-creator.sync.js'
+
+const serializeWorkspace = data => ({
+  ...data,
+  ownerId: data.owner_id
+})
+
+export default function user (state = {
+  id: 0,
+  title: '',
+  ownerId: '',
+  content: []
+}, action) {
+  switch (action.type) {
+    case `Update/${WORKSPACE}`:
+      return serializeWorkspace(action.workspace)
+
+    default:
+      return state
+  }
+}