integration with real api

dist/index.html

@@ -17,7 +17,7 @@
 
   <div id='content'></div>
 
-  <script src='./pageHtml.app.dev.js'></script>
+  <script src='./html-documents.app.dev.js'></script>
 
   <script type='text/javascript'>
     GLOBAL_renderApp = app => {

package.json

@@ -49,6 +49,7 @@
     "globals": [
       "fetch",
       "history",
+      "btoa",
       "GLOBAL_renderApp",
       "GLOBAL_unmountApp",
       "GLOBAL_dispatchEvent"

src/container/PageHtml.jsx

@@ -14,20 +14,20 @@ import i18n from '../i18n.js'
 
 const debug = {
   config: {
-    name: 'PageHtml',
-    label: {
-      fr: 'Page Html',
-      en: 'Html page'
-    },
-    componentLeft: 'PageHtml',
-    componentRight: 'Timeline',
-    customClass: 'wsContentPageHtml',
-    icon: 'fa fa-file-text-o',
-    color: '#fdfdfd',
+    label: 'Text Document',
+    slug: 'page',
+    faIcon: 'file-text-o',
+    hexcolor: '#3f52e3',
+    creationLabel: 'Write a document',
     domContainer: 'appContainer',
-    mockApiUrl: 'http://localhost:3001'
+    apiUrl: 'localhost:6543/api/v2',
+    mockApiUrl: 'localhost:3001',
+    apiHeader: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+      // 'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    }
   },
-  contentAction: 'showContent',
   loggedUser: {
     id: 5,
     username: 'Smoi',
@@ -37,17 +37,31 @@ const debug = {
     avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
   },
   content: {
-    id: -1,
-    type: 'pageHtml',
-    title: 'Test debug pageHtml',
-    status: 'validated',
-    version: 'version n°1',
-    text: 'This is the default pageHtml content for debug purpose',
-    workspace: {
-      id: -1,
-      title: 'Test debug workspace',
-      ownerId: 5
-    }
+    author: {
+      avatar_url: null,
+      public_name: 'Global manager',
+      user_id: 1
+    },
+    content_id: -1,
+    content_type: 'page',
+    created: '2018-06-18T14:59:26Z',
+    current_revision_id: 11,
+    is_archived: false,
+    is_deleted: false,
+    label: 'Current Menu',
+    last_modifier: {
+      avatar_url: null,
+      public_name: 'Global manager',
+      user_id: 1
+    },
+    modified: '2018-06-18T14:59:26Z',
+    parent_id: 2,
+    raw_content: '<div>bonjour, je suis un lapin.</div>',
+    show_in_ui: true,
+    slug: 'current-menu',
+    status: 'open',
+    sub_content_types: ['thread', 'page', 'file', 'folder'],
+    workspace_id: 1
   },
   timeline: timelineDebugData
 }
@@ -56,7 +70,7 @@ class pageHtml extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      appName: 'PageHtml',
+      appName: 'page',
       isVisible: true,
       config: props.data ? props.data.config : debug.config,
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
@@ -70,37 +84,67 @@ class pageHtml extends React.Component {
 
   customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
     switch (type) {
-      case 'PageHtml_showApp':
+      case 'page_showApp':
         this.setState({isVisible: true})
         break
-      case 'PageHtml_hideApp':
+      case 'page_hideApp':
         this.setState({isVisible: false})
         break
+      case 'page_reloadContent':
+        this.setState({content: data})
     }
   }
 
-  async componentDidMount () {
+  componentDidMount () {
+    console.log('pageHtml did mount')
+    if (this.state.content.content_id === -1) return // debug case
+
+    this.loadContent()
+    // wysiwyg()
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    console.log('pageHtml did update', prevState, this.state)
+    if (!prevState.content || !this.state.content) return
+
+    if (prevState.content.content_id !== this.state.content.content_id) {
+      this.loadContent()
+    }
+  }
+
+  loadContent = async () => {
+    console.log('loadContent')
     const { content, config } = this.state
-    if (content.id === '-1') return // debug case
 
-    const fetchResultPageHtml = await fetch(`${config.mockApiUrl}/workspace/${content.workspace.id}/content/${content.id}`, {
+    const fetchResultPageHtml = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/html-documents/${content.content_id}`, {
       ...FETCH_CONFIG,
       method: 'GET'
     })
-    const fetchResultTimeline = await fetch(`${config.mockApiUrl}/workspace/${content.workspace.id}/content/${content.id}/timeline`, {
+    const fetchResultTimeline = await fetch(`${config.apiUrl}/workspaces/${content.workspace_id}/contents/${content.content_id}/comments`, {
       ...FETCH_CONFIG,
       method: 'GET'
     })
 
-    fetchResultPageHtml.json = await handleFetchResult(fetchResultPageHtml)
-    fetchResultTimeline.json = await handleFetchResult(fetchResultTimeline)
-
-    this.setState({
-      content: fetchResultPageHtml.json,
-      timeline: fetchResultTimeline.json
-    })
-
-    // wysiwyg()
+    // Promise.all([
+    //   handleFetchResult(fetchResultPageHtml),
+    //   handleFetchResult(fetchResultTimeline)
+    // ])
+    //   .then(([resPageHtml, resTimeline]) => {
+    //     this.setState({
+    //       content: resPageHtml,
+    //       timeline: resTimeline
+    //     })
+    //   })
+    handleFetchResult(fetchResultPageHtml)
+      .then(resPageHtml => this.setState({content: resPageHtml}))
+      .catch(e => console.log('Error loading content.', e))
+
+    handleFetchResult(fetchResultTimeline)
+      .then(resTimeline => this.setState({timeline: resTimeline}))
+      .catch(e => {
+        console.log('Error loading Timeline.', e)
+        this.setState({timeline: []})
+      })
   }
 
   handleClickBtnCloseApp = () => {
@@ -124,32 +168,32 @@ class pageHtml extends React.Component {
     if (!isVisible) return null
 
     return (
-      <PopinFixed customClass={`${config.customClass}`}>
+      <PopinFixed customClass={`${config.slug}`}>
         <PopinFixedHeader
-          customClass={`${config.customClass}`}
-          icon={config.icon}
-          name={content.title}
+          customClass={`${config.slug}`}
+          icon={config.faIcon}
+          name={content.label}
           onClickCloseBtn={this.handleClickBtnCloseApp}
           onChangeTitle={this.handleChangeTitle}
         />
 
         <PopinFixedOption
-          customClass={`${config.customClass}`}
+          customClass={`${config.slug}`}
           onClickNewVersionBtn={this.handleClickNewVersion}
           i18n={i18n}
         />
 
-        <PopinFixedContent customClass={`${config.customClass}__contentpage`}>
+        <PopinFixedContent customClass={`${config.slug}__contentpage`}>
           <PageHtmlComponent
             mode={this.state.mode}
             onClickCloseEditMode={this.handleCloseNewVersion}
-            version={content.version}
-            text={content.text}
-            key={'PageHtml'}
+            version={content.current_revision_id}
+            text={content.raw_content}
+            key={'html-documents'}
           />
 
           <Timeline
-            customClass={`${config.customClass}__contentpage`}
+            customClass={`${config.slug}__contentpage`}
             loggedUser={loggedUser}
             timelineData={timeline}
           />

src/container/PopupCreatePageHtml.jsx

@@ -1,12 +1,50 @@
 import React from 'react'
-import { CardPopupCreateContent } from 'tracim_lib'
+import {
+  CardPopupCreateContent,
+  handleFetchResult
+} from 'tracim_lib'
+import { FETCH_CONFIG } from '../helper.js'
+
+const debug = {
+  config: {
+    label: 'Text Document',
+    slug: 'page',
+    faIcon: 'file-text-o',
+    hexcolor: '#3f52e3',
+    creationLabel: 'Write a document',
+    domContainer: 'appContainer',
+    apiUrl: 'http://localhost:3001',
+    mockApiUrl: 'http://localhost:8071',
+    apiHeader: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    }
+  },
+  loggedUser: {
+    id: 5,
+    username: 'Smoi',
+    firstname: 'Côme',
+    lastname: 'Stoilenom',
+    email: 'osef@algoo.fr',
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
+  },
+  idWorkspace: 1,
+  idFolder: null
+}
 
 class PopupCreatePageHtml extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
+      appName: 'page',
+      config: props.data ? props.data.config : debug.config,
+      loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
+      idWorkspace: props.data ? props.data.idWorkspace : debug.idWorkspace,
+      idFolder: props.data ? props.data.idFolder : debug.idFolder,
       newContentName: ''
     }
+    this.handleValidate = this.handleValidate.bind(this)
   }
 
   handleChangeNewContentName = e => this.setState({newContentName: e.target.value})
@@ -14,21 +52,37 @@ class PopupCreatePageHtml extends React.Component {
   handleClose = () => GLOBAL_dispatchEvent({
     type: 'hide_popupCreateContent',
     data: {
-      name: 'PageHtml'
+      name: this.state.appName
     }
   })
 
-  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
-      }
+  async handleValidate () {
+    const fetchSaveNewHtmlDoc = await fetch(`${this.state.config.apiUrl}/workspaces/${this.state.idWorkspace}/contents`, {
+      ...FETCH_CONFIG,
+      method: 'POST',
+      body: JSON.stringify({
+        parent_id: this.state.idFolder,
+        content_type_slug: this.state.config.slug,
+        label: this.state.newContentName
+      })
     })
+
+    if (fetchSaveNewHtmlDoc.status === 200) {
+      const jsonSaveNewHtmlDoc = await fetchSaveNewHtmlDoc.json()
+
+      console.log(jsonSaveNewHtmlDoc)
+
+      this.handleClose()
+
+      GLOBAL_dispatchEvent({
+        type: 'openContentUrl',
+        data: {
+          idWorkspace: jsonSaveNewHtmlDoc.workspace_id,
+          contentType: this.state.appName,
+          idContent: jsonSaveNewHtmlDoc.id
+        }
+      })
+    }
   }
 
   render () {
@@ -36,9 +90,9 @@ class PopupCreatePageHtml extends React.Component {
       <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}
+        label={this.state.config.label} // @TODO get the lang of user
+        hexcolor={this.state.config.hexcolor}
+        faIcon={this.state.config.faIcon}
         contentName={this.state.newContentName}
         onChangeContentName={this.handleChangeNewContentName}
         btnValidateLabel='Valider et créer'

src/css/index.styl

@@ -5,7 +5,7 @@ btncolor()
   box-shadow 0 0 1px 2px htmlColor
   color off-white
 
-.wsContentPageHtml
+.page
   width 1155px
   &__header
     background-color htmlColor
@@ -95,16 +95,16 @@ btncolor()
             background-color htmlColor
 
 .messagelistOpen
-  .wsContentPageHtml__contentpage__messagelist
+  .page__contentpage__messagelist
     flex 0
     min-height 0
 
 .received
-  .wsContentPageHtml__contentpage__messagelist__item__content
+  .page__contentpage__messagelist__item__content
     background-color htmlColor
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .wsContentPageHtml
+  .page
     &__contentpage
       display block
       overflow-Y scroll
@@ -131,19 +131,19 @@ btncolor()
               margin-left 15px
 
 @media (min-width: min-lg) and (max-width: max-lg)
-  .wsContentPageHtml
+  .page
     width 692px
     &__contentpage__texteditor__simpletext
       margin-left 15px
 
 @media (min-width: min-md) and (max-width: max-md)
-  .wsContentPageHtml
+  .page
     width 768px
     &__contentpage__texteditor__simpletext
       margin-left 25px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-  .wsContentPageHtml
+  .page
     top 69px
     width 576px
     height calc(100% - 69px)
@@ -151,7 +151,7 @@ btncolor()
       margin-left 10px
 
 @media (max-width: max-xs)
-  .wsContentPageHtml
+  .page
     top 70px
     height calc(100% - 70px)
     width 100%

src/helper.js

@@ -1,7 +1,8 @@
 export const FETCH_CONFIG = {
   headers: {
     'Accept': 'application/json',
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
+    'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
   }
 }
 

src/index.dev.js

@@ -6,6 +6,11 @@ import PopupCreatePageHtml from './container/PopupCreatePageHtml.jsx'
 require('./css/index.styl')
 
 ReactDOM.render(
-  <PopupCreatePageHtml />
+  <PageHtml data={undefined} />
   , document.getElementById('content')
 )
+
+// ReactDOM.render(
+//   <PopupCreatePageHtml />
+//   , document.getElementById('content')
+// )

webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     : ['babel-polyfill', './src/index.dev.js'],
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: isProduction ? 'pageHtml.app.js' : 'pageHtml.app.dev.js',
+    filename: isProduction ? 'html-documents.app.js' : 'html-documents.app.dev.js',
     pathinfo: !isProduction,
     library: isProduction ? 'appPageHtml' : undefined,
     libraryTarget: isProduction ? 'var' : undefined