refactored app interface to allow popupCreateContent

dist/index.html

@@ -40,22 +40,24 @@
     <script type='text/javascript'>
       let prevSelectedApp = {name: ''} // default value
 
+      getSelectedApp = name => {
+        switch (name) {
+          case 'PageHtml':
+            return appPageHtml
+          case 'Thread':
+            return appThread
+          case 'File':
+            return appFile
+        }
+      }
+
       GLOBAL_renderApp = app => {
-        console.log('GLOBAL_renderApp => ', app)
-        const selectedApp = (() => {
-          switch (app.config.name) {
-            case 'PageHtml':
-              return appPageHtml
-            case 'Thread':
-              return appThread
-            case 'File':
-              console.log('spoted')
-              return appFile
-          }
-        })()
+        console.log('GLOBAL_renderApp', app)
+
+        const selectedApp = getSelectedApp(app.config.name)
 
         if (selectedApp.isRendered) {
-          GLOBAL_dispatchEvent(`${app.config.name}_showApp`, app)
+          GLOBAL_dispatchEvent({type: `${app.config.name}_showApp`, data: app})
         } else {
           selectedApp.renderApp(app)
           selectedApp.isRendered = true
@@ -64,21 +66,29 @@
         }
       }
 
-      GLOBAL_dispatchEvent = (type, data) => {
-        var event = new CustomEvent('appCustomEvent', {detail: {type, data}})
+      GLOBAL_renderCreateContentApp = app => {
+        console.log('GLOBAL_renderCreateContentApp', app)
+
+        getSelectedApp(app.config.name).renderPopupCreation(app)
+      }
+
+      GLOBAL_dispatchEvent = ({ type, data }) => {
+        console.log('GLOBAL_dispatchEvent', type, data)
+
+        const event = new CustomEvent('appCustomEvent', { detail: { type, data } })
         document.dispatchEvent(event)
       }
 
-      GLOBAL_hideApp = appName => {
-        switch (appName) {
-          case 'PageHtml':
-            GLOBAL_dispatchEvent('PageHtml_hideApp', {}); break
-          case 'Thread':
-            GLOBAL_dispatchEvent('Thread_hideApp', {}); break
-          case 'File':
-            GLOBAL_dispatchEvent('File_hideApp', {}); break
+      GLOBAL_eventReducer = ({ detail: { type, data } }) => {
+        console.log('GLOBAL_eventReducer', type, data)
+
+        switch (type) {
+          case 'hide_popupCreateContent':
+            getSelectedApp(data.name).hideApp('popupCreateContentContainer')
+            break
         }
       }
+      document.addEventListener('appCustomEvent', GLOBAL_eventReducer)
     </script>
 
     <script type='text/javascript'>

package.json

@@ -60,6 +60,7 @@
       "fetch",
       "history",
       "GLOBAL_renderApp",
+      "GLOBAL_renderCreateContentApp",
       "GLOBAL_dispatchEvent",
       "GLOBAL_hideApp"
     ],

src/action-creator.async.js

@@ -15,8 +15,7 @@ import {
   WORKSPACE_LIST,
   FOLDER,
   setFolderData,
-  APP_LIST,
-  setAppList
+  APP_LIST
 } from './action-creator.sync.js'
 
 /*
@@ -87,7 +86,7 @@ export const getTimezone = () => async dispatch => {
 
 export const postUserLogin = (login, password, rememberMe) => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/login`,
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/login`, // FETCH_CONFIG.apiUrl
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'POST',
@@ -104,7 +103,7 @@ export const postUserLogin = (login, password, rememberMe) => async dispatch =>
 
 export const postUserLogout = () => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/logout`,
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/logout`, // FETCH_CONFIG.apiUrl
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'POST'
@@ -116,7 +115,7 @@ export const postUserLogout = () => async dispatch => {
 
 export const getUserIsConnected = () => async dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.mockApiUrl}/sessions/whoami`,
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/whoami`, // FETCH_CONFIG.apiUrl
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: USER_CONNECTED,
     dispatch
@@ -181,12 +180,11 @@ export const getFolderContent = (workspaceId, folderId) => async dispatch => {
   if (fetchGetFolderContent.status === 200) dispatch(setFolderData(folderId, fetchGetFolderContent.json))
 }
 
-export const getAppList = () => async dispatch => {
-  const fetchGetAppList = await fetchWrapper({
+export const getAppList = () => dispatch => {
+  return fetchWrapper({
     url: `${FETCH_CONFIG.mockApiUrl}/app/config`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: APP_LIST,
     dispatch
   })
-  if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
 }

src/appFactory.js

@@ -13,15 +13,25 @@ export function appFactory (WrappedComponent) {
       content
     })
 
-    emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)
+    renderCreateContentApp = (appConfig, user, folder) => GLOBAL_renderCreateContentApp({
+      loggedUser: user.logged ? user : {},
+      config: {
+        ...appConfig,
+        domContainer: 'popupCreateContentContainer',
+        apiUrl: FETCH_CONFIG.apiUrl,
+        mockApiUrl: FETCH_CONFIG.mockApiUrl
+      },
+      folder
+    })
 
-    hideApp = appName => GLOBAL_hideApp(appName)
+    emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)
 
     render () {
       return (
         <WrappedComponent
           {...this.props}
           renderApp={this.renderApp}
+          renderCreateContentApp={this.renderCreateContentApp}
           emitEventApp={this.emitEventApp}
           hideApp={this.hideApp}
         />

src/component/PopupCreateContent/PopupCreateContainer.jsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CardPopup from '../common/CardPopup/CardPopup.jsx'
+// import CardPopup from '../common/CardPopup/CardPopup.jsx'
+import { CardPopup } from 'tracim_lib'
 import GenericContent from './ContentType/GenericContent.jsx'
 import FileContent from './ContentType/FileContent.jsx'
 import WsContent from './ContentType/WsContent.jsx'
 
 require('./PopupCreateContainer.styl')
 
+console.log('cardPopp', CardPopup)
+console.log('Warning: PopupCreateContainer is deprecated')
+
 const PopupCreateContainer = props => {
   const FormCreateContent = (() => {
     switch (props.type) {

src/component/PopupCreateContent/README.md

@@ -0,0 +1,2 @@
+# DEPRECATED
+this folder is deprecated, every popup to create a new content is now handled by apps

src/component/Workspace/Folder.jsx

@@ -20,6 +20,7 @@ class Folder extends React.Component {
   }
 
   handleClickCreateContent = (e, folder, type) => {
+    e.preventDefault()
     e.stopPropagation() // because we have a link inside a link (togler and newFile)
     this.props.onClickCreateContent(folder, type)
   }

src/component/common/CardPopup/CardPopup.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-require('./CardPopup.styl')
-
-const CardPopup = props => {
-  return (
-    <div className={classnames(props.customClass, 'cardPopup')}>
-      <div className='cardPopup__container'>
-        <div className='cardPopup__header' />
-
-        <div className='nopadding'>
-          <div className='cardPopup__close' onClick={props.onClose}>
-            <i className='fa fa-times' />
-          </div>
-
-          <div className='cardPopup__body'>
-            { props.children }
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CardPopup
-
-CardPopup.propTypes = {
-  customClass: PropTypes.string,
-  onClose: PropTypes.func
-}
-
-CardPopup.defaultProps = {
-  customClass: 'defaultCustomClass',
-  onClose: () => {}
-}

src/component/common/CardPopup/CardPopup.styl

@@ -1,39 +0,0 @@
-@import '../../../css/Variable.styl'
-
-.cardPopup
-  position fixed
-  display flex
-  justify-content center
-  width 100%
-  z-index 10
-  &__container
-    margin-top 50px
-    border 0
-    border-radius 10px
-    width 800px
-    background lightGrey
-    box-shadow shadow-all
-  &__header
-    border-top-right-radius 10px
-    border-top-left-radius 10px
-    width 100%
-    height 8px
-  &__close
-    display flex
-    justify-content flex-end
-    margin 5px
-    cursor pointer
-  &__body
-    display flex
-    align-items center
-    margin 10px 0 25px 0
-    &__icon
-      padding 0 30px
-      font-size 40px
-    &__text
-      &__title
-        font-size 20px
-        font-weight 600
-      &__message
-        padding-right 20px
-        font-weight 500

src/container/WIPcomponent.jsx

@@ -1,17 +1,13 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import PopupCreateContainer from '../component/PopupCreateContent/PopupCreateContainer.jsx'
 import ProgressBar from './ProgressBar.jsx'
 import Home from './Home.jsx'
-import CardPopup from '../component/common/CardPopup/CardPopup.jsx'
 
 export class WIPcomponent extends React.Component {
   render () {
     const MyComponent = {
-      PopupCreateContainer,
       ProgressBar,
-      Home,
-      CardPopup
+      Home
     }
 
     // this.props.dispatch(newFlashMessage('TEST', 'info', 0))

src/container/WorkspaceContent.jsx

@@ -10,7 +10,6 @@ import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
-import PopupCreateContent from '../component/PopupCreateContent/PopupCreateContainer.jsx'
 import {
   getAppList,
   getWorkspaceContent,
@@ -18,7 +17,7 @@ import {
   getWorkspaceList
 } from '../action-creator.async.js'
 import {
-  newFlashMessage,
+  newFlashMessage, setAppList,
   setWorkspaceData,
   setWorkspaceListIsOpenInSidebar,
   updateWorkspaceListData
@@ -37,13 +36,29 @@ class WorkspaceContent extends React.Component {
       },
       workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null
     }
+
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  customEventReducer = ({ detail: { type, data } }) => {
+    switch (type) {
+      case 'openContentUrl':
+        this.props.history.push(PAGE.WORKSPACE.CONTENT(data.idWorkspace, data.idContent))
+        break
+      case 'appClosed':
+        this.props.history.push(PAGE.WORKSPACE.CONTENT(this.props.workspace.id, ''))
+        break
+    }
   }
 
   async componentDidMount () {
     const { workspaceIdInUrl } = this.state
     const { user, workspaceList, app, match, location, dispatch } = this.props
 
-    if (Object.keys(app).length === 0) dispatch(getAppList()) // async but no need await
+    if (Object.keys(app).length === 0) {
+      const fetchGetAppList = await dispatch(getAppList())
+      if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
+    }
 
     let wsToLoad = null
     if (match.params.idws !== undefined) wsToLoad = match.params.idws
@@ -64,34 +79,35 @@ class WorkspaceContent extends React.Component {
     if (wsToLoad === null) return // ws already loaded
 
     const wsContent = await dispatch(getWorkspaceContent(wsToLoad))
-    if (wsContent.status === 200) {
-      dispatch(setWorkspaceData(wsContent.json, qs.parse(location.search).type))
-
-      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
 
-        this.handleClickContentItem(contentToOpen)
-      }
-    } else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
+    if (wsContent.status === 200) dispatch(setWorkspaceData(wsContent.json, qs.parse(location.search).type))
+    else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
   }
 
   componentDidUpdate (prevProps, prevState) {
-    const { user, match, dispatch } = this.props
+    const { app, workspace, user, renderApp, match, dispatch } = this.props
 
     if (this.state.workspaceIdInUrl === null) return
 
     const newWorkspaceId = parseInt(match.params.idws)
-    prevState.workspaceIdInUrl !== newWorkspaceId && this.setState({workspaceIdInUrl: newWorkspaceId})
+    if (prevState.workspaceIdInUrl !== newWorkspaceId) this.setState({workspaceIdInUrl: newWorkspaceId})
 
     if (user.id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, newWorkspaceId))
-  }
 
-  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})
+    if (match.params.idcts) { // if a content id is in url, open it
+      const contentToOpen = workspace.content.find(wsc => wsc.id === parseInt(match.params.idcts))
+      if (contentToOpen === undefined) return
+
+      renderApp(
+        app[contentToOpen.type],
+        user,
+        {...contentToOpen, workspace: workspace}
+      )
+    }
   }
 
+  handleClickContentItem = content => this.props.history.push(`${PAGE.WORKSPACE.CONTENT(content.workspace_id, content.id)}${this.props.location.search}`)
+
   handleClickEditContentItem = (e, content) => {
     e.stopPropagation()
     console.log('edit nyi', content)
@@ -121,21 +137,9 @@ class WorkspaceContent extends React.Component {
     this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
   }
 
-  handleClickCreateContent = (folder, contentType) => this.setState({
-    popupCreateContent: {
-      display: true,
-      type: contentType,
-      folder: folder
-    }
-  })
-
-  handleClosePopupCreateContent = () => this.setState({
-    popupCreateContent: {
-      display: false,
-      type: undefined,
-      folder: undefined
-    }
-  })
+  handleClickCreateContent = (folder, contentType) => {
+    this.props.renderCreateContentApp(this.props.app[contentType], this.props.user, folder)
+  }
 
   render () {
     const { workspace, app } = this.props
@@ -162,13 +166,7 @@ class WorkspaceContent extends React.Component {
           </PageTitle>
 
           <PageContent parentClass='workspace__content'>
-            { this.state.popupCreateContent.display &&
-              <PopupCreateContent
-                type={this.state.popupCreateContent.type}
-                folder={this.state.popupCreateContent.folder}
-                onClose={this.handleClosePopupCreateContent}
-              />
-            }
+            <div id='popupCreateContentContainer' />
 
             <div className='workspace__content__fileandfolder folder__content active'>
               <ContentItemHeader />