added handleFetchResult + fixed timeline

src/component/PopinFixed/PopinFixed.jsx

@@ -18,11 +18,6 @@ const PopinFixed = props => {
 export default PopinFixed
 
 PopinFixed.propTypes = {
-  customClass: PropTypes.string,
-  visible: PropTypes.bool
-}
-
-PopinFixed.propTypes = {
   // from http://www.mattzabriskie.com/blog/react-validating-children
   children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
     if (

src/component/PopinFixed/PopinFixed.styl

@@ -8,7 +8,6 @@
   height 100%
   background-color lightGrey
   box-shadow shadow-page
-  visibility hidden
   z-index 1
   &.visible
     visibility visible
@@ -32,7 +31,7 @@
       color white
       font-size 20px
       cursor pointer
-      &:hover , &:focus
+      &:hover, &:focus
         border 1px solid off-white
         padding 0 10px
         border-radius 5px

src/component/PopinFixed/PopinFixedContent.jsx

@@ -26,7 +26,11 @@ export default PopinFixedContent
 
 PopinFixedContent.propTypes = {
   customClass: PropTypes.string,
-  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) =>
-    children.length !== 2 && new Error(`PropType Error: ${componentName} must have 2 children.`)
-  ).isRequired
+  children: (props, propName, componentName) => {
+    if (Array.isArray(props) && props.length !== 2) {
+      return new Error(`PropType Error: ${componentName} must have 1 or 2 children.`)
+    } else if (typeof props !== 'object') {
+      return new Error(`PropType Error: childrens of ${componentName} must have 1 or 2 children.`)
+    }
+  }
 }

src/component/Timeline/Timeline.jsx

@@ -1,10 +1,44 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import imgProfil from '../../img/imgProfil.png'
-import imgProfilReverse from '../../img/imgProfil-reverse.png'
 
 require('./Timeline.styl')
 
+const Message = props => (
+  <li className={classnames(
+    `${props.customClass}__messagelist__item`,
+    'timeline__messagelist__item',
+    {
+      'sended': props.fromMe,
+      'received': !props.fromMe
+    }
+  )}>
+    <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+      <img src={props.avatar} alt='avatar' />
+    </div>
+    <div
+      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+      {props.createdAt.day} à {props.createdAt.hour}
+    </div>
+    <div
+      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
+      {props.text}
+    </div>
+  </li>
+)
+
+const Version = props => (
+  <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
+    <div className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}>
+      <i className='fa fa-code-fork' />
+      version {props.number}
+    </div>
+    <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
+      Créer le {props.createdAt.day}
+    </div>
+  </li>
+)
+
 const Timeline = props => {
   return (
     <div className='timeline'>
@@ -13,82 +47,29 @@ const Timeline = props => {
       </div>
 
       <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
+        { props.timelineData.map(content => {
+          switch (content.type) {
+            case 'message':
+              return <Message
+                customClass={props.customClass}
+                avatar={content.author.avatar}
+                createdAt={content.createdAt}
+                text={content.text}
+                fromMe={props.loggedUser.id === content.author.id}
+                key={content.id}
+              />
 
-        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
-          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfil} alt='avatar' />
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-            27/11/17 à 11h45
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
-            Proident esse laboris in sed officia exercitation ut anim ea.
-          </div>
-        </li>
-
-        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
-          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} alt='avatar' />
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-            27/11/17 à 11h47
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
-            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.
-            Proident esse laboris in sed officia exercitation ut anim ea.
-            Proident esse laboris in sed officia exercitation ut anim ea.
-          </div>
-        </li>
-
-        <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
-          <div className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}>
-            <i className='fa fa-code-fork' />
-            version 3
-          </div>
-          <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
-            Créer le 22/11/17
-          </div>
-        </li>
-
-        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
-          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfil} alt='avatar' />
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-            27/11/17 à 11h45
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
-            Proident esse laboris in sed officia exercitation ut anim ea.
-          </div>
-        </li>
-
-        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
-          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} alt='avatar' />
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-            27/11/17 à 11h47
-          </div>
-          <div
-            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
-            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.
-            Proident esse laboris in sed officia exercitation ut anim ea.
-            Proident esse laboris in sed officia exercitation ut anim ea.
-          </div>
-        </li>
-
+            case 'version':
+              return <Version
+                customClass={props.customClas}
+                createdAt={content.createdAt}
+                number={content.number}
+                key={content.id}
+              />
+          }
+        })}
       </ul>
+
       <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
         <div
           className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group')}>
@@ -122,3 +103,19 @@ const Timeline = props => {
 }
 
 export default Timeline
+
+Timeline.propTypes = {
+  customClass: PropTypes.string,
+  loggedUser: PropTypes.object,
+  timelineData: PropTypes.array
+}
+
+Timeline.defaultProps = {
+  customClass: '',
+  loggedUser: {
+    id: '',
+    name: '',
+    avatar: ''
+  },
+  timelineData: []
+}

src/component/Timeline/debugData.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

src/helper.js

@@ -0,0 +1,17 @@
+export const libHandleFetchResult = fetchResult => {
+  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
+  }
+}

src/index.dev.js

@@ -10,6 +10,7 @@ import TextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import BtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
 import Timeline from './component/Timeline/Timeline.jsx'
+import TimelineDebugData from './component/Timeline/debugData.js'
 
 ReactDOM.render(
   <PopinFixed customClass={`${'randomClass'}`}>
@@ -31,7 +32,12 @@ ReactDOM.render(
 
       <Timeline
         customClass={`${'randomClass'}__contentpage`}
-        key={'pageHtml__timeline'}
+        loggedUser={{
+          id: '1',
+          name: 'smoi',
+          avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+        }}
+        timelineData={TimelineDebugData}
       />
     </PopinFixedContent>
   </PopinFixed>

src/index.js

@@ -1,3 +1,5 @@
+import { libHandleFetchResult } from './helper.js'
+
 import libPopinFixed from './component/PopinFixed/PopinFixed.jsx'
 import libPopinFixedHeader from './component/PopinFixed/PopinFixedHeader.jsx'
 import libPopinFixedOption from './component/PopinFixed/PopinFixedOption.jsx'
@@ -8,6 +10,8 @@ import libTimeline from './component/Timeline/Timeline.jsx'
 import libTextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
+export const handleFetchResult = libHandleFetchResult
+
 export const PopinFixed = libPopinFixed
 export const PopinFixedHeader = libPopinFixedHeader
 export const PopinFixedOption = libPopinFixedOption