started refactor file content into plugin

jsonserver/server.js

   else return res.jsonp('error')
 })
 
+server.get('/plugin/file_content', (req, res) => res.jsonp(jsonDb.file_content))
+
 server.get('/user/is_logged_in', (req, res) => res.jsonp(jsonDb.user_logged))
 
 server.get('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))

jsonserver/static_db.json

       "email": "osef@algoo.fr"
     }
   },
+  "file_content": [{
+    "name": "PageHtml",
+    "componentLeft": "PageHtml",
+    "componentRight": "Timeline",
+    "customClass": "wsContentPageHtml",
+    "icon": "fa fa-file-word-o"
+  }, {
+    "name": "PageMarkdown",
+    "componentLeft": "PageMarkdown",
+    "componentRight": "undefined",
+    "customClass": "wsContentPageMarkdown",
+    "icon": "fa fa-file-code-o"
+  }, {
+    "name": "File",
+    "componentLeft": "File",
+    "componentRight": "undefined",
+    "customClass": "wsContentFile",
+    "icon": "fa fa-file-text-o"
+  }, {
+    "name": "Thread",
+    "componentLeft": "Thread",
+    "componentRight": "undefined",
+    "customClass": "wsContentThread",
+    "icon": "fa fa-comments-o"
+  }, {
+    "name": "Task",
+    "componentLeft": "Task",
+    "componentRight": "undefined",
+    "customClass": "wsContentTask",
+    "icon": "fa fa-list-ul"
+  }, {
+    "name": "Issue",
+    "componentLeft": "Issue",
+    "componentRight": "undefined",
+    "customClass": "wsContentIssue",
+    "icon": "fa fa-ticket"
+  }],
   "workspace_detail": {
     "id": 1,
     "title": "Mission interne - développement",
       {
         "id": 1,
         "title": "La programmation fonctionnelle",
-        "type": "pageHtml",
+        "type": "PageHtml",
         "status": "validated",
+        "version": "3",
         "text": "<h1>Mon titre nul</h1>Je suis le contenu de cette fameuse <b>page HTML</b><br /> sur la programmation fonctionnelle"
       },
       {
         "id": 2,
         "title": "La prommation fonctionnelle est-elle vraiment utile ?",
-        "type": "thread",
+        "type": "Thread",
         "status": "current"
       },
       {
         "id": 6,
         "title": "Une photo moche",
-        "type": "file",
+        "type": "File",
         "status": "current"
       },
       {
         "id": 10,
         "title": "le README.md d'un random repo github",
-        "type": "pageMarkdown",
+        "type": "PageMarkdown",
         "status": "current"
       },
       {
         "id": 7,
         "title": "Une liste de truc à faire que je ferai jamais",
-        "type": "task",
+        "type": "Task",
         "status": "current"
       },
       {
         "id": 8,
         "title": "Ça, ça marche pas. Merci de le fix",
-        "type": "issue",
+        "type": "Issue",
         "status": "current"
       },
       {
           {
             "id": 4,
             "title": "des trucs de backend",
-            "type": "file",
+            "type": "File",
             "status": "outdated"
           },
           {
             "id": 5,
             "title": "on s'emmerde",
-            "type": "pageHtml",
+            "type": "PageHtml",
             "status": "outdated"
           }
         ]

src/action-creator.async.js

   updateUserConnected,
   updateUserData,
   WORKSPACE,
-  updateWorkspaceData
+  updateWorkspaceData,
+  PLUGIN_LIST,
+  setPluginList
 } from './action-creator.sync.js'
 
 /*
   })
   if (fetchGetWorkspaceContent.status === 200) dispatch(updateWorkspaceData(fetchGetWorkspaceContent.json))
 }
+
+export const getPluginList = () => async dispatch => {
+  const fetchGetPluginList = await fetchWrapper({
+    url: `http://localhost:3001/plugin/file_content`,
+    param: {...FETCH_CONFIG, method: 'GET'},
+    actionName: PLUGIN_LIST,
+    dispatch
+  })
+  if (fetchGetPluginList.status === 200) dispatch(setPluginList(fetchGetPluginList.json))
+}

src/action-creator.sync.js

 export const FILE_CONTENT = 'FileContent'
 export const setActiveFileContent = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
 export const hideActiveFileContent = () => ({ type: `Set/${FILE_CONTENT}/Hide` })
+
+export const PLUGIN_LIST = 'Plugin/List'
+export const setPluginList = pluginList => ({ type: `Set/${PLUGIN_LIST}`, pluginList })

src/component/PluginContentType.jsx

+import React from 'react'
+import PageHtml from '../plugin/ContentType/PageHtml/PageHtml.jsx'
+import Thread from '../plugin/ContentType/Thread/Thread.jsx'
+import Timeline from './Timeline.jsx'
+import {FILE_TYPE} from '../helper.js'
+
+const PluginContentType = props => {
+  // 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={`${props.customClass}__contentpage`} />
+  //       ]
+  //     case FILE_TYPE[3].name: // thread
+  //       return [
+  //         <Thread />
+  //       ]
+  //   }
+  // })()
+  // return [leftPart, rightPart]
+  const { componentLeft, componentRight, customClass, } = FILE_TYPE.find(p => p.name === props.file.type)
+
+  return [
+    genericPlugin.componentLeft,
+    genericPlugin.componentRight
+  ]
+}
+
+export default PluginContentType

src/component/Workspace/FileContentViewer.jsx

 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'
+// import PluginContentType from '../PluginContentType.jsx'
+import PageHtml from '../../plugin/ContentType/PageHtml/PageHtml.jsx'
+// import Thread from '../../plugin/ContentType/Thread/Thread.jsx'
 
 const FileContentViewer = props => {
-  const { customClass, icon } = FILE_TYPE.find(f => f.name === props.file.type) || {customClass: '', icon: ''}
+  const defaultPlugin = {
+    customClass: '',
+    icon: '',
+    componentLeft: undefined,
+    componentRight: undefined
+  }
+  const { customClass, icon, componentLeft, componentRight } = FILE_TYPE.find(f => f.name === props.file.type) || defaultPlugin
 
-  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 />
-        ]
+  const PluginLeft = props => {
+    console.log('componentLeft === PageHtml.name', componentLeft === PageHtml.name)
+    switch (componentLeft) {
+      case PageHtml.name:
+        return <PageHtml version={props.file.version} text={props.file.text} />
     }
-  })()
+    // componentLeft is a string, I cant do <componentLeft /> because it needs to be a react object (component) like PageHtml is
+  }
 
   return (
     <PopinFixed customClass={`${customClass}`}>
       <PopinFixedOption customClass={`${customClass}`} />
 
       <PopinFixedContent customClass={`${customClass}__contentpage`}>
-        { leftPart }
-        { rightPart }
+        {/* <PluginContentType customeClass={customClass} file={props.file} /> */}
+        <PluginLeft file={props.file} />
       </PopinFixedContent>
     </PopinFixed>
   )

