refactor for Route names + removed unused reducer + added lib queryString

package.json

@@ -29,6 +29,7 @@
     "file-loader": "^1.1.5",
     "i18next": "^10.5.0",
     "prop-types": "^15.6.0",
+    "query-string": "^6.1.0",
     "react": "^16.0.0",
     "react-animate-height": "^0.10.10",
     "react-dom": "^16.0.0",

src/action-creator.async.js

@@ -169,14 +169,13 @@ export const getWorkspaceList = (userId, workspaceIdToOpen) => async dispatch =>
   }
 }
 
-export const getWorkspaceContent = (workspaceId, filterStr) => async dispatch => {
-  const fetchGetWorkspaceContent = await fetchWrapper({
+export const getWorkspaceContent = workspaceId => dispatch => {
+  return fetchWrapper({
     url: `${FETCH_CONFIG.mockApiUrl}/workspace/${workspaceId}`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: WORKSPACE,
     dispatch
   })
-  if (fetchGetWorkspaceContent.status === 200) dispatch(setWorkspaceData(fetchGetWorkspaceContent.json, filterStr))
 }
 
 export const getFolderContent = (workspaceId, folderId) => async dispatch => {

src/action-creator.sync.js

@@ -33,10 +33,6 @@ export const WORKSPACE_LIST = 'WorkspaceList'
 export const updateWorkspaceListData = workspaceList => ({ type: `Update/${WORKSPACE_LIST}`, workspaceList })
 export const setWorkspaceListIsOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `Set/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
 
-export const FILE_CONTENT = 'FileContent'
-export const setActiveFileContentActive = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
-export const setActiveFileContentHide = () => ({ type: `Set/${FILE_CONTENT}/Hide` })
-
 export const APP_LIST = 'App/List'
 export const setAppList = appList => ({ type: `Set/${APP_LIST}`, appList })
 

src/component/Header/MenuActionListItem/MenuProfil.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
-import { PAGE_NAME } from '../../../helper.js'
+import { PAGE } from '../../../helper.js'
 
 const MenuProfil = props => {
   return props.user.logged
@@ -15,7 +15,7 @@ const MenuProfil = props => {
             </div>
           </button>
           <div className='profilgroup__setting dropdown-menu' aria-labelledby='dropdownMenuButton'>
-            <Link className='setting__link dropdown-item' to={PAGE_NAME.ACCOUNT}>Mon compte</Link>
+            <Link className='setting__link dropdown-item' to={PAGE.ACCOUNT}>Mon compte</Link>
             {/* <div className='setting__link dropdown-item'>Mot de passe</div> */}
             <div className='setting__link dropdown-item' onClick={props.onClickLogout}>Se déconnecter</div>
           </div>

src/component/Sidebar/WorkspaceListItem.jsx

@@ -33,7 +33,7 @@ const WorkspaceListItem = props => {
         >
           <li
             className='sidebar__navigation__workspace__item__submenu__dropdown'
-            onClick={() => props.onClickAllContent(props.wsId)}
+            onClick={() => props.onClickAllContent(props.idWs)}
           >
             <div className='dropdown__icon'>
               <i className='fa fa-th' />
@@ -89,7 +89,7 @@ const WorkspaceListItem = props => {
           { Object.keys(props.app).map(a =>
             <li
               className={classnames('sidebar__navigation__workspace__item__submenu__dropdown', {'activeFilter': props.activeFilterList.includes(a)})}
-              onClick={() => props.onClickContentFilter(props.wsId, a)}
+              onClick={() => props.onClickContentFilter(props.idWs, a)}
               key={a}
             >
               <div className='dropdown__icon'>

src/container/Login.jsx

@@ -16,7 +16,7 @@ import {
   newFlashMessage,
   setUserConnected
 } from '../action-creator.sync.js'
-import {PAGE_NAME} from '../helper.js'
+import {PAGE} from '../helper.js'
 
 class Login extends React.Component {
   constructor (props) {
@@ -46,7 +46,7 @@ class Login extends React.Component {
 
     if (fetchPostUserLogin.status === 200) {
       dispatch(setUserConnected({...fetchPostUserLogin.json, logged: true}))
-      history.push(PAGE_NAME.HOME)
+      history.push(PAGE.HOME)
     } else if (fetchPostUserLogin.status === 400) {
       dispatch(newFlashMessage(t('Login.fail'), 'danger'))
     }

src/container/Sidebar.jsx

@@ -9,7 +9,7 @@ import {
   setWorkspaceListIsOpenInSidebar,
   updateWorkspaceFilter
 } from '../action-creator.sync.js'
-import { PAGE_NAME } from '../helper.js'
+import { PAGE } from '../helper.js'
 
 class Sidebar extends React.Component {
   constructor (props) {
@@ -38,22 +38,22 @@ class Sidebar extends React.Component {
     user.id !== -1 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id, newWorkspaceId))
   }
 
-  handleClickWorkspace = (wsId, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(wsId, newIsOpenInSidebar))
+  handleClickWorkspace = (idWs, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(idWs, newIsOpenInSidebar))
 
-  handleClickAllContent = wsId => {
+  handleClickAllContent = idWs => {
     this.props.dispatch(updateWorkspaceFilter([]))
 
-    this.props.history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}`)
+    this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(idWs))
   }
 
-  handleClickContentFilter = (wsId, filter) => {
+  handleClickContentFilter = (idWs, filter) => {
     const { workspace, history, dispatch } = this.props
 
     const newFilter = workspace.filter.includes(filter) ? [] : [filter] // use an array to allow multiple filters (NYI)
 
     dispatch(updateWorkspaceFilter(newFilter))
 
-    history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}/${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
+    history.push(`${PAGE.WORKSPACE.CONTENT_LIST(idWs)}?type=${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
   }
 
   handleClickToggleSidebar = () => this.setState(prev => ({sidebarClose: !prev.sidebarClose}))
@@ -74,7 +74,7 @@ class Sidebar extends React.Component {
               { workspaceList.map((ws, i) =>
                 <WorkspaceListItem
                   number={++i}
-                  wsId={ws.id}
+                  idWs={ws.id}
                   name={ws.title}
                   app={app}
                   lang={activeLang}

src/container/Tracim.jsx

@@ -14,7 +14,7 @@ import {
   withRouter
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
-import { PAGE_NAME } from '../helper.js'
+import { PAGE } from '../helper.js'
 import {
   getLangList,
   getUserIsConnected
@@ -55,12 +55,13 @@ class Tracim extends React.Component {
           ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
           : (
             <div className='tracim__content'>
-              <Route path={PAGE_NAME.LOGIN} component={Login} />
+              <Route path={PAGE.LOGIN} component={Login} />
 
-              <PrivateRoute exact path={PAGE_NAME.HOME} component={WorkspaceContent} />
-              <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws/:filter?`} component={WorkspaceContent} />
-              <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
-              <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
+              <PrivateRoute exact path={PAGE.HOME} component={WorkspaceContent} />
+              <PrivateRoute path={PAGE.WORKSPACE.CONTENT_LIST(':idws')} component={WorkspaceContent} />
+              <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':idcts')} component={WorkspaceContent} />
+              <PrivateRoute exact path={PAGE.ACCOUNT} component={Account} />
+              <PrivateRoute exact path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
               <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
               <Footer />

src/container/WorkspaceContent.jsx

@@ -14,33 +14,41 @@ import {
   getWorkspaceContent,
   getFolderContent
 } from '../action-creator.async.js'
+import {newFlashMessage, setWorkspaceData} from '../action-creator.sync.js'
+import { PAGE } from '../helper.js'
+
+const qs = require('query-string')
 
 class WorkspaceContent extends React.Component {
-  componentDidMount () {
-    const { workspaceList, app, match, dispatch } = this.props
+  async componentDidMount () {
+    const { workspaceList, app, match, location, dispatch } = this.props
 
-    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws, match.params.filter))
-    else if (workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id, match.params.filter)) // load first ws if none specified
+    if (Object.keys(app).length === 0) await dispatch(getAppList())
 
-    if (Object.keys(app).length === 0) dispatch(getAppList())
-  }
+    const wsToLoad = (() => {
+      if (match.params.idws !== undefined) return match.params.idws
+      if (workspaceList.length > 0) return workspaceList[0].id // load first ws if none specified
+      return null
+    })()
+
+    if (wsToLoad === null) return
 
