added dynamic integration of pageHtml + beginning of Thread

jsonserver/static_db.json

@@ -18,7 +18,8 @@
         "id": 1,
         "title": "La programmation fonctionnelle",
         "type": "pageHtml",
-        "status": "validated"
+        "status": "validated",
+        "text": "<h1>Mon titre nul</h1>Je suis le contenu de cette fameuse <b>page HTML</b><br /> sur la programmation fonctionnelle"
       },
       {
         "id": 2,
@@ -28,25 +29,25 @@
       },
       {
         "id": 6,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Une photo moche",
         "type": "file",
         "status": "current"
       },
       {
         "id": 10,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "le README.md d'un random repo github",
         "type": "pageMarkdown",
         "status": "current"
       },
       {
         "id": 7,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Une liste de truc à faire que je ferai jamais",
         "type": "task",
         "status": "current"
       },
       {
         "id": 8,
-        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "title": "Ça, ça marche pas. Merci de le fix",
         "type": "issue",
         "status": "current"
       },

src/action-creator.sync.js

@@ -7,3 +7,7 @@ export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data:
 
 export const WORKSPACE = 'Workspace'
 export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`, workspace })
+
+export const FILE_CONTENT = 'FileContent'
+export const setActiveFileContent = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
+export const hideActiveFileContent = () => ({ type: `Set/${FILE_CONTENT}/Hide` })

src/component/Workspace/FileContentViewer.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PopinFixed from '../common/PopinFixed/PopinFixed'
+import PopinFixedHeader from '../common/PopinFixed/PopinFixedHeader.jsx'
+import PopinFixedOption from '../common/PopinFixed/PopinFixedOption.jsx'
+import PopinFixedContent from '../common/PopinFixed/PopinFixedContent.jsx'
+import PageHtml from './FileType/PageHtml.jsx'
+import Thread from './FileType/Thread.jsx'
+import Timeline from '../Timeline.jsx'
+import { FILE_TYPE } from '../../helper.js'
+
+const FileContentViewer = props => {
+  const { customClass, icon } = FILE_TYPE.find(f => f.name === props.file.type) || {customClass: '', icon: ''}
+
+  const [leftPart, rightPart] = (() => {
+    switch (props.file.type) {
+      case FILE_TYPE[0].name: // pageHtml
+        return [
+          <PageHtml version={props.file.version} text={props.file.text} />,
+          <Timeline customClass={`${customClass}__contentpage`} />
+        ]
+      case FILE_TYPE[3].name: // thread
+        return [
+          <Thread />
+        ]
+    }
+  })()
+
+  return (
+    <PopinFixed customClass={`${customClass}`}>
+      <PopinFixedHeader
+        customClass={`${customClass}`}
+        icon={icon}
+        name={props.file.title}
+        onClickCloseBtn={props.onClose}
+      />
+
+      <PopinFixedOption customClass={`${customClass}`} />
+
+      <PopinFixedContent customClass={`${customClass}__contentpage`}>
+        { leftPart }
+        { rightPart }
+      </PopinFixedContent>
+    </PopinFixed>
+  )
+}
+
+export default FileContentViewer
+
+FileContentViewer.PropTypes = {
+  file: PropTypes.shape({
+    type: PropTypes.oneOf(FILE_TYPE.map(f => f.name)).isRequired,
+    title: PropTypes.string.isRequired
+  }).isRequired,
+  onClose: PropTypes.func.isRequired
+}

src/component/Workspace/FileItem.jsx

@@ -4,22 +4,7 @@ import classnames from 'classnames'
 import { FILE_TYPE } from '../../helper.js'
 
 const FileItem = props => {
-  const iconType = (() => {
-    switch (props.type) {
-      case FILE_TYPE.PAGE_HTML:
-        return 'fa fa-file-word-o'
-      case FILE_TYPE.PAGE_MARKDOWN:
-        return 'fa fa-file-code-o'
-      case FILE_TYPE.FILE:
-        return 'fa fa-file-text-o docandfile-color'
-      case FILE_TYPE.THREAD:
-        return 'fa fa-comments-o talk-color'
-      case FILE_TYPE.TASK:
-        return 'fa fa-list-ul task-color'
-      case FILE_TYPE.ISSUE:
-        return 'fa fa-ticket'
-    }
-  })()
+  const iconType = (FILE_TYPE.find(f => f.name === props.type) || {icon: ''}).icon
 
   const iconStatus = (() => {
     switch (props.status) {

src/component/Workspace/FileType/PageHtml.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const PageHtml = props => {
+  return (
+    <div className='wsFilePageHtml__contentpage__textnote'>
+      <div className='wsFilePageHtml__contentpage__textnote__latestversion'>
+        { props.version }
+      </div>
+      <div className='wsFilePageHtml__contentpage__textnote__text'>
+        { props.text }
+      </div>
+    </div>
+  )
+}
+
+export default PageHtml

src/container/FileType/Thread.jsx → src/component/Workspace/FileType/Thread.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import classnames from 'classnames'
-import imgProfil from '../../img/imgProfil.png'
+import imgProfil from '../../../img/imgProfil.png'
 
 class Thread extends Component {
   render () {

src/component/common/PopinFixed/PopinFixedContent.jsx

@@ -1,21 +1,42 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import PageHtml from '../../Workspace/FileType/PageHtml.jsx'
+import Thread from '../../Workspace/FileType/Thread.jsx'
+import Timeline from '../../Timeline.jsx'
 
 const PopinFixedContent = props => {
-  return (
-    <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
-      <div className={classnames('wsFileGeneric__textnote', `${props.customClass}__textnote`)} />
+  return props.children.length === 2
+    ? (
+      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+        {props.children[0]}
 
-      <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
-        {props.children}
+        <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
+          {props.children[1]}
+        </div>
       </div>
-    </div>
-  )
+    )
+    : (
+      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+        { props.children }
+      </div>
+    )
 }
 
 export default PopinFixedContent
 
 PopinFixedContent.propTypes = {
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  // from http://www.mattzabriskie.com/blog/react-validating-children
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
+    if (
+      (Array.isArray(children.length) && (
+        children.length > 2 ||
+        (children.length === 2 && children.some(c => ![PageHtml, Thread, Timeline].includes(c.type)))
+      )) ||
+      (children.type === Timeline)
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be one of [PageHtml, Thread, Timeline, undefined].`)
+    }
+  }).isRequired
 }