src/component/common/PopinFixed/PopinFixedContent.jsx

 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'
+// import PageHtml from '../../../plugin/ContentType/PageHtml/PageHtml.jsx'
+// import Thread from '../../../plugin/ContentType/Thread/Thread.jsx'
+// import Timeline from '../../Timeline.jsx'
 
 const PopinFixedContent = props => {
   return props.children.length === 2
 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
+  // 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/container/WorkspaceContent.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 {
+  getPluginList,
+  getWorkspaceContent
+} from '../action-creator.async.js'
 import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
 
 class WorkspaceContent extends React.Component {
 
   componentDidMount () {
     this.props.dispatch(getWorkspaceContent(/* this.props.workspace.id */1))
+    this.props.dispatch(getPluginList())
   }
 
   handleClickFileItem = file => {
+    console.log(file)
     this.props.dispatch(setActiveFileContent(file))
   }
 

src/css/index.styl

 @import 'FileItemHeader'
 @import 'Folder'
 
-@import 'Thread'
-@import 'PageHtml'
+@import '../plugin/ContentType/Thread/Thread.styl'
+@import '../plugin/ContentType/PageHtml/PageHtml.styl'
 @import 'Timeline'

src/helper.js

 }
 
 export const FILE_TYPE = [{
-  name: 'pageHtml',
-  customClass: 'wsFilePageHtml',
+  name: 'PageHtml',
+  componentLeft: 'PageHtml',
+  componentRight: 'Timeline',
+  customClass: 'wsContentPageHtml',
   icon: 'fa fa-file-word-o'
 }, {
-  name: 'pageMarkdown',
-  customClass: 'wsFilePageMarkdown',
+  name: 'PageMarkdown',
+  componentLeft: 'PageMarkdown',
+  componentRight: 'undefined',
+  customClass: 'wsContentPageMarkdown',
   icon: 'fa fa-file-code-o'
 }, {
-  name: 'file',
-  customClass: 'wsFileFile',
+  name: 'File',
+  componentLeft: 'File',
+  componentRight: 'undefined',
+  customClass: 'wsContentFile',
   icon: 'fa fa-file-text-o'
 }, {
-  name: 'thread',
-  customClass: 'wsFileThread',
+  name: 'Thread',
+  componentLeft: 'Thread',
+  componentRight: 'undefined',
+  customClass: 'wsContentThread',
   icon: 'fa fa-comments-o'
 }, {
-  name: 'task',
-  customClass: 'wsFileTask',
+  name: 'Task',
+  componentLeft: 'Task',
+  componentRight: 'undefined',
+  customClass: 'wsContentTask',
   icon: 'fa fa-list-ul'
 }, {
-  name: 'issue',
-  customClass: 'wsFileIssue',
+  name: 'Issue',
+  componentLeft: 'Issue',
+  componentRight: 'undefined',
+  customClass: 'wsContentIssue',
   icon: 'fa fa-ticket'
 }]

