fixed route handling

src/appFactory.js

@@ -15,7 +15,7 @@ export function appFactory (WrappedComponent) {
       content
     })
 
-    renderCreateContentApp = (appConfig, user, idWorkspace, idfolder) => GLOBAL_renderCreateContentApp({
+    renderCreateContentApp = (appConfig, user, idWorkspace, idFolder) => GLOBAL_renderCreateContentApp({
       loggedUser: user.logged ? user : {},
       config: {
         ...appConfig,
@@ -25,7 +25,7 @@ export function appFactory (WrappedComponent) {
         apiHeader: FETCH_CONFIG.headers
       },
       idWorkspace,
-      idfolder
+      idFolder
     })
 
     emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)

src/container/Dashboard.jsx

@@ -1,11 +1,21 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 import Sidebar from './Sidebar.jsx'
 import imgProfil from '../img/imgProfil.png'
-
-class Dashboard extends Component {
+import {
+  getAppList,
+  getContentTypeList, getWorkspaceList
+} from '../action-creator.async.js'
+import {
+  setAppList,
+  setContentTypeList, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
+} from '../action-creator.sync.js'
+
+class Dashboard extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
       displayNewMemberDashboard: false,
       displayNotifBtn: false,
       displayWebdavBtn: false,
@@ -13,6 +23,32 @@ class Dashboard extends Component {
     }
   }
 
+  async componentDidMount () {
+    const { workspaceIdInUrl } = this.state
+    const { user, workspaceList, app, contentType, dispatch } = this.props
+
+    console.log('<Dashboard> 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))
+    }
+
+    if (user.user_id !== -1 && workspaceList.length === 0) {
+      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user.user_id))
+
+      if (fetchGetWorkspaceList.status === 200) {
+        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
+      }
+    }
+  }
+
   handleToggleNewMemberDashboard = () => this.setState(prevState => ({
     displayNewMemberDashboard: !prevState.displayNewMemberDashboard
   }))
@@ -551,4 +587,5 @@ class Dashboard extends Component {
   }
 }
 
-export default Dashboard
+const mapStateToProps = ({ user, app, contentType, workspaceList }) => ({ user, app, contentType, workspaceList })
+export default connect(mapStateToProps)(Dashboard)

src/container/OpenContentApp.jsx

@@ -10,7 +10,8 @@ export class OpenContentApp extends React.Component {
     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
+      if (isNaN(match.params.idcts) || !contentType.map(c => c.slug).includes(match.params.type)) return
+
       const contentToOpen = {
         content_id: parseInt(match.params.idcts),
         workspace_id: parseInt(idWorkspace),

src/container/Sidebar.jsx

@@ -22,6 +22,7 @@ class Sidebar extends React.Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
+    console.log('<Sidebar> Did Update')
     if (this.props.match.params.idws === undefined) return
 
     const newWorkspaceId = parseInt(this.props.match.params.idws)

src/container/Tracim.jsx

@@ -11,7 +11,8 @@ import WorkspaceContent from './WorkspaceContent.jsx'
 import WIPcomponent from './WIPcomponent.jsx'
 import {
   Route,
-  withRouter
+  withRouter,
+  Switch
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
 import { PAGE } from '../helper.js'
@@ -54,14 +55,13 @@ class Tracim extends React.Component {
             <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', ':type?', ':idcts?')} component={WorkspaceContent} /> */}
-
-              <Route path='/workspaces/:idws/' component={WorkspaceContent} />
+              <Switch>
+                <PrivateRoute path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
+                <PrivateRoute path={PAGE.WORKSPACE.CALENDAR(':idws')} component={() => <div><br /><br /><br /><br />NYI</div>} />
+                <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':type?', ':idcts?')} component={WorkspaceContent} />
+              </Switch>
 
-              <PrivateRoute exact path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
+              <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
               <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, Route } from 'react-router-dom'
+import { withRouter } from 'react-router-dom'
 import appFactory from '../appFactory.js'
 import { PAGE } from '../helper.js'
 import Sidebar from './Sidebar.jsx'
@@ -64,7 +64,7 @@ class WorkspaceContent extends React.Component {
     const { workspaceIdInUrl } = this.state
     const { user, workspaceList, app, contentType, match, location, dispatch } = this.props
 
-    console.log('componentDidMount')
+    console.log('<WorkspaceContent> componentDidMount')
 
     if (app.length === 0) {
       const fetchGetAppList = await dispatch(getAppList())
@@ -100,16 +100,25 @@ class WorkspaceContent extends React.Component {
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    console.log('componentDidUpdate')
+  async componentDidUpdate (prevProps, prevState) {
+    const { match, location, dispatch } = this.props
+
+    console.log('<WorkspaceContent> componentDidUpdate')
 
     if (this.state.workspaceIdInUrl === null) return
 
-    const idWorkspace = parseInt(this.props.match.params.idws)
+    const idWorkspace = parseInt(match.params.idws)
 
     if (isNaN(idWorkspace)) return
 
-    if (prevState.workspaceIdInUrl !== idWorkspace) this.setState({workspaceIdInUrl: idWorkspace})
+    if (prevState.workspaceIdInUrl !== idWorkspace) {
+      this.setState({workspaceIdInUrl: idWorkspace})
+
+      const wsContent = await dispatch(getWorkspaceContentList(idWorkspace, 0))
+
+      if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
+      else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
+    }
 
     // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
   }
@@ -183,9 +192,7 @@ class WorkspaceContent extends React.Component {
       <div className='sidebarpagecontainer'>
         <Sidebar />
 
-        <Route path={`${match.url}/:type/:idcts`} render={() =>
-          <OpenContentApp idWorkspace={match.params.idws} appOpened={this.state.appOpened} updateAppOpened={this.handleUpdateAppOpened} />}
-        />
+        <OpenContentApp idWorkspace={match.params.idws} appOpened={this.state.appOpened} updateAppOpened={this.handleUpdateAppOpened} />
 
         <PageWrapper customeClass='workspace'>
           <PageTitle

src/helper.js

@@ -15,7 +15,7 @@ export const PAGE = {
     NEW: '/workspaces/new',
     CALENDAR: (idws = ':idws') => `/workspaces/${idws}/calendar`,
     CONTENT_LIST: (idws = ':idws') => `/workspaces/${idws}/contents`,
-    CONTENT: (idws = ':idws', type = ':type', idcts = ':idcts') => `/workspaces/${idws}/${type}/${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`,