src/component/common/PopinFixed/PopinFixedHeader.jsx

@@ -17,7 +17,10 @@ const PopinFixedHeader = props => {
         <i className='fa fa-pencil' />
       </div>
 
-      <div className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}>
+      <div
+        className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}
+        onClick={props.onClickCloseBtn}
+      >
         <i className='fa fa-times' />
       </div>
     </div>
@@ -28,6 +31,7 @@ export default PopinFixedHeader
 
 PopinFixedHeader.propTypes = {
   icon: PropTypes.string.isRequired,
+  onClickCloseBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
   name: PropTypes.string
 }

src/container/FileType/PageHtml.jsx

@@ -1,73 +0,0 @@
-import React, { Component } from 'react'
-import PopinFixed from '../../component/common/PopinFixed/PopinFixed'
-import PopinFixedHeader from '../../component/common/PopinFixed/PopinFixedHeader.jsx'
-import PopinFixedOption from '../../component/common/PopinFixed/PopinFixedOption.jsx'
-import PopinFixedContent from '../../component/common/PopinFixed/PopinFixedContent.jsx'
-import Timeline from '../../component/Timeline.jsx'
-
-class PageHtml extends Component {
-  render () {
-    return (
-      <PopinFixed customClass={'wsFileText'}>
-        <PopinFixedHeader
-          customClass='wsFileText'
-          icon='fa fa-file-word-o'
-          name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
-        />
-
-        <PopinFixedOption customClass={'wsFileText'} />
-
-        <PopinFixedContent customClass={'wsFileText__contentpage'}>
-          <Timeline customClass={'wsFileText__contentpage'} />
-        </PopinFixedContent>
-      </PopinFixed>
-    )
-  }
-}
-
-export default PageHtml
-
-/*
-      <div className={classnames('wsFileText wsFileGeneric', {'visible': this.props.visible})}>
-
-        <div className='wsFileText__contentpage wsFileGeneric__contentpage'>
-          <div className='wsFileText__contentpage__textnote'>
-            <div className='wsFileText__contentpage__textnote__latestversion'>
-              Dernière version : v3
-            </div>
-            <div className='wsFileText__contentpage__textnote__title'>
-              Titre de 30px de font size
-            </div>
-            <div className='wsFileText__contentpage__textnote__data'>
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-              <br />
-              Labore tempor sunt id quis quis velit ut officia amet ut
-              adipisicing in in commodo exercitation cupidatat culpa
-              eiusmo dolor consectetur dolor ut proident proident culpamet
-              denim consequat in sit ex ullamco duis.
-            </div>
-          </div>
-          <div className='wsFileText__contentpage__wrapper wsFileGeneric__wrapper'>
-
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default PageText
-*/

