added colored debug msg + fixed double event sometimes emited

dist/index.html

@@ -48,7 +48,7 @@
       }
 
       GLOBAL_renderApp = app => {
-        console.log('GLOBAL_renderApp', app)
+        console.log('%cGLOBAL_renderApp', 'color: #5cebeb', app)
 
         const selectedApp = getSelectedApp(app.config.slug)
 
@@ -63,13 +63,13 @@
       }
 
       GLOBAL_renderCreateContentApp = app => {
-        console.log('GLOBAL_renderCreateContentApp', app)
+        console.log('%cGLOBAL_renderCreateContentApp', 'color: #5cebeb', app)
 
         getSelectedApp(app.config.slug).renderPopupCreation(app)
       }
 
       GLOBAL_dispatchEvent = ({ type, data }) => {
-        console.log('GLOBAL_dispatchEvent', type, data)
+        console.log('%cGLOBAL_dispatchEvent', 'color: #fff', type, data)
 
         const event = new CustomEvent('appCustomEvent', { detail: { type, data } })
         document.dispatchEvent(event)
@@ -78,11 +78,11 @@
       GLOBAL_eventReducer = ({ detail: { type, data } }) => {
         switch (type) {
           case 'hide_popupCreateContent':
-            console.log('GLOBAL_eventReducer', type, data)
+            console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
             getSelectedApp(data.name).unmountApp('popupCreateContentContainer')
             break
           case 'unmount_app':
-            console.log('GLOBAL_eventReducer', type, data)
+            console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
             if (prevSelectedApp.name === '') return
 
             prevSelectedApp.unmountApp('appContainer')

src/container/OpenContentApp.jsx

@@ -18,7 +18,7 @@ export class OpenContentApp extends React.Component {
         type: match.params.type
       }
 
-      console.log('contentToOpen', contentToOpen)
+      console.log('%c<OpenContentApp> contentToOpen', 'color: #dcae84', contentToOpen)
 
       if (appOpenedType === contentToOpen.type) { // app already open
         GLOBAL_dispatchEvent({
@@ -40,13 +40,13 @@ export class OpenContentApp extends React.Component {
   }
 
   componentDidMount () {
-    console.log('OpenContentApp did Mount', this.props)
+    console.log('%c<OpenContentApp> did Mount', 'color: #dcae84', this.props)
 
     this.openContentApp()
   }
 
   componentDidUpdate () {
-    console.log('OpenContentApp did Update', this.props)
+    console.log('%c<OpenContentApp> did Update', 'color: #dcae84', this.props)
 
     this.openContentApp()
   }

src/container/Sidebar.jsx

@@ -22,7 +22,7 @@ class Sidebar extends React.Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
-    console.log('<Sidebar> Did Update')
+    // console.log('%c<Sidebar> Did Update', 'color: #c17838')
     if (this.props.match.params.idws === undefined || isNaN(this.props.match.params.idws)) return
 
     const newWorkspaceId = parseInt(this.props.match.params.idws)

src/container/WorkspaceContent.jsx

@@ -46,15 +46,20 @@ class WorkspaceContent extends React.Component {
     document.addEventListener('appCustomEvent', this.customEventReducer)
   }
 
-  customEventReducer = ({ detail: { type, data } }) => {
+  customEventReducer = async ({ detail: { type, data } }) => {
     switch (type) {
+      case 'refreshContentList':
+        console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', type, data)
+        this.loadContentList(this.state.workspaceIdInUrl)
+        break
+
       case 'openContentUrl':
-        console.log('<WorkspaceContent>', type, data)
+        console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', 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
+        console.log('%c<WorkspaceContent> Custom event', 'color: #28a745', type, data, this.state.workspaceIdInUrl)
         this.props.history.push(PAGE.WORKSPACE.CONTENT_LIST(this.state.workspaceIdInUrl))
         this.setState({appOpenedType: false})
         break
@@ -63,9 +68,9 @@ class WorkspaceContent extends React.Component {
 
   async componentDidMount () {
     const { workspaceIdInUrl } = this.state
-    const { user, workspaceList, app, contentType, match, location, dispatch } = this.props
+    const { user, workspaceList, app, contentType, match, dispatch } = this.props
 
-    console.log('<WorkspaceContent> componentDidMount')
+    console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')
 
     if (app.length === 0) {
       const fetchGetAppList = await dispatch(getAppList(user))
@@ -95,30 +100,21 @@ class WorkspaceContent extends React.Component {
 
     if (wsToLoad === null) return // ws already loaded
 
-    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'))
+    this.loadContentList(wsToLoad)
   }
 
   async componentDidUpdate (prevProps, prevState) {
-    const { user, match, location, dispatch } = this.props
-
-    console.log('<WorkspaceContent> componentDidUpdate')
+    console.log('%c<WorkspaceContent> componentDidUpdate', 'color: #c17838')
 
     if (this.state.workspaceIdInUrl === null) return
 
-    const idWorkspace = parseInt(match.params.idws)
+    const idWorkspace = parseInt(this.props.match.params.idws)
 
     if (isNaN(idWorkspace)) return
 
     if (prevState.workspaceIdInUrl !== idWorkspace) {
       this.setState({workspaceIdInUrl: idWorkspace})
-
-      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'))
+      this.loadContentList(idWorkspace)
     }
 
     // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
@@ -126,36 +122,46 @@ class WorkspaceContent extends React.Component {
 
   componentWillUnmount () {
     this.props.emitEventApp('unmount_app')
+    document.removeEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  loadContentList = async idWorkspace => {
+    const { user, location, dispatch } = this.props
+
+    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'))
   }
 
   handleClickContentItem = content => {
-    console.log('content clicked', content)
+    console.log('%c<WorkspaceContent> content clicked', 'color: #c17838', content)
     this.props.history.push(`/workspaces/${content.idWorkspace}/${content.type}/${content.id}`)
   }
 
   handleClickEditContentItem = (e, content) => {
     e.stopPropagation()
-    console.log('edit nyi', content)
+    console.log('%c<WorkspaceContent> edit nyi', 'color: #c17838', content)
   }
 
   handleClickMoveContentItem = (e, content) => {
     e.stopPropagation()
-    console.log('move nyi', content)
+    console.log('%c<WorkspaceContent> move nyi', 'color: #c17838', content)
   }
 
   handleClickDownloadContentItem = (e, content) => {
     e.stopPropagation()
-    console.log('download nyi', content)
+    console.log('%c<WorkspaceContent> download nyi', 'color: #c17838', content)
   }
 
   handleClickArchiveContentItem = (e, content) => {
     e.stopPropagation()
-    console.log('archive nyi', content)
+    console.log('%c<WorkspaceContent> archive nyi', 'color: #c17838', content)
   }
 
   handleClickDeleteContentItem = (e, content) => {
     e.stopPropagation()
-    console.log('delete nyi', content)
+    console.log('%c<WorkspaceContent> delete nyi', 'color: #c17838', content)
   }
 
   handleClickFolder = folderId => {

src/css/Generic.styl

@@ -64,7 +64,7 @@ a
   min-height calc(100% - 50px)
 
 .pageWrapperGeneric
-  width calc(100% - 300px) // 300px => width of the sidebar + margin
+  width 100%
   &__header
     display flex
   &__content