fixed popin fixed, timeline and textareaapp

src/component/Input/TextAreaApp/TextAreaApp.jsx

@@ -1,11 +1,16 @@
 import React from 'react'
-// import classnames from 'classnames'
+import PropTypes from 'prop-types'
 
 require('./TextAreaApp.styl')
 
 export const TextAreaApp = props =>
   <form className={`${props.customClass} editionmode`}>
-    <textarea className={`${props.customClass}__text editionmode__text`} />
+    <textarea
+      className={`${props.customClass}__text editionmode__text`}
+      value={props.text}
+      onChange={props.onChangeText}
+    />
+
     <div className={`${props.customClass}__button editionmode__button`}>
       <button
         type='button'
@@ -14,8 +19,23 @@ export const TextAreaApp = props =>
       >
         Annuler
       </button>
-      <button type='submit' className={`${props.customClass}__submit editionmode__button__submit btn btn-outline-primary`}>Valider</button>
+
+      <button
+        type='button'
+        className={`${props.customClass}__submit editionmode__button__submit btn btn-outline-primary`}
+        onClick={props.onClickValidateBtn}
+      >
+        Valider
+      </button>
     </div>
   </form>
 
 export default TextAreaApp
+
+TextAreaApp.propTypes = {
+  text: PropTypes.string.isRequired,
+  onChangeText: PropTypes.func.isRequired,
+  onClickCancelBtn: PropTypes.func.isRequired,
+  onClickValidateBtn: PropTypes.func.isRequired,
+  customClass: PropTypes.string
+}

src/component/PopinFixed/PopinFixedHeader.jsx

@@ -6,31 +6,39 @@ class PopinFixedHeader extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      editTitle: false
+      editTitle: false,
+      editTitleValue: ''
     }
   }
 
