fixed routing and initialization data loading for sidebar

frontend/src/component/Dashboard/RecentActivity.jsx

@@ -21,7 +21,7 @@ export const RecentActivity = props =>
 
     <div className='activity__wrapper'>
       {props.recentActivityList.map(content => {
-        const contentType = props.contentTypeList.find(ct => ct.slug === content.type)
+        const contentType = props.contentTypeList.find(ct => ct.slug === content.type) || {hexcolor: '', faIcon: ''}
         return (
           <div
             className={classnames('activity__workspace', {'read': props.readByUserList.includes(content.id)})}

frontend/src/container/Account.jsx

@@ -29,18 +29,15 @@ class Account extends React.Component {
         name: 'personalData',
         menuLabel: 'Mon profil',
         active: true
-      },
-      {
+      }, {
         name: 'notification',
         menuLabel: 'Espace de travail & Notifications',
         active: false
-      },
-      {
+      }, {
         name: 'password',
         menuLabel: 'Mot de passe',
         active: false
-      },
-      {
+      }, {
         name: 'timezone',
         menuLabel: 'Fuseau Horaire',
         active: false
@@ -79,8 +76,7 @@ class Account extends React.Component {
     const subComponent = (() => {
       switch (this.state.subComponentMenu.find(({active}) => active).name) {
         case 'personalData':
-          return <PersonalData
-          />
+          return <PersonalData />
 
         // case 'calendar':
         //   return <Calendar user={this.props.user} />
@@ -92,8 +88,7 @@ class Account extends React.Component {
           />
 
         case 'password':
-          return <Password
-          />
+          return <Password />
 
         case 'timezone':
           return <Timezone timezone={this.props.timezone} onChangeTimezone={this.handleChangeTimezone} />

frontend/src/container/Login.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Redirect } from 'react-router'
+import { withRouter, Redirect } from 'react-router'
 import { translate } from 'react-i18next'
 import Cookies from 'js-cookie'
 import LoginLogo from '../component/Login/LoginLogo.jsx'
 import LoginLogoImg from '../img/logoTracimWhite.svg'
-import { postUserLogin } from '../action-creator.async.js'
 import Card from '../component/common/Card/Card.jsx'
 import CardHeader from '../component/common/Card/CardHeader.jsx'
 import CardBody from '../component/common/Card/CardBody.jsx'
@@ -14,8 +13,18 @@ import Button from '../component/common/Input/Button.jsx'
 import LoginBtnForgotPw from '../component/Login/LoginBtnForgotPw.jsx'
 import {
   newFlashMessage,
-  setUserConnected
+  setUserConnected,
+  updateWorkspaceListData,
+  setWorkspaceListIsOpenInSidebar,
+  setContentTypeList,
+  setAppList
 } from '../action-creator.sync.js'
+import {
+  getAppList,
+  getContentTypeList,
+  getWorkspaceList,
+  postUserLogin
+} from '../action-creator.async.js'
 import { COOKIE, PAGE } from '../helper.js'
 import { Checkbox } from 'tracim_frontend_lib'
 
@@ -51,11 +60,16 @@ class Login extends React.Component {
     const userAuth = btoa(`${inputLogin.value}:${inputPassword.value}`)
 
     if (fetchPostUserLogin.status === 200) {
-      dispatch(setUserConnected({
+      const loggedUser = {
         ...fetchPostUserLogin.json,
         auth: userAuth,
         logged: true
-      }))
+      }
+
+      dispatch(setUserConnected(loggedUser))
+
+      this.loadAppConfig(loggedUser)
+      this.loadWorkspaceList(loggedUser)
 
       if (inputRememberMe) {
         Cookies.set(COOKIE.USER_LOGIN, inputLogin.value, {expires: 365})
@@ -71,6 +85,36 @@ class Login extends React.Component {
     }
   }
 
+  // @FIXME Côme - 2018/08/22 - this function is duplicated from Tracim.jsx
+  loadAppConfig = async user => {
+    const { props } = this
+
+    const fetchGetAppList = await props.dispatch(getAppList(user))
+    if (fetchGetAppList.status === 200) props.dispatch(setAppList(fetchGetAppList.json))
+
+    const fetchGetContentTypeList = await props.dispatch(getContentTypeList(user))
+    if (fetchGetContentTypeList.status === 200) props.dispatch(setContentTypeList(fetchGetContentTypeList.json))
+  }
+
+  // @FIXME Côme - 2018/08/22 - this function is duplicated from Tracim.jsx
+  loadWorkspaceList = async user => {
+    const { props } = this
+
+    const fetchGetWorkspaceList = await props.dispatch(getWorkspaceList(user))
+
+    if (fetchGetWorkspaceList.status === 200) {
+      props.dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+
+      const idWorkspaceToOpen = (() =>
+        props.match && props.match.params.idws !== undefined && !isNaN(props.match.params.idws)
+          ? parseInt(props.match.params.idws)
+          : fetchGetWorkspaceList.json[0].workspace_id
+      )()
+
+      props.dispatch(setWorkspaceListIsOpenInSidebar(idWorkspaceToOpen, true))
+    }
+  }
+
   render () {
     if (this.props.user.logged) return <Redirect to={{pathname: '/'}} />
     else {
@@ -118,6 +162,7 @@ class Login extends React.Component {
                             <Checkbox
                               name='inputRememberMe'
                               checked={this.state.inputRememberMe}
+                              onClickCheckbox={() => {}}
                             />
                             Se souvenir de moi
                           </div>
@@ -161,4 +206,4 @@ class Login extends React.Component {
 }
 
 const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(translate()(Login))
+export default withRouter(connect(mapStateToProps)(translate()(Login)))

frontend/src/container/Sidebar.jsx

@@ -6,16 +6,8 @@ import { translate } from 'react-i18next'
 import appFactory from '../appFactory.js'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import {
-  setAppList,
-  setContentTypeList,
-  setWorkspaceListIsOpenInSidebar,
-  updateWorkspaceFilter,
-  updateWorkspaceListData
+  setWorkspaceListIsOpenInSidebar
 } from '../action-creator.sync.js'
-import {
-  getAppList, getContentTypeList,
-  getWorkspaceList
-} from '../action-creator.async.js'
 import { PAGE, workspaceConfig } from '../helper.js'
 
 const qs = require('query-string')
@@ -25,6 +17,7 @@ class Sidebar extends React.Component {
     super(props)
     this.state = {
       sidebarClose: false,
+      workspaceListLoaded: false,
       workspaceIdInUrl: props.match && props.match.params.idws ? parseInt(props.match.params.idws) : null
     }
 
@@ -40,62 +33,26 @@ 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 (!props.match || props.match.params.idws === undefined || isNaN(props.match.params.idws)) return
-
-    const newWorkspaceId = parseInt(props.match.params.idws)
-    if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
-  }
-
-  loadAppConfigAndWorkspaceList = async () => {
-    const { workspaceIdInUrl } = this.state
-    const { user, dispatch } = this.props
-
-    if (user.user_id !== -1) {
-      const fetchGetAppList = await dispatch(getAppList(user))
-      if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
-
-      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
-      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
-
-      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
+    if (!this.shouldDisplaySidebar()) return
 
-      if (fetchGetWorkspaceList.status === 200) {
-        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
-        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
-      }
+    // console.log('%c<Sidebar> Did Update', 'color: #c17838')
+    if (props.match && props.match.params.idws !== undefined && !isNaN(props.match.params.idws)) {
+      const newWorkspaceId = parseInt(props.match.params.idws)
+      if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
     }
   }
 
-  handleClickWorkspace = (idWs, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(idWs, newIsOpenInSidebar))
-
-  handleClickAllContent = idWs => {
-    this.props.dispatch(updateWorkspaceFilter([]))
-
-    this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(idWs))
+  shouldDisplaySidebar = () => {
+    const pageWithoutSidebar = [PAGE.LOGIN]
+    return !pageWithoutSidebar.includes(this.props.location.pathname)
   }
 
-  // @DEPRECATED
-  // not used, right now, link on sidebar filters is a <Link>
-  handleClickContentFilter = (idWs, filter) => {
-    const { workspace, history } = this.props
-
-    const newFilter = workspace.filter.includes(filter) ? [] : [filter] // use an array to allow multiple filters (NYI)
-
-    history.push(`${PAGE.WORKSPACE.CONTENT_LIST(idWs)}?type=${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
+  handleClickWorkspace = (idWs, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(idWs, newIsOpenInSidebar))
 
-    // obviously, it's ugly to use custom event to tell WorkspaceContentList to refresh, but since WorkspaceContentList
-    // will end up being an App, it'll have to be that way. So it's fine
-    GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
-  }
+  handleClickAllContent = idWs => this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(idWs))
 
   handleClickToggleSidebar = () => this.setState(prev => ({sidebarClose: !prev.sidebarClose}))
 
@@ -105,6 +62,8 @@ class Sidebar extends React.Component {
     const { sidebarClose, workspaceIdInUrl } = this.state
     const { activeLang, workspaceList, t } = this.props
 
+    if (!this.shouldDisplaySidebar()) return null
+
     return (
       <div className={classnames('sidebar primaryColorBgDarken', {'sidebarclose': sidebarClose})}>
 
@@ -125,7 +84,6 @@ class Sidebar extends React.Component {
                   isOpenInSidebar={ws.isOpenInSidebar}
                   onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
                   onClickAllContent={this.handleClickAllContent}
-                  // onClickContentFilter={this.handleClickContentFilter}
                   key={ws.id}
                 />
               )}
@@ -156,10 +114,9 @@ class Sidebar extends React.Component {
   }
 }
 
-const mapStateToProps = ({ lang, user, workspace, workspaceList }) => ({
+const mapStateToProps = ({ lang, user, workspaceList }) => ({
   activeLang: lang.find(l => l.active) || {id: 'en'},
   user,
-  workspace,
   workspaceList
 })
 export default withRouter(connect(mapStateToProps)(appFactory(translate()(Sidebar))))

frontend/src/container/Tracim.jsx

@@ -14,12 +14,16 @@ import {
 } from 'react-router-dom'
 import { COOKIE, PAGE } from '../helper.js'
 import {
-  getUserIsConnected
+  getAppList,
+  getContentTypeList,
+  getUserIsConnected, getWorkspaceList
 } from '../action-creator.async.js'
 import {
   newFlashMessage,
   removeFlashMessage,
-  setUserConnected
+  setAppList,
+  setContentTypeList,
+  setUserConnected, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
 import Dashboard from './Dashboard.jsx'
@@ -61,6 +65,8 @@ class Tracim extends React.Component {
           auth: userFromCookies.auth,
           logged: true
         }))
+        this.loadAppConfig()
+        this.loadWorkspaceList()
         break
       case 401:
         dispatch(setUserConnected({logged: false})); break
@@ -69,6 +75,36 @@ class Tracim extends React.Component {
     }
   }
 
+  loadAppConfig = async () => {
+    const { props } = this
+
+    const fetchGetAppList = await props.dispatch(getAppList(props.user))
+    if (fetchGetAppList.status === 200) props.dispatch(setAppList(fetchGetAppList.json))
+
+    const fetchGetContentTypeList = await props.dispatch(getContentTypeList(props.user))
+    if (fetchGetContentTypeList.status === 200) props.dispatch(setContentTypeList(fetchGetContentTypeList.json))
+  }
+
+  loadWorkspaceList = async () => {
+    const { props } = this
+
+    const fetchGetWorkspaceList = await props.dispatch(getWorkspaceList(props.user))
+
+    if (fetchGetWorkspaceList.status === 200) {
+      this.setState({workspaceListLoaded: true})
+
+      props.dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+
+      const idWorkspaceToOpen = (() =>
+        props.match && props.match.params.idws !== undefined && !isNaN(props.match.params.idws)
+          ? parseInt(props.match.params.idws)
+          : fetchGetWorkspaceList.json[0].workspace_id
+      )()
+
+      props.dispatch(setWorkspaceListIsOpenInSidebar(idWorkspaceToOpen, true))
+    }
+  }
+
   handleRemoveFlashMessage = msg => this.props.dispatch(removeFlashMessage(msg))
 
   render () {
@@ -85,61 +121,55 @@ class Tracim extends React.Component {
         <Header />
         <FlashMessage flashMessage={props.flashMessage} removeFlashMessage={this.handleRemoveFlashMessage} t={props.t} />
 
-        <div className='tracim__content'>
-          <Route path={PAGE.LOGIN} component={Login} />
-
-          <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
-            }
-          }} />
-
-          <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 // @FIXME this needs to be handled in case of new user that has no workspace
-                : <Redirect to={{pathname: PAGE.WORKSPACE.DASHBOARD(props.workspaceList[0].id), state: {from: props.location}}} />
-              } />
-
-              <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
-                <Redirect to={{pathname: PAGE.WORKSPACE.CONTENT_LIST(props2.match.params.idws), 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} />
-            </div>
-          } />
-
-          <Route path={PAGE.ACCOUNT} render={() =>
-            <div className='sidebarpagecontainer'>
-              <Sidebar />
+        <div className='sidebarpagecontainer'>
+          <Sidebar />
+
+          <div className='tracim__content'>
+            <Route path={PAGE.LOGIN} component={Login} />
+
+            <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
+              }
+            }} />
+
+            <Route path='/workspaces/:idws?' render={() => // Workspace Router
+              <div>
+                <Route exact path={PAGE.WORKSPACE.ROOT} render={() => props.workspaceList.length === 0 // handle '/' and redirect to first workspace
+                  ? null // @FIXME this needs to be handled in case of new user that has no workspace
+                  : <Redirect to={{pathname: PAGE.WORKSPACE.DASHBOARD(props.workspaceList[0].id), state: {from: props.location}}} />
+                } />
+
+                <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
+                  <Redirect to={{pathname: PAGE.WORKSPACE.CONTENT_LIST(props2.match.params.idws), 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} />
+              </div>
+            } />
+
+            <Route path={PAGE.ACCOUNT} render={() =>
               <Account />
-            </div>
-          } />
-
-          <Route path={PAGE.ADMIN.ROOT} render={() =>
-            <div className='sidebarpagecontainer'>
-              <Sidebar />
+            } />
 
+            <Route path={PAGE.ADMIN.ROOT} render={() =>
               <AppFullscreenRouter />
-            </div>
-          } />
+            } />
 
-          <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
+            <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
-          <div id='appFeatureContainer' />
-          <div id='popupCreateContentContainer' />
+            <div id='appFeatureContainer' />
+            <div id='popupCreateContentContainer' />
+          </div>
         </div>
-
       </div>
     )
   }

frontend/src/css/Generic.styl

@@ -8,6 +8,7 @@ a
   height 100%
   &__content
     height 100%
+    width 100%
 
 .btn-primary
   background-color thirdColor