[https://github.com/tracim/tracim/issues/759] added 'contents' to routes + refactor <Route> for React Router

frontend/src/component/Workspace/OpenContentApp.jsx

@@ -22,13 +22,10 @@ export class OpenContentApp extends React.Component {
       console.log('%c<OpenContentApp> contentToOpen', 'color: #dcae84', contentToOpen)
 
       if (appOpenedType === contentToOpen.type) { // app already open
-        dispatchCustomEvent({
-          type: `${contentToOpen.type}_reloadContent`, // handled by html-document:src/container/AdminWorkspaceUser.jsx
-          data: contentToOpen
-        })
+        dispatchCustomEvent(`${contentToOpen.type}_reloadContent`, contentToOpen)
       } else { // open another app
         // if another app is already visible, hide it
-        if (appOpenedType !== false) dispatchCustomEvent({type: `${appOpenedType}_hideApp`})
+        if (appOpenedType !== false) dispatchCustomEvent(`${appOpenedType}_hideApp`, {})
         // open app
         renderAppFeature(
           contentType.find(ct => ct.slug === contentToOpen.type),

frontend/src/container/Account.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Sidebar from './Sidebar.jsx'
 import UserInfo from '../component/Account/UserInfo.jsx'
 import MenuSubComponent from '../component/Account/MenuSubComponent.jsx'
 import PersonalData from '../component/Account/PersonalData.jsx'
@@ -102,9 +101,7 @@ class Account extends React.Component {
     })()
 
     return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-
+      <div className='Account'>
         <PageWrapper customClass='account'>
           <PageTitle
             parentClass={'account'}

frontend/src/container/AppFullscreenManager.jsx

@@ -4,7 +4,6 @@ import { withRouter } from 'react-router'
 import { Route } from 'react-router-dom'
 import { PAGE } from '../helper.js'
 import appFactory from '../appFactory.js'
-import Sidebar from './Sidebar.jsx'
 
 class AppFullscreenManager extends React.Component {
   constructor (props) {
@@ -20,9 +19,7 @@ class AppFullscreenManager extends React.Component {
     const { props } = this
 
     return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-
+      <div className='AppFullScreenManager'>
         <div id='appFullscreenContainer' />
 
         {this.state.AmIMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM

frontend/src/container/Dashboard.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Sidebar from './Sidebar.jsx'
 import { translate } from 'react-i18next'
 import {
   PageWrapper,
@@ -93,9 +92,7 @@ class Dashboard extends React.Component {
     const { props, state } = this
 
     return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-
+      <div className='Dashboard' style={{width: '100%'}}>
         <PageWrapper customeClass='dashboard'>
           <PageTitle
             parentClass='dashboard__header'

frontend/src/container/Login.jsx

@@ -55,8 +55,8 @@ class Login extends React.Component {
       Cookies.set(COOKIE.USER_LOGIN, inputLogin.value)
       Cookies.set(COOKIE.USER_AUTH, userAuth)
 
-      history.push(PAGE.HOME)
-    } else if (fetchPostUserLogin.status === 400) {
+      history.push(PAGE.WORKSPACE.ROOT)
+    } else if (fetchPostUserLogin.status === 403) {
       dispatch(newFlashMessage(t('Email or password invalid'), 'danger'))
     }
   }

frontend/src/container/Sidebar.jsx

@@ -25,7 +25,7 @@ class Sidebar extends React.Component {
     super(props)
     this.state = {
       sidebarClose: false,
-      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null
+      workspaceIdInUrl: props.match && props.match.params.idws ? parseInt(props.match.params.idws) : null
     }
 
     document.addEventListener('appCustomEvent', this.customEventReducer)
@@ -41,14 +41,17 @@ class Sidebar extends React.Component {
   }
 
   componentDidMount () {
+    // console.log('Sidebar Did Mount', this.props)
     this.loadAppConfigAndWorkspaceList()
   }
 
   componentDidUpdate (prevProps, prevState) {
+    const { props } = this
+
     // console.log('%c<Sidebar> Did Update', 'color: #c17838')
-    if (this.props.match.params.idws === undefined || isNaN(this.props.match.params.idws)) return
+    if (!props.match || props.match.params.idws === undefined || isNaN(props.match.params.idws)) return
 
-    const newWorkspaceId = parseInt(this.props.match.params.idws)
+    const newWorkspaceId = parseInt(props.match.params.idws)
     if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
   }
 

frontend/src/container/Tracim.jsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
+import Sidebar from './Sidebar.jsx'
 import Header from './Header.jsx'
 import Login from './Login.jsx'
-import Dashboard from './Dashboard.jsx'
 import Account from './Account.jsx'
 import AppFullscreenManager from './AppFullscreenManager.jsx'
 import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import WIPcomponent from './WIPcomponent.jsx'
 import {
-  Route, withRouter, Switch
+  Route, withRouter, Redirect
 } from 'react-router-dom'
-import PrivateRoute from './PrivateRoute.jsx'
 import { COOKIE, PAGE } from '../helper.js'
 import {
   getUserIsConnected
@@ -22,6 +21,7 @@ import {
   setUserConnected
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
+import Dashboard from './Dashboard.jsx'
 
 class Tracim extends React.Component {
   constructor (props) {
@@ -40,6 +40,7 @@ class Tracim extends React.Component {
   }
 
   async componentDidMount () {
+    // console.log('<Tracim> did Mount')
     const { dispatch } = this.props
 
     const userFromCookies = {
@@ -66,27 +67,57 @@ class Tracim extends React.Component {
   handleRemoveFlashMessage = msg => this.props.dispatch(removeFlashMessage(msg))
 
   render () {
-    const { flashMessage, t } = this.props
+    const { props } = this
 
     return (
       <div className='tracim'>
         <Header />
-        <FlashMessage flashMessage={flashMessage} removeFlashMessage={this.handleRemoveFlashMessage} t={t} />
+        <FlashMessage flashMessage={props.flashMessage} removeFlashMessage={this.handleRemoveFlashMessage} t={props.t} />
 
         <div className='tracim__content'>
           <Route path={PAGE.LOGIN} component={Login} />
 
-          <PrivateRoute exact path='/' 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 path={PAGE.ACCOUNT} component={Account} />
-          <PrivateRoute path={PAGE.ADMIN.ROOT} component={AppFullscreenManager} />
-          <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
+          <Route exact path='/' component={() => {
+            switch (props.user.logged) {
+              case true:
+                return <Redirect to={{pathname: PAGE.WORKSPACE.ROOT, state: {from: props.location}}} />
+              case false:
+                return <Redirect to={{pathname: '/login', state: {from: props.location}}} />
+              case null:
+                return null
+            }
+          }} />
+
+          { props.user.logged
+            ? (
+              <Route path='/workspaces/:idws?' render={() => // Workspace Router
+                <div className='sidebarpagecontainer'>
+                  <Sidebar />
+
+                  <Route exact path={PAGE.WORKSPACE.ROOT} render={() => props.workspaceList.length === 0 // handle '/' and redirect to first workspace
+                    ? null
+                    : <Redirect to={{pathname: `/workspaces/${props.workspaceList[0].id}/contents`, state: {from: props.location}}} />
+                  } />
+
+                  <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
+                    <Redirect to={{pathname: `/workspaces/${props2.match.params.idws}/contents`, state: {from: props.location}}} />
+                  } />
+
+                  <Route path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
+                  <Route path={PAGE.WORKSPACE.CALENDAR(':idws')} component={() => <div><br /><br /><br /><br />NYI</div>} />
+                  <Route path={PAGE.WORKSPACE.CONTENT(':idws', ':type', ':idcts')} component={WorkspaceContent} />
+                  <Route exact path={PAGE.WORKSPACE.CONTENT_LIST(':idws')} component={WorkspaceContent} />
+
+                  <Route path={PAGE.ACCOUNT} component={Account} />
+                  <Route path={PAGE.ADMIN.ROOT} component={AppFullscreenManager} />
+                </div>
+              } />
+            )
+            : props.user.logged === false && props.location.pathname !== '/login' &&
+              <Redirect to={{pathname: '/login', state: {from: props.location}}} />
+          }
+
+          <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
           <div id='appFeatureContainer' />
         </div>
@@ -96,5 +127,5 @@ class Tracim extends React.Component {
   }
 }
 
-const mapStateToProps = ({ user, appList, contentType, flashMessage }) => ({ user, appList, contentType, flashMessage })
+const mapStateToProps = ({ user, appList, contentType, workspaceList, flashMessage }) => ({ user, appList, contentType, workspaceList, flashMessage })
 export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

frontend/src/container/WorkspaceContent.jsx

@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
 import { withRouter, Route } from 'react-router-dom'
 import appFactory from '../appFactory.js'
 import { PAGE } from '../helper.js'
-import Sidebar from './Sidebar.jsx'
 import Folder from '../component/Workspace/Folder.jsx'
 import ContentItem from '../component/Workspace/ContentItem.jsx'
 import ContentItemHeader from '../component/Workspace/ContentItemHeader.jsx'
@@ -108,7 +107,8 @@ class WorkspaceContent extends React.Component {
 
   handleClickContentItem = content => {
     console.log('%c<WorkspaceContent> content clicked', 'color: #c17838', content)
-    this.props.history.push(`/workspaces/${content.idWorkspace}/${content.type}/${content.id}`)
+    // this.props.history.push(`/workspaces/${content.idWorkspace}/${content.type}/${content.id}`)
+    this.props.history.push(PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id))
   }
 
   handleClickEditContentItem = (e, content) => {
@@ -166,9 +166,7 @@ class WorkspaceContent extends React.Component {
       : []
 
     return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
-
+      <div className='WorkspaceContent' style={{width: '100%'}}>
         <OpenContentApp
           // automatically open the app for the idContent in url
           idWorkspace={this.state.workspaceIdInUrl}

frontend/src/css/Dashboard.styl

@@ -31,7 +31,6 @@ coloricon()
     color lecteur
 
 .dashboard
-  margin-left 20px
   width 100%
   &__header
     flexwrap()

frontend/src/css/Generic.styl

@@ -111,7 +111,7 @@ a
 
 
 .pageContentGeneric
-  margin 10px 0 0 0
+  margin 10px 15px 0 15px
   width 100%
   height 100%
 

frontend/src/css/Workspace.styl

@@ -4,7 +4,6 @@
     flex-wrap wrap
     margin-right 15px
   &__content
-    margin 0 15px
     &__button
       display flex
       justify-content flex-end

frontend/src/helper.js

@@ -24,14 +24,12 @@ export const workspaceConfig = {
 export const PAGE = {
   HOME: '/',
   WORKSPACE: {
+    ROOT: '/workspaces',
     DASHBOARD: (idws = ':idws') => `/workspaces/${idws}/dashboard`,
-    NEW: (idws, type) => `/workspaces/${idws}/${type}/new`,
+    NEW: (idws, type) => `/workspaces/${idws}/contents/${type}/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}`, // @TODO add /contents/ in url and remove <Switch> in <Tracim>
-    // 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`,
+    CONTENT: (idws = ':idws', type = ':type', idcts = ':idcts') => `/workspaces/${idws}/contents/${type}/${idcts}`,
     ADMIN: (idws = ':idws') => `/workspaces/${idws}/admin`
   },
   LOGIN: '/login',