refactored app interface to allow popupCreateContent

package.json

@@ -50,7 +50,8 @@
       "fetch",
       "history",
       "GLOBAL_renderApp",
-      "GLOBAL_unmountApp"
+      "GLOBAL_unmountApp",
+      "GLOBAL_dispatchEvent"
     ],
     "parser": "babel-eslint",
     "ignore": []

src/component/PageHtml.jsx

@@ -13,7 +13,7 @@ const PageHtml = props => {
       }
 
       {props.mode === MODE.EDIT &&
-        <TextAreaApp customClass={'wsContentPageHtml'} onClickCancelBtn={props.onClickCloseEditMode}/>
+        <TextAreaApp customClass={'wsContentPageHtml'} onClickCancelBtn={props.onClickCloseEditMode} />
       }
     </div>
   )

src/container/PageHtml.jsx

@@ -27,6 +27,7 @@ const debug = {
     domContainer: 'appContainer',
     mockApiUrl: 'http://localhost:3001'
   },
+  contentAction: 'showContent',
   loggedUser: {
     id: 5,
     username: 'Smoi',
@@ -67,8 +68,8 @@ class pageHtml extends React.Component {
     document.addEventListener('appCustomEvent', this.customEventReducer)
   }
 
-  customEventReducer = ({ detail: action }) => { // action: { type: '', data: {} }
-    switch (action.type) {
+  customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
+    switch (type) {
       case 'PageHtml_showApp':
         this.setState({isVisible: true})
         break
@@ -104,6 +105,7 @@ class pageHtml extends React.Component {
 
   handleClickBtnCloseApp = () => {
     this.setState({ isVisible: false })
+    GLOBAL_dispatchEvent({type: 'appClosed', data: {}})
   }
 
   handleChangeTitle = e => console.log('new title : ', e.target.value)

src/container/PopupCreatePageHtml.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { CardPopupCreateContent } from 'tracim_lib'
+
+class PopupCreatePageHtml extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      newContentName: ''
+    }
+  }
+
+  handleChangeNewContentName = e => this.setState({newContentName: e.target.value})
+
+  handleClose = () => GLOBAL_dispatchEvent({
+    type: 'hide_popupCreateContent',
+    data: {
+      name: 'PageHtml'
+    }
+  })
+
+  handleValidate = () => {
+    console.log(`fetch(/workspace/:id/content, POST, body:{name: ${this.state.newContentName})`)
+    // API return the id of the new content
+    this.handleClose()
+    GLOBAL_dispatchEvent({
+      type: 'openContentUrl',
+      data: {
+        idWorkspace: this.props.data.folder.workspace_id,
+        idContent: '1' // will the id returned by api
+      }
+    })
+  }
+
+  render () {
+    return (
+      <CardPopupCreateContent
+        onClose={this.handleClose}
+        onValidate={this.handleValidate}
+        title={this.props.data.config.label.fr} // @TODO get the lang of user
+        color={this.props.data.config.color}
+        icon={this.props.data.config.icon}
+        contentName={this.state.newContentName}
+        onChangeContentName={this.handleChangeNewContentName}
+        btnValidateLabel='Valider et créer'
+      />
+    )
+  }
+}
+
+export default PopupCreatePageHtml

src/index.dev.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import PageHtml from './container/PageHtml.jsx'
+import PopupCreatePageHtml from './container/PopupCreatePageHtml.jsx'
 
 require('./css/index.styl')
 
 ReactDOM.render(
-  <PageHtml />
+  <PopupCreatePageHtml />
   , document.getElementById('content')
 )

src/index.js

@@ -1,9 +1,29 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import PageHtml from './container/PageHtml.jsx'
+import PopupCreatePageHtml from './container/PopupCreatePageHtml.jsx'
 
 require('./css/index.styl')
 
+/* data : {
+  loggedUser: {},
+  config: {
+    name: 'PageHtml',
+    label: {
+      fr: 'Document',
+      en: 'Document'
+    },
+    customClass: 'wsContentPageHtml',
+    icon: 'fa fa-fw fa-file-text-o',
+    color: '#3f52e3',
+    domContainer: 'appContainer'
+    apiUrl: FETCH_CONFIG.apiUrl,
+    mockApiUrl: FETCH_CONFIG.mockApiUrl
+  },
+  content || folder
+}
+ */
+
 const appInterface = {
   name: 'PageHtml',
   isRendered: false,
@@ -15,6 +35,12 @@ const appInterface = {
   },
   hideApp: domId => {
     return ReactDOM.unmountComponentAtNode(document.getElementById(domId)) // returns bool
+  },
+  renderPopupCreation: data => {
+    return ReactDOM.render(
+      <PopupCreatePageHtml data={data} />
+      , document.getElementById(data.config.domContainer)
+    )
   }
 }