-  componentDidUpdate (prevProps) {
-    const { workspace, workspaceList, match, dispatch } = this.props
+    const wsContent = await dispatch(getWorkspaceContent(wsToLoad))
+    if (wsContent.status === 200) {
+      dispatch(setWorkspaceData(wsContent.json, qs.parse(location.search).type))
 
-    // if a workspace is already loaded and the idws in url hasn't changed, do nothing
-    if (workspace.id !== -1 && prevProps.match.params.idws === match.params.idws) return
+      if (match.params.idcts) { // if a content id is in url, open it
+        const contentToOpen = wsContent.json.content.find(wsc => wsc.id === parseInt(match.params.idcts))
+        if (contentToOpen === undefined) return
 
-    // if the idws in url has changed, load the new workspace
-    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws, match.params.filter))
-    // else bellow is for loading url PAGE_NAME.HOME (without an idws), when workspaceList is loaded, load the first workspace
-    else if (workspace.id === -1 && workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id))
+        this.handleClickContentItem(contentToOpen)
+      }
+    } else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
   handleClickContentItem = content => {
+    this.props.history.push(`${PAGE.WORKSPACE.CONTENT(content.workspace_id, content.id)}${this.props.location.search}`)
     this.props.renderApp(this.props.app[content.type], this.props.user, {...content, workspace: this.props.workspace})
-    // Côme - 2018/03/08 - line bellow is useless because we cannot call the reducer again when hiding app since the call comes from the app
-    // dispatch(setActiveFileContentActive(content))
   }
 
   handleClickEditContentItem = (e, content) => {

src/helper.js

@@ -7,11 +7,20 @@ export const FETCH_CONFIG = {
   mockApiUrl: 'http://localhost:3001'
 }
 
-export const PAGE_NAME = {
+export const PAGE = {
   HOME: '/',
-  WS_CONTENT: '/workspace',
+  WORKSPACE: {
+    DASHBOARD: idws => `/workspace/${idws}`,
+    NEW: '/workspace/new',
+    CALENDAR: idws => `/workspace/${idws}/apps/calendar`,
+    CONTENT_LIST: idws => `/workspace/${idws}/apps/contents`,
+    CONTENT: (idws, idcts) => `/workspace/${idws}/apps/contents/${idcts}`,
+    CONTENT_NEW: (idws, ctstype) => `/workspace/${idws}/apps/contents/${ctstype}/new`,
+    CONTENT_EDIT: (idws, idcts) => `/workspace/${idws}/apps/contents/${idcts}/edit`,
+    CONTENT_TITLE_EDIT: (idws, idcts) => `/workspace/${idws}/apps/contents/${idcts}/title/edit`,
+    ADMIN: idws => `/workspace/${idws}/admin`
+  },
   LOGIN: '/login',
-  DASHBOARD: '/dashboard',
   ACCOUNT: '/account'
 }
 

src/reducer/activeFileContent.js

@@ -1,19 +0,0 @@
-import { FILE_CONTENT } from '../action-creator.sync.js'
-
-export default function activeFileContent (state = {
-  display: false,
-  type: '',
-  title: '',
-  status: ''
-}, action) {
-  switch (action.type) {
-    case `Set/${FILE_CONTENT}/Active`:
-      return {...action.file, display: true}
-
-    case `Set/${FILE_CONTENT}/Hide`:
-      return {...state, display: false}
-
-    default:
-      return state
-  }
-}

src/reducer/root.js

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