switched Timeline into a statefull component + added handling for wysiwyg

src/component/Input/TextAreaApp/TextAreaApp.jsx

@@ -6,7 +6,8 @@ require('./TextAreaApp.styl')
 export const TextAreaApp = props =>
   <form className={`${props.customClass} editionmode`}>
     <textarea
-      className={`${props.customClass}__text editionmode__text wysiwygtext`}
+      id={props.id}
+      className={`${props.customClass}__text editionmode__text`}
       value={props.text}
       onChange={props.onChangeText}
     />
@@ -37,5 +38,6 @@ TextAreaApp.propTypes = {
   onChangeText: PropTypes.func.isRequired,
   onClickCancelBtn: PropTypes.func.isRequired,
   onClickValidateBtn: PropTypes.func.isRequired,
+  id: PropTypes.string,
   customClass: PropTypes.string
 }

src/component/Timeline/Comment.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import classnames from 'classnames'
+
+const Comment = 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')}>
+      {props.avatar ? <img src={props.avatar} /> : ''}
+    </div>
+    <div
+      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+      {props.createdAt}
+    </div>
+    <div
+      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}
+      dangerouslySetInnerHTML={{__html: props.text}}
+    />
+  </li>
+)
+
+export default Comment

src/component/Timeline/Revision.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import classnames from 'classnames'
+
+const Revision = 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}
+    </div>
+  </li>
+)
+
+export default Revision

src/component/Timeline/Timeline.jsx

@@ -1,116 +1,102 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Comment from './Comment.jsx'
+import Revision from './Revision.jsx'
 
 require('./Timeline.styl')
 
-const Comment = 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')}>
-      {props.avatar ? <img src={props.avatar} /> : ''}
-    </div>
-    <div
-      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-      {props.createdAt}
-    </div>
-    <div
-      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
-      {props.text}
-    </div>
-  </li>
-)
-
-const Revision = 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}
-    </div>
-  </li>
-)
-
-const Timeline = props => {
-  if (!Array.isArray(props.timelineData)) {
-    console.log('Error in Timeline.jsx, props.timelineData is not an array. timelineData: ', props.timelineData)
-    return null
+class Timeline extends React.Component {
+  componentDidMount () {
+    this.scrollToBottom()
   }
 
-  return (
-    <div className='timeline'>
-      <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
-        Timeline
-      </div>
+  componentDidUpdate () {
+    this.scrollToBottom()
+  }
 
-      <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
-        { props.timelineData.map(content => {
-          switch (content.timelineType) {
-            case 'comment':
-              return <Comment
-                customClass={props.customClass}
-                avatar={content.author.avatar_url}
-                createdAt={content.created}
-                text={content.raw_content}
-                fromMe={props.loggedUser.user_id === content.author.user_id}
-                key={`comment_${content.content_id}`}
-              />
+  scrollToBottom = () => this.timelineBottom.scrollIntoView({behavior: 'instant'})
 
-            case 'revision':
-              return <Revision
-                customClass={props.customClass}
-                createdAt={content.created}
-                number={props.timelineData.filter(c => c.timelineType === 'revision' && c.revision_id <= content.revision_id).length}
-                key={`revision_${content.revision_id}`}
-              />
-          }
-        })}
-      </ul>
+  render () {
+    const { props } = this
 
-      <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor d-flex align-items-center justify-content-between flex-wrap')}>
+    if (!Array.isArray(props.timelineData)) {
+      console.log('Error in Timeline.jsx, props.timelineData is not an array. timelineData: ', props.timelineData)
+      return null
+    }
 
-        <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
-          <textarea
-            placeholder='Taper votre message ici'
-            value={props.newComment}
-            onChange={props.onChangeNewComment}
-          />
+    return (
+      <div className='timeline'>
+        <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
+          Timeline
         </div>
 
-        <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__texteditor__wrapper')}>
-
-          <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__texteditor__advancedtext')}>
-            <button type='button' className={classnames(`${props.customClass}__texteditor__advancedtext__btn`, 'timeline__texteditor__advancedtext__btn btn btn-outline-primary')}>
-              Texte Avancé
-            </button>
+        <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
+          {props.timelineData.map(content => {
+            switch (content.timelineType) {
+              case 'comment':
+                return <Comment
+                  customClass={props.customClass}
+                  avatar={content.author.avatar_url}
+                  createdAt={content.created}
+                  text={content.raw_content}
+                  fromMe={props.loggedUser.user_id === content.author.user_id}
+                  key={`comment_${content.content_id}`}
+                />
+
+              case 'revision':
+                return <Revision
+                  customClass={props.customClass}
+                  createdAt={content.created}
+                  number={props.timelineData.filter(c => c.timelineType === 'revision' && c.revision_id <= content.revision_id).length}
+                  key={`revision_${content.revision_id}`}
+                />
+            }
+          })}
+          <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
+        </ul>
+
+        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor d-flex align-items-center justify-content-between flex-wrap')}>
+          <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
+            <textarea
+              id='wysiwygTimelineComment'
+              placeholder='Taper votre message ici'
+              value={props.newComment}
+              onChange={props.onChangeNewComment}
+            />
           </div>
 
-          <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
-            <button
-              type='button'
-              className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
-              onClick={props.onClickValidateNewCommentBtn}
-            >
-              Envoyer
-              <div className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
-                <i className='fa fa-paper-plane-o' />
-              </div>
-            </button>
+          <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__texteditor__wrapper')}>
+            <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__texteditor__advancedtext')}>
+              <button
+                type='button'
+                className={classnames(
+                  `${props.customClass}__texteditor__advancedtext__btn timeline__texteditor__advancedtext__btn btn btn-outline-primary`
+                )}
+                onClick={props.onClickWysiwygBtn}
+              >
+                {props.wysiwyg ? 'Text Simple' : 'Texte Avancé'}
+              </button>
+            </div>
+
+            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
+              <button
+                type='button'
+                className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
+                onClick={props.onClickValidateNewCommentBtn}
+              >
+                Envoyer
+                <div
+                  className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
+                  <i className='fa fa-paper-plane-o' />
+                </div>
+              </button>
+            </div>
           </div>
-
-        </div>
-      </form>
-    </div>
-  )
+        </form>
+      </div>
+    )
+  }
 }
 
 export default Timeline
@@ -121,7 +107,9 @@ Timeline.propTypes = {
   onChangeNewComment: PropTypes.func.isRequired,
   onClickValidateNewCommentBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
-  loggedUser: PropTypes.object
+  loggedUser: PropTypes.object,
+  wysiwyg: PropTypes.bool,
+  onClickWysiwygBtn: PropTypes.func
 }
 
 Timeline.defaultProps = {
@@ -131,5 +119,7 @@ Timeline.defaultProps = {
     name: '',
     avatar: ''
   },
-  timelineData: []
+  timelineData: [],
+  wysiwyg: false,
+  onClickWysiwygBtn: () => {}
 }