make thread dynamic

dist/index.html

   <script src='./thread.app.dev.js'></script>
 
   <script type='text/javascript'>
-    GLOBAL_renderApp = appName => {
-      switch (appName) {
+    GLOBAL_renderApp = app => {
+      switch (app.appData.name) {
         case 'PageHtml':
           appPageHtml.renderApp('appContainer'); break
         case 'Thread':

src/component/Thread.jsx

 import React from 'react'
-// import classnames from 'classnames'
-import imgProfil from '../img/imgProfil.png'
+import classnames from 'classnames'
 
-const PageHtml = props => {
+const Thread = props => {
   return (
-    <div className='wsFileThread wsFileGeneric'>
-      <div className='wsFileThread__header wsFileGeneric__header'>
-        <div className='wsFileGeneric__header__icon'>
-          <i className='fa fa-comments' />
-        </div>
-
-        <div className='wsFileGeneric__header__text mr-auto'>
-          Discussions à propos du nouveau système de facturation
-        </div>
-
-        <div className='wsFileGeneric__header__close'>
-          <i className='fa fa-times' />
-        </div>
-      </div>
-
-      <div className='wsFileGeneric__option'>
-        <div className='wsFileGeneric__option__menu'>
-          <div className='wsFileGeneric__option__menu__action'>
-            <i className='fa fa-pencil' />
-          </div>
-
-          <div className='wsFileGeneric__option__menu__action'>
-            <i className='fa fa-archive' />
-          </div>
-
-          <div className='wsFileGeneric__option__menu__action'>
-            <i className='fa fa-trash' />
-          </div>
-        </div>
-      </div>
-
-      <div className='wsFileThread__wrapper wsFileGeneric__wrapper'>
-        <ul className='wsFileThread__messagelist wsFileGeneric__messagelist'>
-
-          <li className='wsFileThread__messagelist__item wsFileGeneric__messagelist__item sended'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
+    <div className='wsContentThread'>
+      <ul className='wsContentThread__messagelist wsFileGeneric__messagelist'>
+        { props.listMessage.map(msg =>
+          <li className={classnames('wsContentThread__messagelist__item', 'wsFileGeneric__messagelist__item', {
+            'sended': props.loggedUser.id === msg.author.id,
+            'received': !(props.loggedUser.id === msg.author.id)
+          })} key={msg.id}>
+            <div className='wsContentThread__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+              <img src={msg.author.avatar} alt='avatar' />
             </div>
 
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h45
+            <div className='wsContentThread__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+              {msg.createdAt.day} à {msg.createdAt.hour}
             </div>
 
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-              Proident esse laboris in sed officia exercitation ut anim ea.
+            <div className='wsContentThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              {msg.text}
             </div>
           </li>
+        )}
+      </ul>
 
-          <li className='wsFileGeneric__messagelist__item received'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h47
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__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='wsFileGeneric__messagelist__item sended'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h45
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-              Proident esse laboris in sed officia exercitation ut anim ea.
-            </div>
-          </li>
+      <form className='wsContentThread__texteditor wsFileGeneric__texteditor'>
+        <div className='wsContentThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
+          <input type='text' className='wsContentThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
 
-          <li className='wsFileGeneric__messagelist__item sended'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h45
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-              Proident esse laboris in sed officia exercitation ut anim ea.
-            </div>
-          </li>
-
-          <li className='wsFileGeneric__messagelist__item received'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h47
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__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='wsFileGeneric__messagelist__item received'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h47
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__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='wsFileGeneric__messagelist__item sended'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h45
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-              Proident esse laboris in sed officia exercitation ut anim ea.
-            </div>
-          </li>
-
-          <li className='wsFileGeneric__messagelist__item received'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h47
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__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='wsFileGeneric__messagelist__item sended'>
-            <div className='wsFileGeneric__messagelist__item__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='wsFileGeneric__messagelist__item__createhour'>
-              27/11/17 à 11h45
-            </div>
-            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-              Proident esse laboris in sed officia exercitation ut anim ea.
-            </div>
-          </li>
-        </ul>
-
-        <form className='wsFileThread__texteditor wsFileGeneric__texteditor'>
-          <div className='wsFileThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
-            <input type='text' className='wsFileThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
-
-            <div className='wsFileThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
-              <i className='fa fa-font' />
-            </div>
+          <div className='wsContentThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
+            <i className='fa fa-font' />
           </div>
+        </div>
 
-          <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
-            <textarea />
-          </div>
+        <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
+          <textarea />
+        </div>
 
-          <div className='wsFileThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
-            <button type='submit' className='wsFileThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
-              Envoyer
-              <div className='wsFileThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
-                <i className='fa fa-paper-plane-o' />
-              </div>
-            </button>
-          </div>
-        </form>
-      </div>
+        <div className='wsContentThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
+          <button type='submit' className='wsContentThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
+            Envoyer
+            <div className='wsContentThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
+              <i className='fa fa-paper-plane-o' />
+            </div>
+          </button>
+        </div>
+      </form>
     </div>
   )
 }
 
-export default PageHtml
+export default Thread

src/container/Thread.jsx

 import React from 'react'
 import ThreadComponent from '../component/Thread.jsx'
 import {
+  handleFetchResult,
   PopinFixed,
   PopinFixedHeader,
   PopinFixedOption,
-  PopinFixedContent,
-  Timeline
+  PopinFixedContent
 } from 'tracim_lib'
+import { listMessageDebugData } from '../listMessageDebugData.js'
+import { FETCH_CONFIG } from '../helper.js'
 
-class pageHtml extends React.Component {
+const debug = {
+  loggedUser: {
+    id: 5,
+    username: 'Stoi',
+    firstname: 'John',
+    lastname: 'Doe',
+    email: 'osef@algoo.fr',
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
+  },
+  workspace: {
+    id: 1,
+    title: 'Test debug workspace'
+  },
+  content: {
+    id: 2,
+    type: 'thread',
+    status: 'validated',
+    title: 'test debug title'
+  },
+  listMessage: listMessageDebugData,
+  appConfig: {
+    name: 'Thread',
+    customClass: 'wsContentThread',
+    icon: 'fa fa-comments-o',
+    apiUrl: 'http://localhost:3001'
+  }
+}
+
+class Thread extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
       appName: 'Thread',
-      data: props.data
-        ? props.data
-        : { // for debugg purpose
-          file: {
-            version: '3',
-            text: 'Bonjour ?'
-          },
-          appData: {
-            name: 'Thread',
-            componentLeft: 'Thread',
-            componentRight: undefined,
-            customClass: 'wsFileThread',
-            icon: 'fa fa-comments-o'
-          }
-        }
+      isVisible: true,
+      loggedUser: props.app ? props.app.loggedUser : debug.loggedUser,
+      workspace: props.app ? props.app.workspace : debug.workspace,
+      content: props.app ? props.app.content : debug.content,
+      listMessage: props.app ? props.app.content.message_list : debug.listMessage,
+      appConfig: props.app ? props.app.appConfig : debug.appConfig
     }
 
-    document.addEventListener('appCustomEvent', this.customEventReducer, false)
+    document.addEventListener('appCustomEvent', this.customEventReducer)
+  }
+
+  async componentDidMount () {
+    const { workspace, content, appConfig } = this.state
+    if (content.id === '-1') return // debug case
+
+    const fetchResultThread = await fetch(`${appConfig.apiUrl}/workspace/${workspace.id}/content/${content.id}`, {
+      ...FETCH_CONFIG,
+      method: 'GET'
+    })
+
+    fetchResultThread.json = await handleFetchResult(fetchResultThread)
+
+    this.setState({
+      content: fetchResultThread.json
+    })
   }
 
   customEventReducer = ({detail}) => {
   }
 
   handleClickBtnCloseApp = () => {
-    GLOBAL_unmountApp(this.state.appName)
+    this.setState({ isVisible: false })
   }
 
   render () {
-    const { file, appData } = this.state.data
+    const { isVisible, loggedUser, content, listMessage, appConfig } = this.state
+
+    if (!isVisible) return null
 
     return (
-      <PopinFixed customClass={`${appData.customClass}`}>
+      <PopinFixed customClass={`${appConfig.customClass}`}>
         <PopinFixedHeader
-          customClass={`${appData.customClass}`}
-          icon={appData.icon}
-          name={file.title}
+          customClass={`${appConfig.customClass}`}
+          icon={appConfig.icon}
+          name={content.title}
           onClickCloseBtn={this.handleClickBtnCloseApp}
         />
 
-        <PopinFixedOption customClass={`${appData.customClass}`} />
+        <PopinFixedOption customClass={`${appConfig.customClass}`} />
 
-        <PopinFixedContent customClass={`${appData.customClass}__contentpage`}>
+        <PopinFixedContent customClass={`${appConfig.customClass}__contentpage`}>
           <ThreadComponent
-            // version={file.version}
-            // text={file.text}
-            key={'PageHtml'}
-          />
-
-          <Timeline
-            customClass={`${appData.customClass}__contentpage`}
-            key={'pageHtml__timeline'}
+            title={content.title}
+            listMessage={listMessage}
+            loggedUser={loggedUser}
           />
         </PopinFixedContent>
       </PopinFixed>
   }
 }
 
-export default pageHtml
+export default Thread

src/css/index.styl

 
 .wsContentThread
   width 550px
+  flex-grow 1
+  margin-bottom 0
+  border-bottom 1px solid grey
+  overflow-Y auto
   &__header
     color white
     background-color threadColor
     height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
   &__messagelist
     padding 15px 35px
+    list-style none
     &__item
+      &__avatar
+        position relative
+        top 43px
+        left -25px
+        & > img
+          width 45px
+          height 45px
+          border-radius 30px
+      &__createhour
+        margin-left 30px
+        opacity 0.7
+        font-size 14px
       &__content
+        border 1px solid grey
+        border-radius 5px
+        padding 15px
+        background-color off-white
+        font-size 15px
+        z-index -1
         color darkBlue
+
   &__texteditor
     &__simpletext
       &__input
       &__btn
         color darkBlue
 
+.sended
+  .wsFileGeneric__messagelist__item__content
+    margin-right 25%
+
 .received
-  .wsContentThread__messagelist__item__content
-    background-color darkBlue
-    color white
+  .wsFileGeneric__messagelist__item
+    &__avatar
+      left 93%
+    &__createhour
+      text-align right
+      margin-right 50px
+    &__content
+      margin-left 25%
+      background-color darkBlue
+      color white
 
 .activeEditionTitle
   .wsFileThread

src/listMessageDebugData.js

+export const listMessageDebugData = [{
+  id: 0,
+  author: {
+    id: 5,
+    username: 'Peter',
+    avatar: 'https://avatars3.githubusercontent.com/u/1104637?s=460&v=4'
+  },
+  text: 'Tu aurais envie de manger quoi exactement ?',
+  createdAt: {
+    day: '05/03/18',
+    hour: '10h00'
+  }
+}, {
+  id: 1,
+  author: {
+    id: 3,
+    username: 'Steven',
+    avatar: 'https://avatars3.githubusercontent.com/u/705214?s=460&v=4'
+  },
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h59'
+  },
+  text: 'Ben je sais pas, par exemple une quiche lorraine.'
+}, {
+  id: 2,
+  author: {
+    id: 5,
+    username: 'Peter',
+    avatar: 'https://avatars3.githubusercontent.com/u/1104637?s=460&v=4'
+  },
+  text: 'Une ouiche.',
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h59'
+  }
+}, {
+  id: 3,
+  author: {
+    id: 3,
+    username: 'Steven',
+    avatar: 'https://avatars3.githubusercontent.com/u/705214?s=460&v=4'
+  },
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h59'
+  },
+  text: 'Quoi ?'
+}, {
+  id: 4,
+  author: {
+    id: 5,
+    username: 'Peter',
+    avatar: 'https://avatars3.githubusercontent.com/u/1104637?s=460&v=4'
+  },
+  text: 'On dit « une ouiche lorraine ».',
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h59'
+  }
+}, {
+  id: 5,
+  author: {
+    id: 3,
+    username: 'Steven',
+    avatar: 'https://avatars3.githubusercontent.com/u/705214?s=460&v=4'
+  },
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h58'
+  },
+  text: 'Tu es sûr ?'
+}, {
+  id: 6,
+  author: {
+    id: 3,
+    username: 'Steven',
+    avatar: 'https://avatars3.githubusercontent.com/u/705214?s=460&v=4'
+  },
+  text: 'Ça fait bizarre, « ouiche lorraine ».',
+  createdAt: {
+    day: '05/03/18',
+    hour: '09h59'
+  }
+}]
+
+export default listMessageDebugData

webpack.config.js

 console.log('isProduction : ', isProduction)
 
 module.exports = {
-  entry: isProduction ? './src/index.js' : './src/index.dev.js',
+  entry: isProduction
+    ? './src/index.js' // only one instance of babel-polyfill is allowed
+    : ['babel-polyfill', './src/index.dev.js'],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: isProduction ? 'thread.app.js' : 'thread.app.dev.js',