Browse Source

timeline is now dynamic

Skylsmoi 7 years ago
parent
commit
30693a29e4
2 changed files with 94 additions and 34 deletions
  1. 40 34
      src/container/PageHtml.jsx
  2. 54 0
      src/timelineDebugData.js

+ 40 - 34
src/container/PageHtml.jsx View File

1
 import React from 'react'
1
 import React from 'react'
2
 import PageHtmlComponent from '../component/PageHtml.jsx'
2
 import PageHtmlComponent from '../component/PageHtml.jsx'
3
 import {
3
 import {
4
+  handleFetchResult,
4
   PopinFixed,
5
   PopinFixed,
5
   PopinFixedHeader,
6
   PopinFixedHeader,
6
   PopinFixedOption,
7
   PopinFixedOption,
7
   PopinFixedContent,
8
   PopinFixedContent,
8
   Timeline
9
   Timeline
9
 } from 'tracim_lib'
10
 } from 'tracim_lib'
11
+import { timelineDebugData } from '../timelineDebugData.js'
10
 import { FETCH_CONFIG } from '../helper.js'
12
 import { FETCH_CONFIG } from '../helper.js'
11
 
13
 
12
 const debug = {
14
 const debug = {
13
   workspace: {
15
   workspace: {
14
-    id: '-1',
15
-    title: 'Test debugg workspace'
16
+    id: -1,
17
+    title: 'Test debug workspace'
18
+  },
19
+  appConfig: {
20
+    name: 'PageHtml',
21
+    customClass: 'wsFilePageHtml',
22
+    icon: 'fa fa-file-word-o',
23
+    apiUrl: 'http://localhost:3001'
24
+  },
25
+  loggedUser: {
26
+    id: 5,
27
+    username: 'Smoi',
28
+    firstname: 'Côme',
29
+    lastname: 'Stoilenom',
30
+    email: 'osef@algoo.fr',
31
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
16
   },
32
   },
17
   content: {
33
   content: {
18
-    id: '-1',
34
+    id: -1,
19
     type: 'pageHtml',
35
     type: 'pageHtml',
20
-    title: 'Test debugg pageHtml',
36
+    title: 'Test debug pageHtml',
21
     status: 'validated',
37
     status: 'validated',
22
     version: '-1',
38
     version: '-1',
23
     text: 'This is the default pageHtml content for debug purpose'
39
     text: 'This is the default pageHtml content for debug purpose'
24
   },
40
   },
25
-  appConfig: {
26
-    name: 'PageHtml',
27
-    customClass: 'wsFilePageHtml',
28
-    icon: 'fa fa-file-word-o',
29
-    apiUrl: 'http://localhost:3001'
30
-  }
41
+  timeline: timelineDebugData
31
 }
42
 }
32
 
43
 
33
 class pageHtml extends React.Component {
44
 class pageHtml extends React.Component {
37
       appName: 'PageHtml',
48
       appName: 'PageHtml',
38
       isVisible: true,
49
       isVisible: true,
39
       workspace: props.app ? props.app.workspace : debug.workspace,
50
       workspace: props.app ? props.app.workspace : debug.workspace,
51
+      appConfig: props.app ? props.app.appConfig : debug.appConfig,
52
+      loggedUser: props.app ? props.app.loggedUser : debug.loggedUser,
40
       content: props.app ? props.app.content : debug.content,
53
       content: props.app ? props.app.content : debug.content,
41
-      appConfig: props.app ? props.app.appConfig : debug.appConfig
54
+      timeline: props.app ? [] : debug.timeline
42
     }
55
     }
43
 
56
 
44
     document.addEventListener('appCustomEvent', this.customEventReducer)
57
     document.addEventListener('appCustomEvent', this.customEventReducer)
46
 
59
 
