stable integration of plugin into tracim source

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} key={'pageHtml'} />,
-          <Timeline customClass={`${props.customClass}__contentpage`} key={'pageHtml__timeline'} />
-        ]
-      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 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 Preview from './FileType/File.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[2].name: // file (preview)
-        return [
-          <Preview />,
-          <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

 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { FILE_TYPE } from '../../helper.js'
 
 const FileItem = props => {
-  const iconType = (FILE_TYPE.find(f => f.name === props.type) || {icon: ''}).icon
-
   const iconStatus = (() => {
     switch (props.status) {
       case 'current':
     <div className={classnames('file', 'align-items-center', props.customClass)} onClick={props.onClickItem}>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
         <div className='file__type'>
-          <i className={iconType} />
+          <i className={props.icon} />
         </div>
       </div>
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>

src/component/Workspace/Folder.jsx

   }
 
   render () {
-    const { title, content } = this.props.folderData
+    const { plugin, folderData: { title, content } } = this.props
     return (
       <div className={classnames('folder', {'active': this.state.open})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
           { content.map(c => c.type === 'folder'
             ? <Folder folderData={c} key={c.id} />
             : <FileItem
+              icon={(plugin[c.type] || {icon: ''}).icon}
               name={c.title}
               type={c.type}
               status={c.status}
   folderData: PropTypes.shape({
     title: PropTypes.string.isRequired,
     content: PropTypes.array
-  })
+  }),
+  plugin: PropTypes.object
 }

src/component/common/Card/Card.jsx

       children[1].type !== CardBody
       // children.some(p => p.type !== CardHeader && p.type !== CardBody)
     ) {
-      return new Error(`PropType Error: childrens of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
+      return new Error(`PropType Error: children of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
     }
   }).isRequired,
   customClass: PropTypes.string

src/component/common/PopinFixed/PopinFixedContent.jsx

 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
-// 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
     ? (
-      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
-        {props.children[0]}
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
+        <div className={classnames('wsFileGeneric__content__left', `${props.customClass}__content__left`)}>
+          {props.children[0]}
+        </div>
 
-        <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
+        <div className={classnames('wsFileGeneric__content__right', `${props.customClass}__content__right`)}>
           {props.children[1]}
         </div>
       </div>
     )
     : (
-      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
         { props.children }
       </div>
     )
 export default PopinFixedContent
 
 PopinFixedContent.propTypes = {
-  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
+  customClass: PropTypes.string,
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) =>
+    children.length !== 2 && new Error(`PropType Error: ${componentName} must have 2 children.`)
+  ).isRequired
 }

src/container/WorkspaceContent.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 pluginDatabase from '../plugin/index.js'
 import {
   getPluginList,
   getWorkspaceContent
 } from '../action-creator.async.js'
-import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
-import PopinFixed from '../component/common/PopinFixed/PopinFixed.jsx'
-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 PluginContentType from '../component/PluginContentType.jsx'
+import { setActiveFileContent } from '../action-creator.sync.js'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
   }
 
   handleClickFileItem = file => {
-    console.log(file)
     this.props.dispatch(setActiveFileContent(file))
   }
 
-  handleClickCloseBtn = () => {
-    this.props.dispatch(hideActiveFileContent())
-  }
-
   render () {
     const { workspace, activeFileContent, plugin } = this.props
 
-    const pluginContent = (() => {
-      switch (activeFileContent.type) {
-        case 'PageHtml':
-          return <PopinFixed customClass={`${plugin.pageHtml.customClass}`}>
-            <PopinFixedHeader
-              customClass={`${plugin.pageHtml.customClass}`}
-              icon={plugin.pageHtml.icon}
-              name={activeFileContent.title}
-              onClickCloseBtn={this.handleClickCloseBtn}
-            />
-
-            <PopinFixedOption customClass={`${plugin.pageHtml.customClass}`} />
-
-            <PopinFixedContent customClass={`${plugin.pageHtml.customClass}__contentpage`}>
-              <PluginContentType
-                file={activeFileContent}
-                customClass={`${plugin.pageHtml.customClass}`}
-              />
-            </PopinFixedContent>
-          </PopinFixed>
-      }
-    })()
+    const PluginContainer = (pluginDatabase.find(p => p.name === activeFileContent.type) || {container: '<div>unknow</div>'}).container
 
     return (
       <PageWrapper customeClass='workspace'>
             <FileItemHeader />
 
             { workspace.content.map(c => c.type === 'folder'
-              ? <Folder folderData={c} key={c.id} />
+              ? <Folder plugin={plugin} folderData={c} key={c.id} />
               : (
                 <FileItem
                   name={c.title}
                   type={c.type}
+                  icon={(plugin[c.type] || {icon: ''}).icon}
                   status={c.status}
                   onClickItem={() => this.handleClickFileItem(c)}
                   key={c.id}
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
           <div id='pluginContainer'>
-            { activeFileContent.display && pluginContent }
+            { activeFileContent.display && <PluginContainer /> }
           </div>
         </PageContent>
 

src/css/Generic.styl

         &:hover , &:focus
           font-size 22px
           color blue
-  &__wrapper
+  &__content
     display flex
-    flex-direction column
+    &__left
+      width 55%
+    &__right
+      width 45%

src/css/Header.styl

               margin-right 10px
               color darkGrey
           .profilgroup__sub
-            color dark-grey
+            color darkGrey
             cursor pointer
             &:focus
               box-shadow none

src/css/PagePreview.styl

         padding 10px 0
         text-align center
         font-size 20px
-        color dark-grey
+        color darkGrey
         background-color grey-hover
       &__messagelist
         min-height 300px
         &__item
           &__content
-            color dark-grey
+            color darkGrey
         &__version
           margin-top 40px
           background-color grey-hover
             background-color previewColor
             & > i
               margin-right 10px
-              color dark-grey
+              color darkGrey
               font-size 22px
             &:hover
               background-color lightPreviewColor

src/css/Timeline.styl

   flex-direction column
   margin 10px
   border-radius 10px
-  width 45%
   height 100%
   &__header
     border-radius 10px 10px 0 0
     padding 15px
     text-align center
     font-size 20px
-    color dark-grey
+    color darkGrey
     background-color grey-hover
   &__messagelist
     flex 1 1 0
         font-size 17px
         & > i
           margin-right 10px
-          color dark-grey
+          color darkGrey
           font-size 22px
       &__date
         color fontColor

src/css/index.styl

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

src/helper.js

     'Content-Type': 'application/json'
   }
 }
-
-export const FILE_TYPE = [{
-  name: 'PageHtml',
-  componentLeft: 'PageHtml',
-  componentRight: 'Timeline',
-  customClass: 'wsFilePageHtml',
-  icon: 'fa fa-file-word-o'
-}, {
-  name: 'PageMarkdown',
-  componentLeft: 'PageMarkdown',
-  componentRight: 'undefined',
-  customClass: 'wsFilePageMarkdown',
-  icon: 'fa fa-file-code-o'
-}, {
-  name: 'File',
-  componentLeft: 'File',
-  componentRight: 'undefined',
-  customClass: 'wsFileFile',
-  icon: 'fa fa-file-image-o'
-}, {
-  name: 'Thread',
-  componentLeft: 'Thread',
-  componentRight: 'undefined',
-  customClass: 'wsFileThread',
-  icon: 'fa fa-comments-o'
-}, {
-  name: 'Task',
-  componentLeft: 'Task',
-  componentRight: 'undefined',
-  customClass: 'wsFileTask',
-  icon: 'fa fa-list-ul'
-}, {
-  name: 'Issue',
-  componentLeft: 'Issue',
-  componentRight: 'undefined',
-  customClass: 'wsFileIssue',
-  icon: 'fa fa-ticket'
-}]

src/plugin/ContentType/PageHtml/PageHtml.styl

+@import '../../../css/Variable.styl'
+
 .wsFilePageHtml
   width 1200px
   height calc(100% - 85px)
       .fa-file-word-o
         color white
   &__contentpage
-    display flex
-    overflow-Y auto
     &__textnote
       margin 10px
       border-radius 10px
       padding 25px
-      width 55%
       height 100%
       background-color off-white
       &__latestversion
         opacity 0.7
       &__text
         font-size 14px
-    &__header
-      border-top-left-radius 10px
-      border-top-right-radius 10px
-      padding 10px 0
-      text-align center
-      font-size 20px
-      color dark-grey
-      background-color grey-hover
     &__messagelist
       min-height 300px
       &__item
         &__content
-          color dark-grey
+          color darkGrey
       &__version
         margin-top 40px
         background-color grey-hover
           background-color htmlColor
           & > i
             margin-right 10px
-            color dark-grey
+            color darkGrey
             font-size 22px
           &:hover
             background-color darkHtmlColor

src/plugin/ContentType/PageHtml/PageHtmlContainer.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import PopinFixed from '../../../component/common/PopinFixed/PopinFixed.jsx'
+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 PageHtmlComponent from './PageHtmlComponent.jsx'
+import Timeline from '../../../component/Timeline.jsx'
+import { hideActiveFileContent } from '../../../action-creator.sync.js'
+
+require('./PageHtml.styl')
+
+class PageHtmlContainer extends React.Component {
+  handleClickBtnClose = () => this.props.dispatch(hideActiveFileContent())
+
+  render () {
+    const { activeFileContent, plugin: { PageHtml } } = this.props
+
+    return (
+      <PopinFixed customClass={`${PageHtml.customClass}`}>
+        <PopinFixedHeader
+          customClass={`${PageHtml.customClass}`}
+          icon={PageHtml.icon}
+          name={activeFileContent.title}
+          onClickCloseBtn={this.handleClickBtnClose}
+        />
+
+        <PopinFixedOption customClass={`${PageHtml.customClass}`} />
+
+        <PopinFixedContent customClass={`${PageHtml.customClass}__contentpage`}>
+          <PageHtmlComponent
+            version={activeFileContent.version}
+            text={activeFileContent.text}
+            key={'PageHtml'}
+          />
+
+          <Timeline
+            customClass={`${PageHtml.customClass}__contentpage`}
+            key={'pageHtml__timeline'}
+          />
+        </PopinFixedContent>
+      </PopinFixed>
+    )
+  }
+}
+
+const mapStateToProps = ({ activeFileContent, plugin }) => ({ activeFileContent, plugin })
+export default connect(mapStateToProps)(PageHtmlContainer)

src/plugin/ContentType/PageHtml/index.js

+import reducer from './pageHtml.js'
+import container from './PageHtmlContainer.jsx'
+import component from './PageHtmlComponent.jsx'
+
+const PageHtml = {
+  name: 'PageHtml',
+  container,
+  component,
+  reducer
+}
+
+export default PageHtml

src/plugin/ContentType/PageHtml/pageHtml.js

 
 export default function pageHtml (state = {
   title: '',
-  version: 0
+  version: 0,
+  icon: ''
 }, action) {
   switch (action.type) {
     case `Set/${PLUGIN_LIST}`:

src/plugin/ContentType/Thread/index.js

+import reducer from './thread.js'
+import component from './Thread.jsx'
+import style from './Thread.styl'
+
+const Thread = { name: 'Thread', component, reducer, style }
+
+export default Thread

src/plugin/ContentType/Thread/thread.js

 
 export default function thread (state = {
   title: '',
-  version: 0
+  version: 0,
+  icon: ''
 }, action) {
   switch (action.type) {
     case `Set/${PLUGIN_LIST}`:

src/plugin/index.js

+import pageHtml from '../plugin/ContentType/PageHtml/index.js'
+import thread from '../plugin/ContentType/Thread/index.js'
+
+const pluginDatabase = [pageHtml, thread]
+
+export default pluginDatabase

src/reducer/plugin.js

 import { combineReducers } from 'redux'
-import pageHtml from '../plugin/ContentType/PageHtml/pageHtml.js'
-import thread from '../plugin/ContentType/Thread/thread.js'
+import pluginDatabase from '../plugin/index.js'
+
+const reducerList = {}
+pluginDatabase.forEach(p => (reducerList[p.name] = p.reducer))
 
 export default combineReducers({
-  pageHtml, thread
+  ...reducerList
 })