integration of real api (still wip)

jsonserver/server.js

 server.get('/user/:id/workspace', (req, res) => res.jsonp(jsonDb.workspace_list))
 
 server.get('/workspace/:id', (req, res) => res.jsonp(
-  Object.assign(
-    {},
-    jsonDb.workspace_detail,
-    {content: shuffle(jsonDb.workspace_detail.content.map(
-      c => Object.assign({}, c, {workspace_id: req.params.id})
-    ))},
-    {id: req.params.id}
-  )
+  {} // this EP should return meta data of the workspace (id, description, label, slug, sidebar_entries (?)
 ))
 
-server.get('/workspace/:idws/folder/:idf', (req, res) => {
-  switch (req.params.idf) {
-    case '3':
-      return res.jsonp(jsonDb.folder_content_3)
-    case '11':
-      return res.jsonp(jsonDb.folder_content_11)
+server.get('/workspace/:idws/contents/', (req, res) => {
+  console.log(req.query)
+  if (req.query.parent_id !== undefined) { // get content of a folder
+    switch (req.query.parent_id) {
+      case '3':
+        return res.jsonp(jsonDb.folder_content_3)
+      case '11':
+        return res.jsonp(jsonDb.folder_content_11)
+    }
+  } else { // get content of a workspace
+    return res.jsonp(
+      Object.assign(
+        {},
+        jsonDb.workspace_detail,
+        {
+          content: shuffle(jsonDb.workspace_detail.content.map(
+            c => Object.assign({}, c, {workspace_id: req.params.idws})
+          ))
+        },
+        {id: req.params.idws}
+      )
+    )
   }
 })
 
 
 server.get('/timezone', (req, res) => res.jsonp(timezoneDb.timezone))
 
-server.get('/workspace/:idws/content/:idc', (req, res) => {
+server.get('/workspace/:idws/contents/:idc', (req, res) => {
   switch (req.params.idc) {
     case '1': // pageHtml
+    case '5':
       return res.jsonp(jsonDb.content_data_pageHtml)
     case '2':
       return res.jsonp(jsonDb.content_data_thread)
   }
 })
 
-server.get('/workspace/:idws/content/:idc/timeline', (req, res) => {
+server.get('/workspace/:idws/contents/:idc/timeline', (req, res) => {
   switch (req.params.idc) {
     case '1': // pageHtml
+    case '5':
       return res.jsonp(jsonDb.timeline)
     case '2':
       return res.jsonp([])
 server.listen(GLOBAL_PORT, () => {
   console.log('JSON Server is running on port : ' + GLOBAL_PORT)
 })
+
+
+/*
+Object.keys(req) :
+['_readableState', 'readable', 'domain', '_events', '_eventsCount', '_maxListeners', 'socket', 'connection',
+'httpVersionMajor', 'httpVersionMinor', 'httpVersion', 'complete', 'headers', 'rawHeaders', 'trailers', 'rawTrailers',
+'upgrade', 'url', 'method', 'statusCode', 'statusMessage', 'client', '_consuming', '_dumped', 'next', 'baseUrl',
+'originalUrl', '_parsedUrl', 'params', 'query', 'res', '_parsedOriginalUrl', '_startAt', '_startTime', '_remoteAddress',
+'body', 'route' ]
+
+ */

jsonserver/static_db.json

       {
         "id": 1,
         "parent_id": null,
+        "is_archived": false,
+        "is_deleted": false,
         "workspace_id": 1,
-        "title": "Modification Design v2",
-        "type": "PageHtml",
-        "status": "validated"
+        "show_in_ui": true,
+        "label": "Modification Design v2",
+        "slug": "modification-design-v2",
+        "content_type_slug": "htmlpage",
+        "status_slug": "validated"
+      },
+      {
+        "content_type_slug": "htmlpage",
+        "id": 6,
+        "is_archived": false,
+        "is_deleted": false,
+        "label": "Intervention Report 12",
+        "parent_id": 34,
+        "show_in_ui": true,
+        "slug": "intervention-report-12",
+        "status_slug": "closed-deprecated",
+        "sub_content_type_slug": [
+          "string"
+        ],
+        "workspace_id": 19
       },
       {
         "id": 2,

package.json

   "standard": {
     "globals": [
       "fetch",
+      "btoa",
       "history",
       "GLOBAL_renderApp",
       "GLOBAL_renderCreateContentApp",

src/action-creator.async.js

   updateLangList,
   USER_LOGIN,
   USER_LOGOUT,
-  USER_DATA,
   USER_ROLE,
   USER_CONNECTED,
-  updateUserData,
   setUserRole,
   WORKSPACE,
   WORKSPACE_LIST,
   FOLDER,
   setFolderData,
-  APP_LIST
+  APP_LIST,
+  CONTENT_TYPE_LIST
 } from './action-creator.sync.js'
 
 /*
 
 export const getLangList = () => async dispatch => {
   const fetchGetLangList = await fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/lang`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/lang`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: LANG,
     dispatch
   })
 
 export const getTimezone = () => async dispatch => {
   const fetchGetTimezone = await fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/timezone`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/timezone`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: TIMEZONE,
     dispatch
   })
 
 export const postUserLogin = (login, password, rememberMe) => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/login`, // FETCH_CONFIG.apiUrl
+    url: `${FETCH_CONFIG.apiUrl}/sessions/login`, // FETCH_CONFIG.apiUrl
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'POST',
 
 export const postUserLogout = () => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/logout`, // FETCH_CONFIG.apiUrl
+    url: `${FETCH_CONFIG.apiUrl}/sessions/logout`, // FETCH_CONFIG.apiUrl
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'POST'
 
 export const getUserIsConnected = () => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/whoami`, // FETCH_CONFIG.apiUrl
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/sessions/whoami`, // FETCH_CONFIG.apiUrl
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: USER_CONNECTED,
     dispatch
   })
 
 export const getUserRole = user => async dispatch => {
   const fetchGetUserRole = await fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/user/${user.id}/roles`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/roles`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: USER_ROLE,
     dispatch
   })
   if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
-export const updateUserLang = newLang => async dispatch => { // unused
-  const fetchUpdateUserLang = await fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/user`,
-    param: {...FETCH_CONFIG.header, method: 'PATCH', body: JSON.stringify({lang: newLang})},
-    actionName: USER_DATA,
+export const getWorkspaceList = idUser => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${idUser}/workspaces`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
+    actionName: WORKSPACE_LIST,
     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',
-//     param: {...FETCH_CONFIG.header, method: 'DELETE'},
-//     actionName: 'TestNoData',
-//     dispatch
-//   })
-//   console.log('jsonResponseNoData', fetchResponseNoData)
-// }
-
-export const getWorkspaceList = userId => dispatch => {
+export const getWorkspaceContentList = idWorkspace => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/user/${userId}/workspace`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
-    actionName: WORKSPACE_LIST,
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
+    actionName: WORKSPACE,
     dispatch
   })
 }
 
-export const getWorkspaceContent = workspaceId => dispatch => {
+export const getWorkspaceContent = (idWorkspace, idContent) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/workspace/${workspaceId}`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/${idContent}`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: WORKSPACE,
     dispatch
   })
 }
 
-export const getFolderContent = (workspaceId, folderId) => async dispatch => {
+export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
   const fetchGetFolderContent = await fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/workspace/${workspaceId}/folder/${folderId}`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/?parent_id=${idFolder}`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: `${WORKSPACE}/${FOLDER}`,
     dispatch
   })
-  if (fetchGetFolderContent.status === 200) dispatch(setFolderData(folderId, fetchGetFolderContent.json))
+  if (fetchGetFolderContent.status === 200) dispatch(setFolderData(idFolder, fetchGetFolderContent.json))
 }
 
 export const getAppList = () => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/app/config`,
-    param: {...FETCH_CONFIG.header, method: 'GET'},
+    url: `${FETCH_CONFIG.apiUrl}/system/applications`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
     actionName: APP_LIST,
     dispatch
   })
 }
+
+export const getContentTypeList = () => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/system/content_types`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'GET'
+    },
+    actionName: CONTENT_TYPE_LIST,
+    dispatch
+  })
+}

src/action-creator.sync.js

   ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
 
 export const WORKSPACE = 'Workspace'
-export const setWorkspaceData = (workspace, filterStr = '') => ({ type: `Set/${WORKSPACE}`, workspace, filterStr })
+export const setWorkspaceContent = (workspaceContent, filterStr = '') => ({ type: `Set/${WORKSPACE}/Content`, workspaceContent, filterStr })
 export const updateWorkspaceFilter = filterList => ({ type: `Update/${WORKSPACE}/Filter`, filterList })
 
 export const FOLDER = 'Folder'
 export const APP_LIST = 'App/List'
 export const setAppList = appList => ({ type: `Set/${APP_LIST}`, appList })
 
+export const CONTENT_TYPE_LIST = 'ContentType/List'
+export const setContentTypeList = contentTypeList => ({ type: `Set/${CONTENT_TYPE_LIST}`, contentTypeList })
+
 export const LANG = 'Lang'
 export const updateLangList = langList => ({ type: `Update/${LANG}`, langList })
 export const setLangActive = langId => ({ type: `Set/${LANG}/Active`, langId })

src/component/Header/MenuActionListItem/Notification.jsx

 import React from 'react'
-import PropTypes from 'prop-types'
+// import PropTypes from 'prop-types'
 
 const Notification = props => {
   return (

src/component/Sidebar/WorkspaceListItem.jsx

 import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import AnimateHeight from 'react-animate-height'
+import { Link } from 'react-router-dom'
 
 const WorkspaceListItem = props => {
   return (
     <li className='sidebar__navigation__workspace__item'>
       <div className='sidebar__navigation__workspace__item__wrapper' onClick={props.onClickTitle}>
         <div className='sidebar__navigation__workspace__item__number'>
-          {props.name.substring(0, 2).toUpperCase()}
+          {props.label.substring(0, 2).toUpperCase()}
         </div>
 
-        <div className='sidebar__navigation__workspace__item__name' title={props.name}>
-          {props.name}
+        <div className='sidebar__navigation__workspace__item__name' title={props.label}>
+          {props.label}
         </div>
 
         <div className='sidebar__navigation__workspace__item__icon'>
           className='sidebar__navigation__workspace__item__submenu'
           id={`sidebarSubMenu_${props.number}`}
         >
-          <li
-            className='sidebar__navigation__workspace__item__submenu__dropdown'
-            onClick={() => props.onClickAllContent(props.idWs)}
-          >
-            <div className='dropdown__icon'>
-              <i className='fa fa-th' />
-            </div>
-
-            <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
-              <div className='dropdown__title'>
-                <div className='dropdown__title__text'>
-                  Tous les contenus
-                </div>
-              </div>
-            </div>
-
-            {/*
-            <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-              <div className='dropdown__subdropdown__item dropdown-item'>
-                <div className='dropdown__subdropdown__item__iconfile alignname'>
-                  <i className='fa fa-file-text-o' />
-                </div>
-
-                <div className='dropdown__subdropdown__item__textfile alignname'>
-                  Documents Archivés
-                </div>
-              </div>
-              <div className='dropdown__subdropdown__item dropdown-item'>
-                <div className='dropdown__subdropdown__item__iconfile alignname'>
-                  <i className='fa fa-file-text-o' />
-                </div>
-
-                <div className='dropdown__subdropdown__item__textfile alignname'>
-                  Documents Supprimés
-                </div>
-              </div>
-            </div>
-            */}
-
-          </li>
-
-          <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-signal dashboard-color' />
-            </div>
-
-            <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
-              <div className='dropdown__title'>
-                <div className='dropdown__title__text'>
-                  Tableau de bord
-                </div>
-              </div>
-            </div>
-          </li>
-
-          { Object.keys(props.app).map(a =>
+          { props.allowedApp.map(aa =>
             <li
-              className={classnames('sidebar__navigation__workspace__item__submenu__dropdown', {'activeFilter': props.activeFilterList.includes(a)})}
-              onClick={() => props.onClickContentFilter(props.idWs, a)}
-              key={a}
+              // onClick={() => props.onClickContentFilter(props.idWs, aa.slug)}
+              key={aa.slug}
             >
-              <div className='dropdown__icon'>
-                <i className={classnames(props.app[a].icon)} style={{backgroudColor: props.app[a].color}} />
-              </div>
+              <Link to={aa.route}>
+                <div className={classnames('sidebar__navigation__workspace__item__submenu__dropdown', {'activeFilter': props.activeFilterList.includes(aa.slug)})}>
+                  <div className='dropdown__icon'>
+                    <i className={classnames(`fa fa-${aa.faIcon}`)} style={{backgroudColor: aa.hexcolor}} />
+                  </div>
 
-              <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
+                  <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
 
-                <div className='dropdown__title' id='navbarDropdown'>
-                  <div className='dropdown__title__text'>
-                    {props.app[a].label[props.lang.id]}
+                    <div className='dropdown__title' id='navbarDropdown'>
+                      <div className='dropdown__title__text'>
+                        {aa.label/* [props.lang.id] */}
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </Link>
             </li>
           )}
-
-          <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
-
-            <div className='dropdown__icon'>
-              <i className='fa fa-calendar calendar-color' />
-            </div>
-
-            <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
-              <div className='dropdown__title'>
-                <div className='dropdown__title__text'>
-                  Calendrier
-                </div>
-              </div>
-            </div>
-          </li>
         </ul>
       </AnimateHeight>
     </li>
 export default translate()(WorkspaceListItem)
 
 WorkspaceListItem.propTypes = {
-  number: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  app: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  allowedApp: PropTypes.array,
   onClickTitle: PropTypes.func,
   onClickAllContent: PropTypes.func,
   isOpenInSidebar: PropTypes.bool

src/component/Workspace/ContentItem.jsx

 import classnames from 'classnames'
 import BtnExtandedAction from './BtnExtandedAction.jsx'
 
-const FileItem = props => {
-  const iconStatus = (() => {
-    switch (props.status) {
-      case 'current':
-        return 'fa fa-fw fa-cogs'
-      case 'validated':
-        return 'fa fa-fw fa-check'
-      case 'canceled':
-        return 'fa fa-fw fa-times'
-      case 'outdated':
-        return 'fa fa-fw fa-ban'
-    }
-  })()
-
-  const textStatus = (() => {
-    switch (props.status) {
-      case 'current':
-        return 'En cours'
-      case 'validated':
-        return 'Validé'
-      case 'canceled':
-        return 'Annulé'
-      case 'outdated':
-        return 'Obsolète'
-    }
-  })()
-
-  const colorStatus = (() => {
-    switch (props.status) {
-      case 'current':
-        return ' currentColor'
-      case 'validated':
-        return ' validateColor'
-      case 'canceled':
-        return ' cancelColor'
-      case 'outdated':
-        return ' outdateColor'
-    }
-  })()
-
+const ContentItem = props => {
+  const status = props.contentType.availableStatuses.find(s => s.slug === props.statusSlug)
   return (
     <div className={classnames('content', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
       <div className='content__type'>
-        <i className={props.icon} />
+        <i className={`fa fa-${props.faIcon}`} />
       </div>
 
       <div className='content__name'>
         <div className='content__name__text'>
-          { props.name }
+          { props.label }
         </div>
       </div>
 
         <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
       </div>
 
-      <div className={classnames('content__status d-flex align-items-center justify-content-start') + colorStatus}>
+      <div className={classnames('content__status d-flex align-items-center justify-content-start')} style={{color: status.hexcolor}}>
         <div className='content__status__icon d-block '>
-          <i className={iconStatus} />
+          <i className={`fa fa-${status.fa_icon}`} />
         </div>
         <div className='content__status__text d-none d-xl-block'>
-          {textStatus}
+          {status.label}
         </div>
       </div>
     </div>
   )
 }
 
-export default FileItem
+export default ContentItem
 
-FileItem.propTypes = {
+ContentItem.propTypes = {
   type: PropTypes.string.isRequired,
-  status: PropTypes.string.isRequired,
+  statusSlug: PropTypes.string.isRequired,
   customClass: PropTypes.string,
-  name: PropTypes.string,
-  onClickItem: PropTypes.func
+  label: PropTypes.string,
+  contentType: PropTypes.object,
+  onClickItem: PropTypes.func,
+  faIcon: PropTypes.string
 }
 
-FileItem.defaultProps = {
-  name: '',
+ContentItem.defaultProps = {
+  label: '',
   customClass: '',
   onClickItem: () => {}
 }

src/component/Workspace/Folder.jsx

   }
 
   handleClickCreateContent = (e, folder, type) => {
-    e.preventDefault()
     e.stopPropagation() // because we have a link inside a link (togler and newFile)
     this.props.onClickCreateContent(folder, type)
   }
           </div>
 
           <div className='folder__header__name'>
-            { folderData.title }
+            { folderData.label }
           </div>
 
           <div className='folder__header__button'>
 
             <div className='folder__header__button__addbtn'>
-              <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+              <button
+                className='addbtn__text btn btn-outline-primary dropdown-toggle'
+                type='button'
+                id='dropdownMenuButton'
+                data-toggle='dropdown'
+                aria-haspopup='true'
+                aria-expanded='false'
+                onClick={e => e.stopPropagation()}
+              >
                 {t('Folder.create')} ...
               </button>
 
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'PageHtml')}>
                   <div className='subdropdown__link__apphtml d-flex align-items-center'>
                     <div className='subdropdown__link__apphtml__icon mr-3'>
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'File')}>
                   <div className='subdropdown__link__appfile d-flex align-items-center'>
                     <div className='subdropdown__link__appfile__icon mr-3'>
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'PageMarkdown')}>
                   <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
                     <div className='subdropdown__link__appmarkdown__icon mr-3'>
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Thread')}>
                   <div className='subdropdown__link__appthread d-flex align-items-center'>
                     <div className='subdropdown__link__appthread__icon mr-3'>
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Task')}>
                   <div className='subdropdown__link__apptask d-flex align-items-center'>
                     <div className='subdropdown__link__apptask__icon mr-3'>
                     </div>
                   </div>
                 </div>
+
                 <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'Issue')}>
                   <div className='subdropdown__link__appissue d-flex align-items-center'>
                     <div className='subdropdown__link__appissue__icon mr-3'>
         </div>
 
         <div className='folder__content'>
-          { folderData.content.map((c, i) => c.type === 'folder'
-            ? <Folder
-              app={app}
-              folderData={c}
-              onClickItem={onClickItem}
-              onClickExtendedAction={onClickExtendedAction}
-              onClickFolder={onClickFolder}
-              isLast={isLast}
-              t={t}
-              key={c.id}
-            />
-            : <FileItem
-              icon={(app[c.type] || {icon: ''}).icon}
-              name={c.title}
-              type={c.type}
-              status={c.status}
-              onClickItem={() => onClickItem(c)}
-              onClickExtendedAction={{
-                // we have to use the event here because it is the only place where we also have the content (c)
-                edit: e => onClickExtendedAction.edit(e, c),
-                move: e => onClickExtendedAction.move(e, c),
-                download: e => onClickExtendedAction.download(e, c),
-                archive: e => onClickExtendedAction.archive(e, c),
-                delete: e => onClickExtendedAction.delete(e, c)
-              }}
-              isLast={isLast && i === folderData.content.length - 1}
-              key={c.id}
-            />
-          )}
+          {
+          //   folderData.map((c, i) => c.type === 'folder'
+          //   ? <Folder
+          //     app={app}
+          //     folderData={c}
+          //     onClickItem={onClickItem}
+          //     onClickExtendedAction={onClickExtendedAction}
+          //     onClickFolder={onClickFolder}
+          //     isLast={isLast}
+          //     t={t}
+          //     key={c.id}
+          //   />
+          //   : <FileItem
+          //     icon={(app[c.type] || {icon: ''}).icon}
+          //     name={c.title}
+          //     type={c.type}
+          //     status={c.status}
+          //     onClickItem={() => onClickItem(c)}
+          //     onClickExtendedAction={{
+          //       // we have to use the event here because it is the only place where we also have the content (c)
+          //       edit: e => onClickExtendedAction.edit(e, c),
+          //       move: e => onClickExtendedAction.move(e, c),
+          //       download: e => onClickExtendedAction.download(e, c),
+          //       archive: e => onClickExtendedAction.archive(e, c),
+          //       delete: e => onClickExtendedAction.delete(e, c)
+          //     }}
+          //     isLast={isLast && i === folderData.content.length - 1}
+          //     key={c.id}
+          //   />
+          // )
+          }
         </div>
       </div>
     )
 export default translate()(Folder)
 
 Folder.propTypes = {
-  folderData: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    content: PropTypes.array
-  }),
-  app: PropTypes.object,
+  folderData: PropTypes.object,
+  app: PropTypes.array,
   onClickItem: PropTypes.func.isRequired,
   onClickFolder: PropTypes.func.isRequired,
   isLast: PropTypes.bool.isRequired

src/container/Sidebar.jsx

 } from '../action-creator.sync.js'
 import { PAGE } from '../helper.js'
 
+const qs = require('query-string')
+
 class Sidebar extends React.Component {
   constructor (props) {
     super(props)
   }
 
   handleClickContentFilter = (idWs, filter) => {
-    const { workspace, history, dispatch } = this.props
+    const { workspace, history } = this.props
 
     const newFilter = workspace.filter.includes(filter) ? [] : [filter] // use an array to allow multiple filters (NYI)
 
-    dispatch(updateWorkspaceFilter(newFilter))
-
     history.push(`${PAGE.WORKSPACE.CONTENT_LIST(idWs)}?type=${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
   }
 
 
   render () {
     const { sidebarClose, workspaceIdInUrl } = this.state
-    const { activeLang, workspace, workspaceList, app, t } = this.props
+    const { activeLang, workspaceList, t } = this.props
 
     return (
       <div className={classnames('sidebar', {'sidebarclose': sidebarClose})}>
             <ul className='sidebar__navigation__workspace'>
               { workspaceList.map((ws, i) =>
                 <WorkspaceListItem
-                  number={++i}
                   idWs={ws.id}
-                  name={ws.title}
-                  app={app}
+                  label={ws.label}
+                  allowedApp={ws.sidebarEntry}
                   lang={activeLang}
-                  activeFilterList={ws.id === workspaceIdInUrl ? workspace.filter : []}
+                  activeFilterList={ws.id === workspaceIdInUrl ? [qs.parse(this.props.location.search).type] : []}
                   isOpenInSidebar={ws.isOpenInSidebar}
                   onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
                   onClickAllContent={this.handleClickAllContent}

src/container/WorkspaceContent.jsx

 import React from 'react'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
 import appFactory from '../appFactory.js'
 import { PAGE } from '../helper.js'
 import Sidebar from './Sidebar.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
 import {
   getAppList,
+  getContentTypeList,
+  getWorkspaceContentList,
   getWorkspaceContent,
   getFolderContent,
   getWorkspaceList
 } from '../action-creator.async.js'
 import {
-  newFlashMessage, setAppList,
-  setWorkspaceData,
+  newFlashMessage,
+  setAppList,
+  setContentTypeList,
+  setWorkspaceContent,
   setWorkspaceListIsOpenInSidebar,
   updateWorkspaceListData
 } from '../action-creator.sync.js'
 
   async componentDidMount () {
     const { workspaceIdInUrl } = this.state
-    const { user, workspaceList, app, match, location, dispatch } = this.props
+    const { user, workspaceList, app, contentType, match, location, dispatch } = this.props
 
-    if (Object.keys(app).length === 0) {
+    console.log('componentDidMount')
+
+    if (app.length === 0) {
       const fetchGetAppList = await dispatch(getAppList())
       if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
     }
 
+    if (contentType.length === 0) {
+      const fetchGetContentTypeList = await dispatch(getContentTypeList())
+      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
+    }
+
+
     let wsToLoad = null
     if (match.params.idws !== undefined) wsToLoad = match.params.idws
 
 
     if (wsToLoad === null) return // ws already loaded
 
-    const wsContent = await dispatch(getWorkspaceContent(wsToLoad))
+    const wsContent = await dispatch(getWorkspaceContentList(wsToLoad))
 
-    if (wsContent.status === 200) dispatch(setWorkspaceData(wsContent.json, qs.parse(location.search).type))
+    if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
   componentDidUpdate (prevProps, prevState) {
-    const { app, workspace, user, renderApp, match, dispatch } = this.props
+    const { contentType, workspace, user, renderApp, match } = this.props
+
+    console.log('componentDidUpdate')
 
     if (this.state.workspaceIdInUrl === null) return
 
-    const newWorkspaceId = parseInt(match.params.idws)
-    if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
+    const idWorkspace = parseInt(match.params.idws)
+    if (prevState.workspaceIdInUrl !== idWorkspace) this.setState({workspaceIdInUrl: idWorkspace})
+
+    // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
 
-    if (user.id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, newWorkspaceId))
+    if (match.params.idcts && workspace.id !== -1) { // if a content id is in url, open it
+      const idContentToOpen = parseInt(match.params.idcts)
+      const contentToOpen = workspace.find(wsc => wsc.id === idContentToOpen) // || await dispatch(getWorkspaceContent(idWorkspace, idContentToOpen))
 
-    if (match.params.idcts) { // if a content id is in url, open it
-      const contentToOpen = workspace.content.find(wsc => wsc.id === parseInt(match.params.idcts))
-      if (contentToOpen === undefined) return
+      // @FIXME : for alpha, we do not handle subfolder. commented code bellow should load a component that is not in the workspace root
+      // if (contentToOpen === undefined) { // content is not is ws root
+      //   const fetchContent = await dispatch(getWorkspaceContent(idWorkspace, idContentToOpen))
+      //   console.log(fetchContent)
+      // }
 
       renderApp(
-        app[contentToOpen.type],
+        contentType.find(ct => ct.type === contentToOpen.type),
         user,
         {...contentToOpen, workspace: workspace}
       )
     }
   }
 
-  handleClickContentItem = content => this.props.history.push(`${PAGE.WORKSPACE.CONTENT(content.workspace_id, content.id)}${this.props.location.search}`)
+  handleClickContentItem = content => {
+    console.log('content clicked', content)
+    this.props.history.push(`${PAGE.WORKSPACE.CONTENT(content.workspace_id, content.id)}${this.props.location.search}`)
+  }
 
   handleClickEditContentItem = (e, content) => {
     e.stopPropagation()
   }
 
   render () {
-    const { workspace, app } = this.props
+    const { workspace, app, contentType } = this.props
+
+    const filterWorkspaceContent = (contentList, filter) => {
+      console.log(contentList, filter)
+      return filter.length === 0
+        ? contentList
+        : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
+          // @FIXME we need to filter subfolder too, but right now, we dont handle subfolder
+          // .map(c => c.type !== 'folder' ? c : {...c, content: filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
+    }
+    // .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder => 2018/05/21 - since we load only one lvl of content, don't remove empty
 
-    const filterWorkspaceContent = (contentList, filter) => filter.length === 0
-      ? contentList
-      : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
-        .map(c => c.type !== 'folder' ? c : {...c, content: filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
-    // .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder => 2018/05/21 - since we load only one lvl of content, don't remove empty folders
+    const urlFilter = qs.parse(this.props.location.search).type
 
-    const filteredWorkspaceContent = filterWorkspaceContent(workspace.content, workspace.filter)
+    const filteredWorkspaceContent = workspace.length > 0
+      ? filterWorkspaceContent(workspace, urlFilter ? [urlFilter] : [])
+      : []
+    console.log('workspaceContent => filteredWorkspaceContent', filteredWorkspaceContent)
 
     return (
       <div className='sidebarpagecontainer'>
           <PageTitle
             parentClass='workspace__header'
             customClass='justify-content-between'
-            title={workspace.title}
+            title={workspace.label ? workspace.label : ''}
           >
             <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
           </PageTitle>
                 )
                 : (
                   <ContentItem
-                    name={c.title}
+                    label={c.label}
                     type={c.type}
-                    icon={(app[c.type] || {icon: ''}).icon}
-                    status={c.status}
+                    faIcon={contentType.length ? contentType.find(a => a.slug === c.type).faIcon : ''}
+                    statusSlug={c.statusSlug}
+                    contentType={contentType.find(ct => ct.slug === c.type)}
                     onClickItem={() => this.handleClickContentItem(c)}
                     onClickExtendedAction={{
                       edit: e => this.handleClickEditContentItem(e, c),
   }
 }
 
-const mapStateToProps = ({ user, workspace, workspaceList, app }) => ({ user, workspace, workspaceList, app })
-export default connect(mapStateToProps)(appFactory(WorkspaceContent))
+const mapStateToProps = ({ user, workspace, workspaceList, app, contentType }) => ({ user, workspace, workspaceList, app, contentType })
+export default withRouter(connect(mapStateToProps)(appFactory(WorkspaceContent)))

src/css/Generic.styl

+a
+  color fontColor
+  &:hover, &:link, &:visited
+    color fontColor
+    text-decoration none
+
 .tracim
   height 100%
   &__content
     height 100%
 
-
 .btn-primary
   background-color thirdColor
   border-color secondColor

src/helper.js

 export const FETCH_CONFIG = {
   headers: {
     'Accept': 'application/json',
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
+    'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
   },
   apiUrl: 'http://localhost:6543/api/v2',
   mockApiUrl: 'http://localhost:3001'
 export const PAGE = {
   HOME: '/',
   WORKSPACE: {
-    DASHBOARD: (idws = ':idws') => `/workspace/${idws}`,
-    NEW: '/workspace/new',
-    CALENDAR: (idws = ':idws') => `/workspace/${idws}/apps/calendar`,
-    CONTENT_LIST: (idws = ':idws') => `/workspace/${idws}/apps/contents`,
-    CONTENT: (idws = ':idws', idcts = ':idcts') => `/workspace/${idws}/apps/contents/${idcts}`,
-    CONTENT_NEW: (idws = ':idws', ctstype = ':ctstype') => `/workspace/${idws}/apps/contents/${ctstype}/new`,
-    CONTENT_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspace/${idws}/apps/contents/${idcts}/edit`,
-    CONTENT_TITLE_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspace/${idws}/apps/contents/${idcts}/title/edit`,
-    ADMIN: (idws = ':idws') => `/workspace/${idws}/admin`
+    DASHBOARD: (idws = ':idws') => `/workspaces/${idws}`,
+    NEW: '/workspaces/new',
+    CALENDAR: (idws = ':idws') => `/workspaces/${idws}/calendar`,
+    CONTENT_LIST: (idws = ':idws') => `/workspaces/${idws}/contents`,
+    CONTENT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}`,
+    CONTENT_NEW: (idws = ':idws', ctstype = ':ctstype') => `/workspaces/${idws}/contents/${ctstype}/new`,
+    CONTENT_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/edit`,
+    CONTENT_TITLE_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/title/edit`,
+    ADMIN: (idws = ':idws') => `/workspaces/${idws}/admin`
   },
   LOGIN: '/login',
   ACCOUNT: '/account'

src/reducer/app.js

 import { APP_LIST } from '../action-creator.sync.js'
 
-export default function app (state = {}, action) {
+export default function app (state = [], action) {
   switch (action.type) {
     case `Set/${APP_LIST}`:
-      const rez = {}
-      action.appList.forEach(app => (rez[app.name] = app))
-      return rez
+      return action.appList.map(a => ({
+        label: a.label,
+        slug: a.slug,
+        isActive: a.is_active,
+        faIcon: a.fa_icon,
+        hexcolor: a.hexcolor,
+        config: a.config
+      }))
 
     default:
       return state

src/reducer/contentType.js

+import { CONTENT_TYPE_LIST } from '../action-creator.sync.js'
+
+export function contentType (state = [], action) {
+  switch (action.type) {
+    case `Set/${CONTENT_TYPE_LIST}`:
+      return action.contentTypeList.map(ct => ({
+        label: ct.label,
+        slug: ct.slug,
+        faIcon: ct.fa_icon,
+        hexcolor: ct.hexcolor,
+        creationLabel: ct.creation_label,
+        availableStatuses: ct.available_statuses.map(as => ({
+          label: as.label,
+          slug: as.slug,
+          fa_icon: as.fa_icon,
+          hexcolor: as.hexcolor,
+          global_status: as.global_status
+        }))
+      }))
+
+    default:
+      return state
+  }
+}
+
+export default contentType

src/reducer/root.js

 import workspace from './workspace.js'
 import workspaceList from './workspaceList.js'
 import app from './app.js'
+import contentType from './contentType.js'
 import timezone from './timezone.js'
 
-const rootReducer = combineReducers({ lang, flashMessage, user, workspace, workspaceList, app, timezone })
+const rootReducer = combineReducers({ lang, flashMessage, user, workspace, workspaceList, app, contentType, timezone })
 
 export default rootReducer

src/reducer/workspace.js

   FOLDER
 } from '../action-creator.sync.js'
 
-const serializeWorkspace = data => ({
-  id: data.id,
-  title: data.title,
-  content: data.content,
-  ownerId: data.owner_id
-})
-
-export default function user (state = {
-  id: -1,
-  title: '',
-  ownerId: '',
-  content: [],
-  filter: []
-}, action) {
+export default function workspace (state = [], action) {
   switch (action.type) {
-    case `Set/${WORKSPACE}`:
-      return {
-        ...serializeWorkspace(action.workspace),
-        filter: action.filterStr ? action.filterStr.split(';') : []
-      }
+    case `Set/${WORKSPACE}/Content`:
+      return action.workspaceContent.map(wsc => ({
+        id: wsc.id,
+        label: wsc.label,
+        slug: wsc.slug,
+        type: wsc.content_type_slug,
+        workspaceId: wsc.workspace_id,
+        isArchived: wsc.is_archived,
+        parentId: wsc.parent_id,
+        isDeleted: wsc.is_deleted,
+        // show_in_ui: wsc.show_in_ui, ???
+        statusSlug: wsc.status_slug,
+        subContentTypeSlug: wsc.sub_content_type_slug,
+      }))
 
     case `Update/${WORKSPACE}/Filter`:
       return {...state, filter: action.filterList}

src/reducer/workspaceList.js

   USER_ROLE
 } from '../action-creator.sync.js'
 
-const serializeWorkspaceItem = data => ({
-  id: data.id,
-  title: data.title,
-  role: data.role,
-  notif: data.notif
-})
-
 export function workspaceList (state = [], action) {
   switch (action.type) {
     case `Update/${WORKSPACE_LIST}`:
       return action.workspaceList.map(ws => ({
-        ...serializeWorkspaceItem(ws),
+        id: ws.id,
+        label: ws.label,
+        slug: ws.slug,
+        description: ws.description,
+        sidebarEntry: ws.sidebar_entries.map(sbe => ({
+          slug: sbe.slug,
+          route: sbe.route,
+          faIcon: sbe.fa_icon,
+          hexcolor: sbe.hexcolor,
+          label: sbe.label
+        })),
         isOpenInSidebar: false
       }))
 
         : ws
       )
 
-    case `Set/${USER_ROLE}`:
+    case `Set/${USER_ROLE}`: // not used yet
       return state.map(ws => {
         const foundWorkspace = action.userRole.find(r => ws.id === r.workspace.id) || {role: '', subscribed_to_notif: ''}
         return {
         }
       })
 
-    case `Update/${USER_ROLE}/SubscriptionNotif`:
+    case `Update/${USER_ROLE}/SubscriptionNotif`: // not used yet
       return state.map(ws => ws.id === action.workspaceId
         ? {...ws, notif: action.subscriptionNotif}
         : ws