-  handleClickChangeTitleBtn = () => this.setState(prevState => ({
-    editTitle: !prevState.editTitle
-  }))
+  componentDidUpdate (prevProps) {
+    if (prevProps.title !== this.props.title) this.setState({editTitleValue: this.props.title})
+  }
+
+  onChangeTitle = e => {
+    const newTitle = e.target.value
+    this.setState({editTitleValue: newTitle})
+  }
+
+  handleClickChangeTitleBtn = () => {
+    if (this.state.editTitle) this.props.onValidateChangeTitle(this.state.editTitleValue)
+
+    this.setState(prevState => ({editTitle: !prevState.editTitle}))
+  }
 
   render () {
-    const { customClass, icon, name, onChangeTitle, onClickCloseBtn } = this.props
+    const { customClass, faIcon, title, onClickCloseBtn } = this.props
 
     return (
       <div className={classnames('wsContentGeneric__header', `${customClass}__header`)}>
         <div className={classnames('wsContentGeneric__header__icon', `${customClass}__header__icon`)}>
-          <i className={`fa fa-${icon}`} />
+          <i className={`fa fa-${faIcon}`} />
         </div>
 
         <div className={classnames('wsContentGeneric__header__title mr-auto', `${customClass}__header__title`)}>
-          {this.state.editTitle === false &&
-            <div>
-              {name}
-            </div>
-          }
-          {this.state.editTitle === true &&
-            <input onChange={onChangeTitle} />
+          {this.state.editTitle
+            ? <input value={this.state.editTitleValue} onChange={this.onChangeTitle} />
+            : <div>{title}</div>
           }
         </div>
 
@@ -38,7 +46,7 @@ class PopinFixedHeader extends React.Component {
           className={classnames('wsContentGeneric__header__edittitle', `${customClass}__header__changetitle`)}
           onClick={this.handleClickChangeTitleBtn}
         >
-          <i className='fa fa-pencil' />
+          {this.state.editTitle ? <i className='fa fa-check' /> : <i className='fa fa-pencil' />}
         </div>
 
         <div
@@ -55,15 +63,15 @@ class PopinFixedHeader extends React.Component {
 export default PopinFixedHeader
 
 PopinFixedHeader.propTypes = {
-  icon: PropTypes.string.isRequired,
+  faIcon: PropTypes.string.isRequired,
   onClickCloseBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
-  name: PropTypes.string,
-  onChangeTitle: PropTypes.func
+  title: PropTypes.string,
+  onValidateChangeTitle: PropTypes.func
 }
 
 PopinFixedHeader.defaultProps = {
   customClass: '',
-  name: '',
+  title: '',
   onChangeTitle: () => {}
 }

src/component/Timeline/Timeline.jsx

@@ -4,21 +4,22 @@ import classnames from 'classnames'
 
 require('./Timeline.styl')
 
-const Message = props => (
-  <li className={classnames(
-    `${props.customClass}__messagelist__item`,
-    'timeline__messagelist__item',
-    {
-      'sended': props.fromMe,
-      'received': !props.fromMe
-    }
-  )}>
+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')}>
-      <img src={props.avatar} alt='avatar' />
+      {props.avatar ? <img src={props.avatar} /> : ''}
     </div>
     <div
       className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
-      {props.createdAt.day} à {props.createdAt.hour}
+      {props.createdAt}
     </div>
     <div
       className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
@@ -27,19 +28,24 @@ const Message = props => (
   </li>
 )
 
-const Version = props => (
-  <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
+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.day}
+      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
+  }
+
   return (
     <div className='timeline'>
       <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
@@ -48,23 +54,23 @@ const Timeline = props => {
 
       <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
         { props.timelineData.map(content => {
-          switch (content.type) {
-            case 'message':
-              return <Message
+          switch (content.timelineType) {
+            case 'comment':
+              return <Comment
                 customClass={props.customClass}
-                avatar={content.author.avatar}
-                createdAt={content.createdAt}
-                text={content.text}
-                fromMe={props.loggedUser.id === content.author.id}
-                key={content.id}
+                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 'version':
-              return <Version
+            case 'revision':
+              return <Revision
                 customClass={props.customClass}
-                createdAt={content.createdAt}
-                number={content.number}
-                key={content.id}
+                createdAt={content.created}
+                number={content.revision_id}
+                key={`revision_${content.revision_id}`}
               />
           }
         })}
@@ -73,7 +79,11 @@ const Timeline = props => {
       <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 placeholder='Taper votre message ici' />
+          <textarea
+            placeholder='Taper votre message ici'
+            value={props.newComment}
+            onChange={props.onChangeNewComment}
+          />
         </div>
 
         <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__texteditor__wrapper')}>
@@ -86,8 +96,9 @@ const Timeline = props => {
 
           <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
             <button
-              type='submit'
+              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')}>
@@ -105,9 +116,12 @@ const Timeline = props => {
 export default Timeline
 
 Timeline.propTypes = {
+  timelineData: PropTypes.array.isRequired,
+  newComment: PropTypes.string.isRequired,
+  onChangeNewComment: PropTypes.func.isRequired,
+  onClickValidateNewCommentBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
-  loggedUser: PropTypes.object,
-  timelineData: PropTypes.array
+  loggedUser: PropTypes.object
 }
 
 Timeline.defaultProps = {

src/helper.js

@@ -1,8 +1,12 @@
-export const libHandleFetchResult = fetchResult => {
+export const libHandleFetchResult = async fetchResult => {
   switch (fetchResult.status) {
     case 200:
     case 304:
-      return fetchResult.json()
+      const resultJson = await fetchResult.clone().json()
+      return new Promise((resolve, reject) => resolve({
+        apiResponse: fetchResult,
+        body: resultJson
+      }))
     case 204:
     case 400:
     case 404:

src/index.dev.js

@@ -19,7 +19,7 @@ import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent
 
 ReactDOM.render(
   <div>
-    <PopinFixed customClass={`${'randomClass'}`} style={{display: 'none'}}>
+    <PopinFixed customClass={`${'randomClass'}`}>
       <PopinFixedHeader
         customClass={`${'randomClass'}`}
         icon={'fa fa-file-word-o'}
@@ -34,7 +34,7 @@ ReactDOM.render(
           <Delimiter />
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
           <BtnSwitch />
-          <TextAreaApp customClass={'randomClass'} />
+          <TextAreaApp customClass={'randomClass'} text={'woot'} />
         </div>
 
         <Timeline
@@ -48,15 +48,6 @@ ReactDOM.render(
         />
       </PopinFixedContent>
     </PopinFixed>
-
-    <CardPopupCreateContent
-      onClose={() => {}}
-      icon='fa-file-word-o'
-      color='#3f52e3'
-      title='Exemple of popup create content'
-      inputPlaceHolder='Exemple placeholder'
-      btnValidateLabel='Valider et créer'
-    />
   </div>
   , document.getElementById('content')
 )