47
   async componentDidMount () {
60
   async componentDidMount () {
48
     const { workspace, content, appConfig } = this.state
61
     const { workspace, content, appConfig } = this.state
49
-    if (content.id === '-1') return
62
+    if (content.id === '-1') return // debug case
50
 
63
 
51
-    const fetchResult = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}`, {
64
+    const fetchResultPageHtml = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}`, {
65
+      ...FETCH_CONFIG,
66
+      method: 'GET'
67
+    })
68
+    const fetchResultTimeline = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}/timeline`, {
52
       ...FETCH_CONFIG,
69
       ...FETCH_CONFIG,
53
       method: 'GET'
70
       method: 'GET'
54
     })
71
     })
55
 
72
 
56
-    fetchResult.json = await (async () => {
57
-      switch (fetchResult.status) {
58
-        case 200:
59
-        case 304:
60
-          return fetchResult.json()
61
-        case 204:
62
-        case 400:
63
-        case 404:
64
-        case 409:
65
-        case 500:
66
-        case 501:
67
-        case 502:
68
-        case 503:
69
-        case 504:
70
-          return `Error: ${fetchResult.status}` // @TODO : handle errors from api result
71
-      }
72
-    })()
73
-
74
-    this.setState({content: fetchResult.json})
73
+    fetchResultPageHtml.json = await handleFetchResult(fetchResultPageHtml)
74
+    fetchResultTimeline.json = await handleFetchResult(fetchResultTimeline)
75
+
76
+    this.setState({
77
+      content: fetchResultPageHtml.json,
78
+      timeline: fetchResultTimeline.json
79
+    })
75
   }
80
   }
76
 
81
 
77
   customEventReducer = action => { // action: { type: '', data: {} }
82
   customEventReducer = action => { // action: { type: '', data: {} }
88
   }
93
   }
89
 
94
 
90
   render () {
95
   render () {
91
-    const { isVisible, content, appConfig } = this.state
96
+    const { isVisible, loggedUser, content, timeline, appConfig } = this.state
92
 
97
 
93
     if (!isVisible) return null
98
     if (!isVisible) return null
94
 
99
 
112
 
117
 
113
           <Timeline
118
           <Timeline
114
             customClass={`${appConfig.customClass}__contentpage`}
119
             customClass={`${appConfig.customClass}__contentpage`}
115
-            key={'pageHtml__timeline'}
120
+            loggedUser={loggedUser}
121
+            timelineData={timeline}
116
           />
122
           />
117
         </PopinFixedContent>
123
         </PopinFixedContent>
118
       </PopinFixed>
124
       </PopinFixed>

+ 54 - 0
src/timelineDebugData.js View File

1
+export const timelineDebugData = [{
2
+  id: 0,
3
+  type: 'message',
4
+  author: {
5
+    id: 5,
6
+    name: 'MrLapin',
7
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
8
+  },
9
+  createdAt: {
10
+    day: '27/11/17',
11
+    hour: '11h45'
12
+  },
13
+  text: 'Proident esse laboris in sed officia exercitation ut anim ea.'
14
+}, {
15
+  id: 1,
16
+  type: 'message',
17
+  author: {
18
+    id: '1',
19
+    name: 'smoi',
20
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
21
+  },
22
+  createdAt: {
23
+    day: '27/11/16',
24
+    hour: '10h30'
25
+  },
26
+  text: 'Proident esse laboris in sed officia exercitation ut anim ea. in sed officia exercitation ut'
27
+}, {
28
+  id: 2,
29
+  type: 'message',
30
+  author: {
31
+    id: '1',
32
+    name: 'smoi',
33
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
34
+  },
35
+  createdAt: {
36
+    day: '27/11/15',
37
+    hour: '10h30'
38
+  },
39
+  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.'
40
+}, {
41
+  id: 3,
42
+  type: 'version',
43
+  author: {
44
+    id: '1',
45
+    name: 'smoi',
46
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
47
+  },
48
+  createdAt: {
49
+    day: '27/11/11'
50
+  },
51
+  number: '5'
52
+}]
53
+
54
+export default timelineDebugData