timeline is now dynamic

src/container/PageHtml.jsx

@@ -1,33 +1,44 @@
 import React from 'react'
 import PageHtmlComponent from '../component/PageHtml.jsx'
 import {
+  handleFetchResult,
   PopinFixed,
   PopinFixedHeader,
   PopinFixedOption,
   PopinFixedContent,
   Timeline
 } from 'tracim_lib'
+import { timelineDebugData } from '../timelineDebugData.js'
 import { FETCH_CONFIG } from '../helper.js'
 
 const debug = {
   workspace: {
-    id: '-1',
-    title: 'Test debugg workspace'
+    id: -1,
+    title: 'Test debug workspace'
+  },
+  appConfig: {
+    name: 'PageHtml',
+    customClass: 'wsFilePageHtml',
+    icon: 'fa fa-file-word-o',
+    apiUrl: 'http://localhost:3001'
+  },
+  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'
   },
   content: {
-    id: '-1',
+    id: -1,
     type: 'pageHtml',
-    title: 'Test debugg pageHtml',
+    title: 'Test debug pageHtml',
     status: 'validated',
     version: '-1',
     text: 'This is the default pageHtml content for debug purpose'
   },
-  appConfig: {
-    name: 'PageHtml',
-    customClass: 'wsFilePageHtml',
-    icon: 'fa fa-file-word-o',
-    apiUrl: 'http://localhost:3001'
-  }
+  timeline: timelineDebugData
 }
 
 class pageHtml extends React.Component {
@@ -37,8 +48,10 @@ class pageHtml extends React.Component {
       appName: 'PageHtml',
       isVisible: true,
       workspace: props.app ? props.app.workspace : debug.workspace,
+      appConfig: props.app ? props.app.appConfig : debug.appConfig,
+      loggedUser: props.app ? props.app.loggedUser : debug.loggedUser,
       content: props.app ? props.app.content : debug.content,
-      appConfig: props.app ? props.app.appConfig : debug.appConfig
+      timeline: props.app ? [] : debug.timeline
     }
 
     document.addEventListener('appCustomEvent', this.customEventReducer)
@@ -46,32 +59,24 @@ class pageHtml extends React.Component {
 
   async componentDidMount () {
     const { workspace, content, appConfig } = this.state
-    if (content.id === '-1') return
+    if (content.id === '-1') return // debug case
 
-    const fetchResult = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}`, {
+    const fetchResultPageHtml = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}`, {
+      ...FETCH_CONFIG,
+      method: 'GET'
+    })
+    const fetchResultTimeline = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}/timeline`, {
       ...FETCH_CONFIG,
       method: 'GET'
     })
 
-    fetchResult.json = await (async () => {
-      switch (fetchResult.status) {
-        case 200:
-        case 304:
-          return fetchResult.json()
-        case 204:
-        case 400:
-        case 404:
-        case 409:
-        case 500:
-        case 501:
-        case 502:
-        case 503:
-        case 504:
-          return `Error: ${fetchResult.status}` // @TODO : handle errors from api result
-      }
-    })()
-
-    this.setState({content: fetchResult.json})
+    fetchResultPageHtml.json = await handleFetchResult(fetchResultPageHtml)
+    fetchResultTimeline.json = await handleFetchResult(fetchResultTimeline)
+
+    this.setState({
+      content: fetchResultPageHtml.json,
+      timeline: fetchResultTimeline.json
+    })
   }
 
   customEventReducer = action => { // action: { type: '', data: {} }
@@ -88,7 +93,7 @@ class pageHtml extends React.Component {
   }
 
   render () {
-    const { isVisible, content, appConfig } = this.state
+    const { isVisible, loggedUser, content, timeline, appConfig } = this.state
 
     if (!isVisible) return null
 
@@ -112,7 +117,8 @@ class pageHtml extends React.Component {
 
           <Timeline
             customClass={`${appConfig.customClass}__contentpage`}
-            key={'pageHtml__timeline'}
+            loggedUser={loggedUser}
+            timelineData={timeline}
           />
         </PopinFixedContent>
       </PopinFixed>

src/timelineDebugData.js

@@ -0,0 +1,54 @@
+export const timelineDebugData = [{
+  id: 0,
+  type: 'message',
+  author: {
+    id: 5,
+    name: 'MrLapin',
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
+  },
+  createdAt: {
+    day: '27/11/17',
+    hour: '11h45'
+  },
+  text: 'Proident esse laboris in sed officia exercitation ut anim ea.'
+}, {
+  id: 1,
+  type: 'message',
+  author: {
+    id: '1',
+    name: 'smoi',
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+  },
+  createdAt: {
+    day: '27/11/16',
+    hour: '10h30'
+  },
+  text: 'Proident esse laboris in sed officia exercitation ut anim ea. in sed officia exercitation ut'
+}, {
+  id: 2,
+  type: 'message',
+  author: {
+    id: '1',
+    name: 'smoi',
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+  },
+  createdAt: {
+    day: '27/11/15',
+    hour: '10h30'
+  },
+  text: 'Proident esse laboris in sed officia exercitation ut anim ea. Proident esse laboris in sed officia exercitation ut anim ea. Proident esse laboris in sed officia exercitation ut anim ea.'
+}, {
+  id: 3,
+  type: 'version',
+  author: {
+    id: '1',
+    name: 'smoi',
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+  },
+  createdAt: {
+    day: '27/11/11'
+  },
+  number: '5'
+}]
+
+export default timelineDebugData