integration of html-document

dist/index.html

@@ -26,7 +26,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
     -->
 
-    <script src='/app/pageHtml.app.js'></script>
+    <script src='/app/html-documents.app.js'></script>
     <script src='/app/thread.app.js'></script>
     <script src='/app/file.app.js'></script>
 
@@ -42,11 +42,11 @@
 
       getSelectedApp = name => {
         switch (name) {
-          case 'PageHtml':
-            return appPageHtml
-          case 'Thread':
+          case 'html-documents':
+            return appHtmlDocument
+          case 'thread':
             return appThread
-          case 'File':
+          case 'file':
             return appFile
         }
       }
@@ -54,10 +54,10 @@
       GLOBAL_renderApp = app => {
         console.log('GLOBAL_renderApp', app)
 
-        const selectedApp = getSelectedApp(app.config.name)
+        const selectedApp = getSelectedApp(app.config.slug)
 
         if (selectedApp.isRendered) {
-          GLOBAL_dispatchEvent({type: `${app.config.name}_showApp`, data: app})
+          GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app})
         } else {
           selectedApp.renderApp(app)
           selectedApp.isRendered = true
@@ -69,7 +69,7 @@
       GLOBAL_renderCreateContentApp = app => {
         console.log('GLOBAL_renderCreateContentApp', app)
 
-        getSelectedApp(app.config.name).renderPopupCreation(app)
+        getSelectedApp(app.config.slug).renderPopupCreation(app)
       }
 
       GLOBAL_dispatchEvent = ({ type, data }) => {

jsonserver/server.js

@@ -99,6 +99,10 @@ server.get('/workspace/:idws/contents/:idc', (req, res) => {
   }
 })
 
+server.put('/workspaces/:idws/html-documents/:idcts', (req, res) => {
+  return res.jsonp(jsonDb.putHtmlDoc)
+})
+
 server.get('/workspace/:idws/contents/:idc/timeline', (req, res) => {
   switch (req.params.idc) {
     case '1': // pageHtml
@@ -111,6 +115,11 @@ server.get('/workspace/:idws/contents/:idc/timeline', (req, res) => {
   }
 })
 
+server.post('/workspaces/:idws/contents', (req, res) => {
+  console.log(req.body)
+  return res.jsonp('gg')
+})
+
 server.use(router)
 server.listen(GLOBAL_PORT, () => {
   console.log('JSON Server is running on port : ' + GLOBAL_PORT)

jsonserver/static_db.json

@@ -419,5 +419,34 @@
     },
     "role": "content_manager",
     "subscribed_to_notif": true
-  }]
+  }],
+  "putHtmlDoc": {
+    "author": {
+      "avatar_url": "/api/v2/assets/avatars/suri-cate.jpg",
+      "public_name": "Suri Cate",
+      "user_id": 3
+    },
+    "content_id": 6,
+    "content_type": "html-content",
+    "created": "2018-06-28T08:46:58.690Z",
+    "current_revision_id": 12,
+    "is_archived": false,
+    "is_deleted": false,
+    "label": "Intervention Report 12",
+    "last_modifier": {
+      "avatar_url": "/api/v2/assets/avatars/suri-cate.jpg",
+      "public_name": "Suri Cate",
+      "user_id": 3
+    },
+    "modified": "2018-06-28T08:46:58.690Z",
+    "parent_id": 34,
+    "raw_content": "string",
+    "show_in_ui": true,
+    "slug": "intervention-report-12",
+    "status": "closed-deprecated",
+    "sub_content_types": [
+      "string"
+    ],
+    "workspace_id": 19
+  }
 }

src/action-creator.async.js

@@ -155,9 +155,9 @@ export const getWorkspaceList = idUser => dispatch => {
   })
 }
 
-export const getWorkspaceContentList = idWorkspace => dispatch => {
+export const getWorkspaceContentList = (idWorkspace, idParent) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents`,
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents?parent_id=${idParent}`,
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'GET'

src/appFactory.js

@@ -7,21 +7,25 @@ export function appFactory (WrappedComponent) {
       loggedUser: user.logged ? user : {},
       config: {
         ...appConfig,
+        domContainer: 'appContainer',
         apiUrl: FETCH_CONFIG.apiUrl,
-        mockApiUrl: FETCH_CONFIG.mockApiUrl
+        mockApiUrl: FETCH_CONFIG.mockApiUrl,
+        apiHeader: FETCH_CONFIG.headers
       },
       content
     })
 
