app now handles multi users

dist/index.html

@@ -42,6 +42,8 @@
             return appThread
           case 'file':
             return appFile
+          default:
+            return null
         }
       }
 
@@ -74,13 +76,15 @@
       }
 
       GLOBAL_eventReducer = ({ detail: { type, data } }) => {
-        console.log('GLOBAL_eventReducer', type, data)
-
         switch (type) {
           case 'hide_popupCreateContent':
+            console.log('GLOBAL_eventReducer', type, data)
             getSelectedApp(data.name).unmountApp('popupCreateContentContainer')
             break
           case 'unmount_app':
+            console.log('GLOBAL_eventReducer', type, data)
+            if (prevSelectedApp.name === '') return
+
             prevSelectedApp.unmountApp('appContainer')
             prevSelectedApp.unmountApp('popupCreateContentContainer')
             prevSelectedApp.isRendered = false

package.json

@@ -28,6 +28,7 @@
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.5",
     "i18next": "^10.5.0",
+    "js-cookie": "^2.2.0",
     "prop-types": "^15.6.0",
     "query-string": "^6.1.0",
     "react": "^16.0.0",

src/action-creator.async.js

@@ -97,8 +97,8 @@ export const postUserLogin = (login, password, rememberMe) => async dispatch =>
       method: 'POST',
       body: JSON.stringify({
         email: login,
-        password: password,
-        remember_me: rememberMe
+        password: password
+        // remember_me: rememberMe
       })
     },
     actionName: USER_LOGIN,
@@ -118,11 +118,14 @@ export const postUserLogout = () => async dispatch => {
   })
 }
 
-export const getUserIsConnected = () => async dispatch => {
+export const getUserIsConnected = user => async dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/sessions/whoami`, // FETCH_CONFIG.apiUrl
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
     actionName: USER_CONNECTED,
@@ -143,11 +146,14 @@ export const getUserRole = user => async dispatch => {
   if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
-export const getWorkspaceList = idUser => dispatch => {
+export const getWorkspaceList = user => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/users/${idUser}/workspaces`,
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
     actionName: WORKSPACE_LIST,
@@ -155,11 +161,14 @@ export const getWorkspaceList = idUser => dispatch => {
   })
 }
 
-export const getWorkspaceContentList = (idWorkspace, idParent) => dispatch => {
+export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents?parent_id=${idParent}`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
     actionName: WORKSPACE,
@@ -192,23 +201,31 @@ export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
   if (fetchGetFolderContent.status === 200) dispatch(setFolderData(idFolder, fetchGetFolderContent.json))
 }
 
-export const getAppList = () => dispatch => {
+export const getAppList = user => dispatch => {
+  console.log(user)
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/system/applications`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
-      method: 'GET'
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET',
+      'Authorization': 'Basic ' + user.auth
     },
     actionName: APP_LIST,
     dispatch
   })
 }
 