src/css/PageHtml.styl → src/plugin/ContentType/PageHtml/PageHtml.styl

-.wsFilePageHtml
+.wsContentPageHtml
   width 1200px
   height calc(100% - 85px)
   overflow-Y auto
             background-color htmlColor
 
 .messagelistOpen
-  .wsFilePageHtml__contentpage__messagelist
+  .wsContentPageHtml__contentpage__messagelist
     flex 0
     min-height 0
 
 .received
-  .wsFilePageHtml__contentpage__messagelist__item__content
+  .wsContentPageHtml__contentpage__messagelist__item__content
       background-color htmlColor
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .wsFilePageHtml
+  .wsContentPageHtml
     &__contentpage
       display block
       overflow-Y scroll
               margin-left 15px
 
 @media (min-width: min-lg) and (max-width: max-lg)
-  .wsFilePageHtml
+  .wsContentPageHtml
     width 692px
     &__contentpage__texteditor__simpletext
       margin-left 15px
 
 @media (min-width: min-md) and (max-width: max-md)
-  .wsFilePageHtml
+  .wsContentPageHtml
     width 768px
     &__contentpage__texteditor__simpletext
       margin-left 25px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-  .wsFilePageHtml
+  .wsContentPageHtml
       top 69px
       width 576px
       height calc(100% - 69px)
         margin-left 10px
 
 @media (max-width: max-xs)
-  .wsFilePageHtml
+  .wsContentPageHtml
     top 70px
     height calc(100% - 70px)
     width 100%

src/plugin/ContentType/PageHtml/pageHtml.js

+import { PLUGIN_LIST } from '../../../action-creator.sync.js'
+
+export default function pageHtml (state = {
+  title: '',
+  version: 0
+}, action) {
+  switch (action.type) {
+    case `Set/${PLUGIN_LIST}`:
+      return action.pluginList.find(p => p.name === 'PageHtml')
+
+    default:
+      return state
+  }
+}

src/css/Thread.styl → src/plugin/ContentType/Thread/Thread.styl

-.wsFileThread
+.wsContentThread
   width 550px
   &__header
     color white
         color darkBlue
 
 .received
-  .wsFileThread__messagelist__item__content
+  .wsContentThread__messagelist__item__content
       background-color darkBlue
       color white
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .wsFileThread
+  .wsContentThread
     &__texteditor
       padding 7px
       &__simpletext
         width 80px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-  .wsFileThread
+  .wsContentThread
     top 69px
 
 @media (max-width: max-xs)
-  .wsFileThread
+  .wsContentThread
     top 69px
     width 100%
     box-shadow none

src/plugin/ContentType/Thread/thread.js

+import { PLUGIN_LIST } from '../../../action-creator.sync.js'
+
+export default function thread (state = {
+  title: '',
+  version: 0
+}, action) {
+  switch (action.type) {
+    case `Set/${PLUGIN_LIST}`:
+      return action.pluginList.find(p => p.name === 'Thread')
+
+    default:
+      return state
+  }
+}

src/reducer/fileType/index.js

-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

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

src/reducer/plugin.js

+import { combineReducers } from 'redux'
+import pageHtml from '../plugin/ContentType/PageHtml/pageHtml.js'
+import thread from '../plugin/ContentType/Thread/thread'
+
+export default combineReducers({
+  pageHtml, thread
+})

src/reducer/root.js

 import user from './user.js'
 import workspace from './workspace.js'
 import activeFileContent from './activeFileContent.js'
+import plugin from './plugin.js'
 
-const rootReducer = combineReducers({ user, workspace, activeFileContent })
+const rootReducer = combineReducers({ user, workspace, activeFileContent, plugin })
 
 export default rootReducer