-    renderCreateContentApp = (appConfig, user, folder) => GLOBAL_renderCreateContentApp({
+    renderCreateContentApp = (appConfig, user, idWorkspace, idfolder) => GLOBAL_renderCreateContentApp({
       loggedUser: user.logged ? user : {},
       config: {
         ...appConfig,
         domContainer: 'popupCreateContentContainer',
         apiUrl: FETCH_CONFIG.apiUrl,
-        mockApiUrl: FETCH_CONFIG.mockApiUrl
+        mockApiUrl: FETCH_CONFIG.mockApiUrl,
+        apiHeader: FETCH_CONFIG.headers
       },
-      folder
+      idWorkspace,
+      idfolder
     })
 
     emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)

src/component/Workspace/Folder.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import FileItem from './ContentItem.jsx'
+// import FileItem from './ContentItem.jsx'
 // import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
+import SubDropdownCreateButton from '../common/Input/SubDropdownCreateButton.jsx'
 import BtnExtandedAction from './BtnExtandedAction.jsx'
 
 class Folder extends React.Component {
@@ -26,11 +27,12 @@ class Folder extends React.Component {
 
   render () {
     const {
-      app,
+      availableApp,
       folderData,
-      onClickItem,
+      // onClickItem,
       onClickExtendedAction,
-      onClickFolder,
+      onClickCreateContent,
+      // onClickFolder,
       isLast,
       t
     } = this.props
@@ -66,85 +68,12 @@ class Folder extends React.Component {
                 {t('Folder.create')} ...
               </button>
 
-              {/* @TODO generate the subdropdown with available app from redux */}
-
               <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                <div className='subdropdown__link dropdown-item' onClick={e => this.handleClickCreateContent(e, folderData, 'folder')}>
-                  <div className='subdropdown__link__folder d-flex align-items-center'>
-                    <div className='subdropdown__link__folder__icon mr-3'>
-                      <i className='fa fa-fw fa-folder-o' />
-                    </div>
-                    <div className='subdropdown__link__folder__text'>
-                      Créer un dossier
-                    </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'>
-                      <i className='fa fa-fw fa-file-text-o' />
-                    </div>
-                    <div className='subdropdown__link__apphtml__text'>
-                      Rédiger un document
-                    </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'>
-                      <i className='fa fa-fw fa-file-image-o' />
-                    </div>
-                    <div className='subdropdown__link__appfile__text'>
-                      Importer un fichier
-                    </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'>
-                      <i className='fa fa-fw fa-file-code-o' />
-                    </div>
-                    <div className='subdropdown__link__appmarkdown__text'>
-                      Rédiger un document markdown
-                    </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'>
-                      <i className='fa fa-fw fa-comments-o' />
-                    </div>
-                    <div className='subdropdown__link__appthread__text'>
-                      Lancer une discussion
-                    </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'>
-                      <i className='fa fa-fw fa-list-ul' />
-                    </div>
-                    <div className='subdropdown__link__apptask__text'>
-                      Créer une tâche
-                    </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'>
-                      <i className='fa fa-fw fa-ticket' />
-                    </div>
-                    <div className='subdropdown__link__appissue__text'>
-                      Ouvrir un ticket
-                    </div>
-                  </div>
-                </div>
+                <SubDropdownCreateButton
+                  idFolder={null}
+                  availableApp={availableApp}
+                  onClickCreateContent={onClickCreateContent}
+                />
               </div>
 
               <div className='d-none d-md-flex'>

src/component/common/Input/DropdownCreateButton.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import SubDropdownCreateButton from './SubDropdownCreateButton.jsx'
 
 const DropdownCreateButton = props => {
   return (
@@ -22,76 +23,11 @@ const DropdownCreateButton = props => {
         className={classnames(`${props.parentClass}__setting`, 'dropdownCreateBtn__setting dropdown-menu')}
         aria-labelledby='dropdownCreateBtn'
       >
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__folder d-flex align-items-center'>
-            <div className='setting__link__folder__icon mr-3'>
-              <i className='fa fa-fw fa-folder-o' />
-            </div>
-            <div className='setting__link__folder__text'>
-              Créer un dossier
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__apphtml d-flex align-items-center'>
-            <div className='setting__link__apphtml__icon mr-3'>
-              <i className='fa fa-fw fa-file-text-o' />
-            </div>
-            <div className='setting__link__apphtml__text'>
-              Rédiger un document
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__appfile d-flex align-items-center'>
-            <div className='setting__link__appfile__icon mr-3'>
-              <i className='fa fa-fw fa-file-image-o' />
-            </div>
-            <div className='setting__link__appfile__text'>
-              Importer un fichier
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__appmarkdown d-flex align-items-center'>
-            <div className='setting__link__appmarkdown__icon mr-3'>
-              <i className='fa fa-fw fa-file-code-o' />
-            </div>
-            <div className='setting__link__appmarkdown__text'>
-              Rédiger un document markdown
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__appthread d-flex align-items-center'>
-            <div className='setting__link__appthread__icon mr-3'>
-              <i className='fa fa-fw fa-comments-o' />
-            </div>
-            <div className='setting__link__appthread__text'>
-              Lancer une discussion
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__apptask d-flex align-items-center'>
-            <div className='setting__link__apptask__icon mr-3'>
-              <i className='fa fa-fw fa-list-ul' />
-            </div>
-            <div className='setting__link__apptask__text'>
-              Créer une tâche
-            </div>
-          </div>
-        </div>
-        <div className='setting__link dropdown-item'>
-          <div className='setting__link__appissue d-flex align-items-center'>
-            <div className='setting__link__appissue__icon mr-3'>
-              <i className='fa fa-fw fa-ticket' />
-            </div>
-            <div className='setting__link__appissue__text'>
-              Ouvrir un ticket
-            </div>
-          </div>
-        </div>
+        <SubDropdownCreateButton
+          idFolder={null}
+          availableApp={props.availableApp}
+          onClickCreateContent={props.onClickCreateContent}
+        />
       </div>
     </div>
   )
@@ -100,8 +36,11 @@ const DropdownCreateButton = props => {
 export default DropdownCreateButton
 
 DropdownCreateButton.propTypes = {
+  availableApp: PropTypes.array.isRequired,
+  onClickCreateContent: PropTypes.func.isRequired,
   parentClass: PropTypes.string,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  idFolder: PropTypes.number
 }
 
 DropdownCreateButton.defaultProps = {

src/component/common/Input/SubDropdownCreateButton.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+require('./SubDropdownCreateButton.styl')
+
+const SubDropdownCreateButton = props => {
+  return (
+    <div>
+      {props.availableApp.map(app =>
+        <div className='subdropdown__link dropdown-item' onClick={e => props.onClickCreateContent(e, props.idFolder, app.slug)} key={app.slug}>
+          <div className={`subdropdown__link__${app.slug} d-flex align-items-center`}>
+            <div className={`subdropdown__link__${app.slug}__icon mr-3`}>
+              <i className={`fa fa-fw fa-${app.faIcon}`} />
+            </div>
+            <div className='subdropdown__link__folder__text'>
+              {app.creationLabel}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+SubDropdownCreateButton.propTypes = {
+  availableApp: PropTypes.array.isRequired,
+  onClickCreateContent: PropTypes.func.isRequired,
+  idFolder: PropTypes.number
+}
+
+export default SubDropdownCreateButton

src/component/common/Input/SubDropdownCreateButton.styl

@@ -0,0 +1,2 @@
+.subdropdown__link
+  padding 10px

src/container/OpenContentApp.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
+import appFactory from '../appFactory.js'
+
+export class OpenContentApp extends React.Component {
+  openContentApp = () => {
+    const { idWorkspace, appOpened, user, workspaceContent, contentType, renderApp, match } = this.props
+
+    if (isNaN(idWorkspace)) return
+
+    if (['type', 'idcts'].every(p => p in match.params) && match.params.type !== 'contents' && workspaceContent.id !== -1 && workspaceContent.length) {
+      // @TODO test validity of params, idcts isNaN and type includes list of available content type
+      const contentToOpen = {
+        content_id: parseInt(match.params.idcts),
+        workspace_id: parseInt(idWorkspace),
+        type: match.params.type
+      }
+
+      console.log('contentToOpen', contentToOpen)
+
+      if (!appOpened) {
+        renderApp(
+          contentType.find(ct => ct.slug === contentToOpen.type),
+          user,
+          contentToOpen
+        )
+        this.props.updateAppOpened(true)
+      } else {
+        GLOBAL_dispatchEvent({
+          type: 'html-documents_reloadContent',
+          data: contentToOpen
+        })
+      }
+    }
+  }
+
+  componentDidMount () {
+    console.log('OpenContentApp did Mount', this.props)
+
+    this.openContentApp()
+  }
+
+  componentDidUpdate () {
+    console.log('OpenContentApp did Update', this.props)
+
+    this.openContentApp()
+  }
+
+  render () {
+    return null
+  }
+}
+
+const mapStateToProps = ({ user, workspaceContent, contentType }) => ({ user, workspaceContent, contentType })
+export default withRouter(connect(mapStateToProps)(appFactory(OpenContentApp)))

src/container/Sidebar.jsx

@@ -59,7 +59,7 @@ class Sidebar extends React.Component {
 
           <nav className='sidebar__navigation'>
             <ul className='sidebar__navigation__workspace'>
-              { workspaceList.map((ws, i) =>
+              { workspaceList.map(ws =>
                 <WorkspaceListItem
                   idWs={ws.id}
                   label={ws.label}

src/container/Tracim.jsx

@@ -16,7 +16,6 @@ import {
 import PrivateRoute from './PrivateRoute.jsx'
 import { PAGE } from '../helper.js'
 import {
-  getLangList,
   getUserIsConnected
 } from '../action-creator.async.js'
 import {
@@ -28,8 +27,6 @@ class Tracim extends React.Component {
   async componentDidMount () {
     const { dispatch } = this.props
 
-    dispatch(getLangList())
-
     const fetchGetUserIsConnected = await dispatch(getUserIsConnected())
     switch (fetchGetUserIsConnected.status) {
       case 200:
@@ -54,14 +51,17 @@ class Tracim extends React.Component {
         { user.logged === undefined
           ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
           : (
-            <div className='tracim__content'>
+            <div className='tracim__content'> {/* uses of <Switch> component in react router ? */}
               <Route path={PAGE.LOGIN} component={Login} />
 
               <PrivateRoute exact path={PAGE.HOME} component={WorkspaceContent} />
               <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
               {/* bellow, the '?' is important, it avoid to have to declare another route for CONTENT_LIST which could double match */}
-              <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':idcts?')} component={WorkspaceContent} />
-              <PrivateRoute exact path={PAGE.WORKSPACE.DASHBOARD()} component={Dashboard} />
+              {/* <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':type?', ':idcts?')} component={WorkspaceContent} /> */}
+
+              <Route path='/workspaces/:idws/' component={WorkspaceContent} />
+
+              <PrivateRoute exact path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
               <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
               <Footer />

src/container/WorkspaceContent.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter, Route } from 'react-router-dom'
 import appFactory from '../appFactory.js'
 import { PAGE } from '../helper.js'
 import Sidebar from './Sidebar.jsx'
@@ -11,6 +11,7 @@ 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 OpenContentApp from './OpenContentApp.jsx'
 import {
   getAppList,
   getContentTypeList,
@@ -39,21 +40,22 @@ class WorkspaceContent extends React.Component {
         type: undefined,
         folder: undefined
       },
-      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null,
-      workspaceOpened: false
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
+      appOpened: false
     }
 
     document.addEventListener('appCustomEvent', this.customEventReducer)
   }
 
   customEventReducer = ({ detail: { type, data } }) => {
+    console.log(type, data)
     switch (type) {
       case 'openContentUrl':
-        this.props.history.push(PAGE.WORKSPACE.CONTENT(data.idWorkspace, data.idContent))
+        this.props.history.push(PAGE.WORKSPACE.CONTENT(data.idWorkspace, data.contentType, data.idContent))
         break
       case 'appClosed':
-        this.props.history.push(PAGE.WORKSPACE.CONTENT(this.props.workspace.id, ''))
-        this.setState({workspaceOpened: false})
+        this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(this.state.workspaceIdInUrl))
+        this.setState({appOpened: false})
         break
     }
   }
@@ -82,58 +84,39 @@ class WorkspaceContent extends React.Component {
 
       if (fetchGetWorkspaceList.status === 200) {
         dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
-        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].id, true))
+        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
 
         if (match.params.idws === undefined && fetchGetWorkspaceList.json.length > 0) {
-          wsToLoad = fetchGetWorkspaceList.json[0].id // load first ws if none specified
+          wsToLoad = fetchGetWorkspaceList.json[0].workspace_id // load first ws if none specified
         }
       }
     }
 
     if (wsToLoad === null) return // ws already loaded
 
-    const wsContent = await dispatch(getWorkspaceContentList(wsToLoad))
+    const wsContent = await dispatch(getWorkspaceContentList(wsToLoad, 0))
 
     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 { contentType, workspaceContent, user, renderApp, match } = this.props
-
     console.log('componentDidUpdate')
 
     if (this.state.workspaceIdInUrl === null) return
 
-    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))
+    const idWorkspace = parseInt(this.props.match.params.idws)
 
-    if (match.params.idcts && workspaceContent.id !== -1 && !workspaceOpened && workspaceContent.length) { // if a content id is in url, open it
-      const idContentToOpen = parseInt(match.params.idcts)
-      const contentToOpen = workspaceContent.find(wsc => wsc.id === idContentToOpen) // || await dispatch(getWorkspaceContent(idWorkspace, idContentToOpen))
+    if (isNaN(idWorkspace)) 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)
-      // }
-
-      console.log('contentToOpen', contentToOpen)
+    if (prevState.workspaceIdInUrl !== idWorkspace) this.setState({workspaceIdInUrl: idWorkspace})
 
-      renderApp(
-        contentType.find(ct => ct.type === contentToOpen.type),
-        user,
-        {...contentToOpen, workspaceContent: workspaceContent}
-      )
-      this.setState({workspaceOpened: true})
-    }
+    // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
   }
 
   handleClickContentItem = content => {
     console.log('content clicked', content)
-    this.props.history.push(`${PAGE.WORKSPACE.CONTENT(content.workspaceId, content.id)}${this.props.location.search}`)
+    this.props.history.push(`/workspaces/${content.idWorkspace}/${content.type}/${content.id}`)
   }
 
   handleClickEditContentItem = (e, content) => {
@@ -165,15 +148,22 @@ class WorkspaceContent extends React.Component {
     this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
   }
 
-  handleClickCreateContent = (folder, contentType) => {
-    this.props.renderCreateContentApp(this.props.app[contentType], this.props.user, folder)
+  handleClickCreateContent = (e, idFolder, contentType) => {
+    e.stopPropagation()
+    this.props.renderCreateContentApp(
+      this.props.contentType.find(ct => ct.slug === contentType),
+      this.props.user,
+      this.props.match.params.idws,
+      idFolder
+    )
   }
 
+  handleUpdateAppOpened = opened => this.setState({appOpened: opened})
+
   render () {
-    const { workspaceContent, app, contentType } = this.props
+    const { workspaceContent, contentType, match } = 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
@@ -187,19 +177,28 @@ class WorkspaceContent extends React.Component {
     const filteredWorkspaceContent = workspaceContent.length > 0
       ? filterWorkspaceContent(workspaceContent, urlFilter ? [urlFilter] : [])
       : []
-    console.log('workspaceContent => filteredWorkspaceContent', filteredWorkspaceContent)
+    console.log('workspaceContent => filteredWorkspaceContent', filteredWorkspaceContent, 'urlFilter', urlFilter)
 
     return (
       <div className='sidebarpagecontainer'>
         <Sidebar />
 
+        <Route path={`${match.url}/:type/:idcts`} render={() =>
+          <OpenContentApp idWorkspace={match.params.idws} appOpened={this.state.appOpened} updateAppOpened={this.handleUpdateAppOpened} />}
+        />
+
         <PageWrapper customeClass='workspace'>
           <PageTitle
             parentClass='workspace__header'
             customClass='justify-content-between'
             title={workspaceContent.label ? workspaceContent.label : ''}
           >
-            <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
+            <DropdownCreateButton
+              parentClass='workspace__header__btnaddworkspace'
+              idFolder={null}
+              onClickCreateContent={this.handleClickCreateContent}
+              availableApp={contentType}
+            />
           </PageTitle>
 
           <PageContent parentClass='workspace__content'>
@@ -211,7 +210,7 @@ class WorkspaceContent extends React.Component {
               { filteredWorkspaceContent.map((c, i) => c.type === 'folder'
                 ? (
                   <Folder
-                    app={app}
+                    availableApp={contentType}
                     folderData={c}
                     onClickItem={this.handleClickContentItem}
                     onClickExtendedAction={{
@@ -242,6 +241,7 @@ class WorkspaceContent extends React.Component {
                       archive: e => this.handleClickArchiveContentItem(e, c),
                       delete: e => this.handleClickDeleteContentItem(e, c)
                     }}
+                    onClickCreateContent={this.handleClickCreateContent}
                     isLast={i === filteredWorkspaceContent.length - 1}
                     key={c.id}
                   />
@@ -249,7 +249,12 @@ class WorkspaceContent extends React.Component {
               )}
             </div>
 
-            <DropdownCreateButton customClass='workspace__content__button mb-5' />
+            <DropdownCreateButton
+              customClass='workspace__content__button mb-5'
+              idFolder={null}
+              onClickCreateContent={this.handleClickCreateContent}
+              availableApp={contentType}
+            />
 
             <div id='appContainer' />
           </PageContent>

src/css/Folder.styl

@@ -120,8 +120,6 @@ folderopen()
               margin-left 20px
           &__subdropdown
             padding 0
-            .subdropdown__link
-              padding 10px
     &__status
       flex-grow 0
       padding 0 15px

src/helper.js

@@ -11,11 +11,11 @@ export const FETCH_CONFIG = {
 export const PAGE = {
   HOME: '/',
   WORKSPACE: {
-    DASHBOARD: (idws = ':idws') => `/workspaces/${idws}`,
+    DASHBOARD: (idws = ':idws') => `/workspaces/${idws}/dashboard`,
     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: (idws = ':idws', type = ':type', idcts = ':idcts') => `/workspaces/${idws}/${type}/${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`,

src/index.js

@@ -11,7 +11,7 @@ require('./css/index.styl')
 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter basename={'/#'}>
+    <BrowserRouter>
       <I18nextProvider i18n={i18n}>
         <Tracim />
       </I18nextProvider>

src/reducer/workspaceContent.js

@@ -7,16 +7,16 @@ export default function workspace (state = [], action) {
   switch (action.type) {
     case `Set/${WORKSPACE}/Content`:
       return action.workspaceContent.map(wsc => ({
-        id: wsc.id,
+        id: wsc.content_id,
         label: wsc.label,
         slug: wsc.slug,
-        type: wsc.content_type_slug,
-        workspaceId: wsc.workspace_id,
+        type: wsc.content_type,
+        idWorkspace: wsc.workspace_id,
         isArchived: wsc.is_archived,
         parentId: wsc.parent_id,
         isDeleted: wsc.is_deleted,
         showInUi: wsc.show_in_ui,
-        statusSlug: wsc.status_slug,
+        statusSlug: wsc.status,
         subContentTypeSlug: wsc.sub_content_type_slug
       }))
 

src/reducer/workspaceList.js

@@ -7,7 +7,7 @@ export function workspaceList (state = [], action) {
   switch (action.type) {
     case `Update/${WORKSPACE_LIST}`:
       return action.workspaceList.map(ws => ({
-        id: ws.id,
+        id: ws.workspace_id,
         label: ws.label,
         slug: ws.slug,
         description: ws.description,