src/container/WorkspaceContent.jsx

@@ -3,13 +3,13 @@ import { connect } from 'react-redux'
 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-// import Thread from './FileType/Thread.jsx'
-import PageHtml from './FileType/PageHtml.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
+import FileContentViewer from '../component/Workspace/FileContentViewer.jsx'
 import { getWorkspaceContent } from '../action-creator.async.js'
+import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
@@ -23,8 +23,16 @@ class WorkspaceContent extends React.Component {
     this.props.dispatch(getWorkspaceContent(/* this.props.workspace.id */1))
   }
 
+  handleClickFileItem = file => {
+    this.props.dispatch(setActiveFileContent(file))
+  }
+
+  handleClickCloseBtn = () => {
+    this.props.dispatch(hideActiveFileContent())
+  }
+
   render () {
-    const { workspace } = this.props
+    const { workspace, activeFileContent } = this.props
 
     return (
       <PageWrapper customeClass='workspace'>
@@ -48,7 +56,7 @@ class WorkspaceContent extends React.Component {
                   name={c.title}
                   type={c.type}
                   status={c.status}
-                  onClickItem={() => this.setState({activeFileType: 'file'})}
+                  onClickItem={() => this.handleClickFileItem(c)}
                   key={c.id}
                 />
               )
@@ -57,10 +65,12 @@ class WorkspaceContent extends React.Component {
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <PageHtml visible={this.state.activeFileType === 'file'} />
-          {/*
-          <Thread visible={this.state.activeFileType === 'chat'} />
-          */}
+          { activeFileContent.display &&
+            <FileContentViewer
+              file={activeFileContent}
+              onClose={this.handleClickCloseBtn}
+            />
+          }
         </PageContent>
 
       </PageWrapper>
@@ -68,5 +78,5 @@ class WorkspaceContent extends React.Component {
   }
 }
 
-const mapStateToProps = ({ workspace }) => ({ workspace })
+const mapStateToProps = ({ workspace, activeFileContent }) => ({ workspace, activeFileContent })
 export default connect(mapStateToProps)(WorkspaceContent)

src/css/PageHtml.styl

@@ -1,4 +1,4 @@
-.wsFileText
+.wsFilePageHtml
   width 1200px
   height calc(100% - 85px)
   overflow-Y auto
@@ -20,14 +20,8 @@
       &__latestversion
         text-align right
         opacity 0.7
-      &__title
-        margin 10px 0
-        font-size 30px
-        color htmlColor
-      &__data
-        flex-grow 1
-        flex-shrink 1
-        flex-basis 0
+      &__text
+        font-size 14px
     &__wrapper
       margin 10px
       border-radius 10px
@@ -86,28 +80,17 @@
             border-color htmlColor
             background-color htmlColor
 
-/***** CLASS MESSAGELISTSIZE *****/
-
 .messagelistOpen
-  .wsFileText__contentpage__messagelist
+  .wsFilePageHtml__contentpage__messagelist
     flex 0
     min-height 0
 
-/*********************************/
-
-/***** SENDER RECEIVER *****/
-
 .received
-  .wsFileText__contentpage__messagelist__item__content
+  .wsFilePageHtml__contentpage__messagelist__item__content
       background-color htmlColor
 
-/*****************************/
-
-/**** MEDIA QUERIES ****/
-
 @media (min-width: max-xs) and (max-width: max-lg)
-
-  .wsFileText
+  .wsFilePageHtml
     &__contentpage
       display block
       overflow-Y scroll
@@ -123,11 +106,9 @@
       &__texteditor
         &__simpletext
           display inline-flex
-          display ms-inline-flex
           width 60%
         &__submit
           display inline-flex
-          display ms-inline-flex
           margin 10px 0
           &__btn
             display flex
@@ -135,46 +116,28 @@
             &__icon
               margin-left 15px
 
-/**** MEDIA 992px & 1199px ****/
-
 @media (min-width: min-lg) and (max-width: max-lg)
-
-  .wsFileText
+  .wsFilePageHtml
     width 692px
     &__contentpage__texteditor__simpletext
       margin-left 15px
 
-/******************************/
-
-/**** MEDIA 768px & 991px ****/
-
 @media (min-width: min-md) and (max-width: max-md)
-
-  .wsFileText
+  .wsFilePageHtml
     width 768px
     &__contentpage__texteditor__simpletext
       margin-left 25px
 
-/******************************/
-
-/**** MEDIA 576px & 767px ****/
-
 @media (min-width: min-sm) and (max-width: max-sm)
-
-  .wsFileText
+  .wsFilePageHtml
       top 69px
       width 576px
       height calc(100% - 69px)
       &__contentpage__texteditor__simpletext
         margin-left 10px
 
-/******************************/
-
-/**** MEDIA 575px ****/
-
 @media (max-width: max-xs)
-
-  .wsFileText
+  .wsFilePageHtml
     top 70px
     height calc(100% - 70px)
     width 100%

src/helper.js

@@ -5,11 +5,28 @@ export const FETCH_CONFIG = {
   }
 }
 
-export const FILE_TYPE = {
-  PAGE_HTML: 'pageHtml',
-  PAGE_MARKDOWN: 'pageMarkdown',
-  FILE: 'file',
-  THREAD: 'thread',
-  TASK: 'task',
-  ISSUE: 'issue'
-}
+export const FILE_TYPE = [{
+  name: 'pageHtml',
+  customClass: 'wsFilePageHtml',
+  icon: 'fa fa-file-word-o'
+}, {
+  name: 'pageMarkdown',
+  customClass: 'wsFilePageMarkdown',
+  icon: 'fa fa-file-code-o'
+}, {
+  name: 'file',
+  customClass: 'wsFileFile',
+  icon: 'fa fa-file-text-o'
+}, {
+  name: 'thread',
+  customClass: 'wsFileThread',
+  icon: 'fa fa-comments-o'
+}, {
+  name: 'task',
+  customClass: 'wsFileTask',
+  icon: 'fa fa-list-ul'
+}, {
+  name: 'issue',
+  customClass: 'wsFileIssue',
+  icon: 'fa fa-ticket'
+}]

src/reducer/activeFileContent.js

@@ -0,0 +1,22 @@
+import { FILE_CONTENT } from '../action-creator.sync.js'
+
+export default function activeFileContent (state = {
+  display: false,
+  type: '',
+  title: '',
+  status: ''
+}, action) {
+  switch (action.type) {
+    case `Set/${FILE_CONTENT}/Active`:
+      return {
+        display: true,
+        ...action.file
+      }
+
+    case `Set/${FILE_CONTENT}/Hide`:
+      return {...state, display: false}
+
+    default:
+      return state
+  }
+}

src/reducer/fileType/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux'
+
+// import color from './color.js'
+// import size from './size.js'
+// import price from './price.js'
+// import multicolor from './multicolor.js'
+
+export default combineReducers({
+
+})

src/reducer/fileType/pageHtml.js

@@ -0,0 +1,10 @@
+export default function pageHtml (state = {
+  title: '',
+  version: 0,
+  text: ''
+}, action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}

src/reducer/root.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux'
 import user from './user.js'
 import workspace from './workspace.js'
+import activeFileContent from './activeFileContent.js'
 
-const rootReducer = combineReducers({ user, workspace })
+const rootReducer = combineReducers({ user, workspace, activeFileContent })
 
 export default rootReducer