-export const getContentTypeList = () => dispatch => {
+export const getContentTypeList = user => dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/system/content_types`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
     actionName: CONTENT_TYPE_LIST,

src/container/Dashboard.jsx

@@ -30,17 +30,17 @@ class Dashboard extends React.Component {
     console.log('<Dashboard> componentDidMount')
 
     if (app.length === 0) {
-      const fetchGetAppList = await dispatch(getAppList())
+      const fetchGetAppList = await dispatch(getAppList(user))
       if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
     }
 
     if (contentType.length === 0) {
-      const fetchGetContentTypeList = await dispatch(getContentTypeList())
+      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
       if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
     }
 
     if (user.user_id !== -1 && workspaceList.length === 0) {
-      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user.user_id))
+      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
 
       if (fetchGetWorkspaceList.status === 200) {
         dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))

src/container/Header.jsx

@@ -20,6 +20,7 @@ import {
 import {
   postUserLogout
 } from '../action-creator.async.js'
+import Cookies from 'js-cookie'
 
 class Header extends React.Component {
   handleClickLogo = () => {}
@@ -42,8 +43,14 @@ class Header extends React.Component {
     const { dispatch, t } = this.props
 
     const fetchPostUserLogout = await dispatch(postUserLogout())
-    if (fetchPostUserLogout.status === 204) dispatch(setUserDisconnected())
-    else dispatch(newFlashMessage(t('Login.logout_error', 'danger')))
+    if (fetchPostUserLogout.status === 204) {
+      Cookies.remove('user_login')
+      Cookies.remove('user_auth')
+
+      dispatch(setUserDisconnected())
+    } else {
+      dispatch(newFlashMessage(t('Login.logout_error', 'danger')))
+    }
   }
 
   render () {

src/container/Login.jsx

@@ -9,14 +9,15 @@ import Card from '../component/common/Card/Card.jsx'
 import CardHeader from '../component/common/Card/CardHeader.jsx'
 import CardBody from '../component/common/Card/CardBody.jsx'
 import InputGroupText from '../component/common/Input/InputGroupText.jsx'
-import InputCheckbox from '../component/common/Input/InputCheckbox.jsx'
+// import InputCheckbox from '../component/common/Input/InputCheckbox.jsx'
 import Button from '../component/common/Input/Button.jsx'
 import LoginBtnForgotPw from '../component/Login/LoginBtnForgotPw.jsx'
 import {
   newFlashMessage,
   setUserConnected
 } from '../action-creator.sync.js'
-import {PAGE} from '../helper.js'
+import { PAGE } from '../helper.js'
+import Cookies from 'js-cookie'
 
 class Login extends React.Component {
   constructor (props) {
@@ -43,9 +44,18 @@ class Login extends React.Component {
     const { inputLogin, inputPassword, inputRememberMe } = this.state
 
     const fetchPostUserLogin = await dispatch(postUserLogin(inputLogin.value, inputPassword.value, inputRememberMe))
+    const userAuth = btoa(`${inputLogin.value}:${inputPassword.value}`)
 
     if (fetchPostUserLogin.status === 200) {
-      dispatch(setUserConnected({...fetchPostUserLogin.json, logged: true}))
+      dispatch(setUserConnected({
+        ...fetchPostUserLogin.json,
+        auth: userAuth,
+        logged: true
+      }))
+
+      Cookies.set('user_login', inputLogin.value)
+      Cookies.set('user_auth', userAuth)
+
       history.push(PAGE.HOME)
     } else if (fetchPostUserLogin.status === 400) {
       dispatch(newFlashMessage(t('Login.fail'), 'danger'))
@@ -95,6 +105,7 @@ class Login extends React.Component {
 
                       <div className='row mt-4 mb-4'>
                         <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                          {/*
                           <InputCheckbox
                             parentClassName='connection__form__rememberme'
                             customClass=''
@@ -102,6 +113,7 @@ class Login extends React.Component {
                             checked={this.state.inputRememberMe}
                             onChange={this.handleChangeRememberMe}
                           />
+                          */}
                         </div>
 
                         <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>

src/container/OpenContentApp.jsx

@@ -27,7 +27,7 @@ export class OpenContentApp extends React.Component {
         })
       } else { // open another app
         // if another app is already visible, hide it
-        if (appOpenedType !== false) GLOBAL_dispatchEvent(`${appOpenedType}_hideApp`)
+        if (appOpenedType !== false) GLOBAL_dispatchEvent({type: `${appOpenedType}_hideApp`})
         // open app
         renderApp(
           contentType.find(ct => ct.slug === contentToOpen.type),

src/container/Sidebar.jsx

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

src/container/Tracim.jsx

@@ -10,9 +10,7 @@ import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import WIPcomponent from './WIPcomponent.jsx'
 import {
-  Route,
-  withRouter,
-  Switch
+  Route, withRouter, Switch
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
 import { PAGE } from '../helper.js'
@@ -23,15 +21,28 @@ import {
   removeFlashMessage,
   setUserConnected
 } from '../action-creator.sync.js'
+import Cookies from 'js-cookie'
 
 class Tracim extends React.Component {
   async componentDidMount () {
     const { dispatch } = this.props
 
-    const fetchGetUserIsConnected = await dispatch(getUserIsConnected())
+    const userFromCookies = {
+      email: Cookies.get('user_login'),
+      auth: Cookies.get('user_auth')
+    }
+
+    if (userFromCookies.email === undefined || userFromCookies.auth === undefined) return
+
+    const fetchGetUserIsConnected = await dispatch(getUserIsConnected(userFromCookies))
     switch (fetchGetUserIsConnected.status) {
       case 200:
-        dispatch(setUserConnected({...fetchGetUserIsConnected.json, logged: true})); break
+        dispatch(setUserConnected({
+          ...fetchGetUserIsConnected.json,
+          auth: userFromCookies.auth,
+          logged: true
+        }))
+        break
       case 401:
         dispatch(setUserConnected({logged: false})); break
       default:
@@ -42,34 +53,30 @@ class Tracim extends React.Component {
   handleRemoveFlashMessage = msg => this.props.dispatch(removeFlashMessage(msg))
 
   render () {
-    const { flashMessage, user, t } = this.props
+    const { flashMessage, t } = this.props
 
     return (
       <div className='tracim'>
         <Header />
         <FlashMessage flashMessage={flashMessage} removeFlashMessage={this.handleRemoveFlashMessage} t={t} />
 
-        { user.logged === undefined
-          ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
-          : (
-            <div className='tracim__content'>
-              <Route path={PAGE.LOGIN} component={Login} />
+        <div className='tracim__content'>
+          <Route path={PAGE.LOGIN} component={Login} />
+
+          <PrivateRoute exact path='/' component={WorkspaceContent} />
 
-              <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>
 
-              <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={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
-              <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
-              <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
+          <Footer />
+        </div>
 
-              <Footer />
-            </div>
-          )
-        }
       </div>
     )
   }

src/container/WorkspaceContent.jsx

@@ -47,14 +47,16 @@ class WorkspaceContent extends React.Component {
   }
 
   customEventReducer = ({ detail: { type, data } }) => {
-    console.log(type, data)
     switch (type) {
       case 'openContentUrl':
+        console.log('<WorkspaceContent>', type, data)
         this.props.history.push(PAGE.WORKSPACE.CONTENT(data.idWorkspace, data.contentType, data.idContent))
         break
       case 'appClosed':
+        console.log('<WorkspaceContent>', type, data, this.state.workspaceIdInUrl)
+        if (this.state.workspaceIdInUrl === null) return // @FIXME: find out why when app is closed, workspaceInUrl is null then has it's proper value
         this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(this.state.workspaceIdInUrl))
-        this.setState({appOpened: false})
+        this.setState({appOpenedType: false})
         break
     }
   }
@@ -66,12 +68,12 @@ class WorkspaceContent extends React.Component {
     console.log('<WorkspaceContent> componentDidMount')
 
     if (app.length === 0) {
-      const fetchGetAppList = await dispatch(getAppList())
+      const fetchGetAppList = await dispatch(getAppList(user))
       if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
     }
 
     if (contentType.length === 0) {
-      const fetchGetContentTypeList = await dispatch(getContentTypeList())
+      const fetchGetContentTypeList = await dispatch(getContentTypeList(user))
       if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
     }
 
@@ -79,7 +81,7 @@ class WorkspaceContent extends React.Component {
     if (match.params.idws !== undefined) wsToLoad = match.params.idws
 
     if (user.user_id !== -1 && workspaceList.length === 0) {
-      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user.user_id))
+      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user))
 
       if (fetchGetWorkspaceList.status === 200) {
         dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
@@ -93,14 +95,14 @@ class WorkspaceContent extends React.Component {
 
     if (wsToLoad === null) return // ws already loaded
 
-    const wsContent = await dispatch(getWorkspaceContentList(wsToLoad, 0))
+    const wsContent = await dispatch(getWorkspaceContentList(user, wsToLoad, 0))
 
     if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
   async componentDidUpdate (prevProps, prevState) {
-    const { match, location, dispatch } = this.props
+    const { user, match, location, dispatch } = this.props
 
     console.log('<WorkspaceContent> componentDidUpdate')
 
@@ -113,7 +115,7 @@ class WorkspaceContent extends React.Component {
     if (prevState.workspaceIdInUrl !== idWorkspace) {
       this.setState({workspaceIdInUrl: idWorkspace})
 
-      const wsContent = await dispatch(getWorkspaceContentList(idWorkspace, 0))
+      const wsContent = await dispatch(getWorkspaceContentList(user, idWorkspace, 0))
 
       if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
       else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
@@ -173,7 +175,7 @@ class WorkspaceContent extends React.Component {
   handleUpdateAppOpenedType = openedAppType => this.setState({appOpenedType: openedAppType})
 
   render () {
-    const { workspaceContent, contentType, match } = this.props
+    const { workspaceContent, contentType } = this.props
 
     const filterWorkspaceContent = (contentList, filter) => {
       return filter.length === 0
@@ -189,14 +191,13 @@ class WorkspaceContent extends React.Component {
     const filteredWorkspaceContent = workspaceContent.length > 0
       ? filterWorkspaceContent(workspaceContent, urlFilter ? [urlFilter] : [])
       : []
-    console.log('workspaceContent => filteredWorkspaceContent', filteredWorkspaceContent, 'urlFilter', urlFilter)
 
     return (
       <div className='sidebarpagecontainer'>
         <Sidebar />
 
         <OpenContentApp
-          idWorkspace={match.params.idws}
+          idWorkspace={this.state.workspaceIdInUrl}
           appOpenedType={this.state.appOpenedType}
           updateAppOpenedType={this.handleUpdateAppOpenedType}
         />

src/helper.js

@@ -1,8 +1,7 @@
 export const FETCH_CONFIG = {
   headers: {
     'Accept': 'application/json',
-    'Content-Type': 'application/json',
-    'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    'Content-Type': 'application/json'
   },
   apiUrl: 'http://localhost:6543/api/v2',
   mockApiUrl: 'http://localhost:3001'

src/reducer/user.js

@@ -6,7 +6,7 @@ import {
 
 const defaultUser = {
   user_id: -1,
-  logged: undefined, // undefined avoid to be redirected to /login while whoami ep has not responded yet
+  logged: false, // undefined avoid to be redirected to /login while whoami ep has not responded yet
   timezone: '',
   profile: {
     id: 1,