call ink when clicking upload button

app/components/BookBuilder/BookBuilder.jsx

@@ -116,9 +116,8 @@ export class BookBuilder extends React.Component {
   }
 
   render () {
-    console.log(this.props.actions)
     const { book, chapters, teams, users } = this.props
-    const { createFragment, deleteFragment, updateFragment, updateTeam } = this.props.actions
+    const { createFragment, deleteFragment, ink, updateFragment, updateTeam } = this.props.actions
     const { outerContainer } = this.state
     const roles = this._getRoles()
 
@@ -169,43 +168,46 @@ export class BookBuilder extends React.Component {
             </div>
 
             <Division
-              title='Front Matter'
-              type='front'
-              outerContainer={outerContainer}
               add={createFragment}
-              remove={deleteFragment}
-              update={updateFragment}
+              book={book}
               chapters={frontChapters}
+              ink={ink}
+              outerContainer={outerContainer}
+              remove={deleteFragment}
               roles={roles}
-              book={book}
+              title='Front Matter'
+              type='front'
+              update={updateFragment}
             />
 
             <div className={styles.sectionDivider} />
 
             <Division
-              title='Body'
-              type='body'
-              outerContainer={outerContainer}
               add={createFragment}
-              remove={deleteFragment}
-              update={updateFragment}
+              book={book}
               chapters={bodyChapters}
+              ink={ink}
+              outerContainer={outerContainer}
+              remove={deleteFragment}
               roles={roles}
-              book={book}
+              title='Body'
+              type='body'
+              update={updateFragment}
             />
 
             <div className={styles.sectionDivider} />
 
             <Division
-              title='Back Matter'
-              type='back'
-              outerContainer={outerContainer}
               add={createFragment}
-              remove={deleteFragment}
-              update={updateFragment}
+              book={book}
               chapters={backChapters}
+              ink={ink}
+              outerContainer={outerContainer}
+              remove={deleteFragment}
               roles={roles}
-              book={book}
+              title='Back Matter'
+              type='back'
+              update={updateFragment}
             />
 
           </div>

app/components/BookBuilder/Chapter.jsx

@@ -267,7 +267,7 @@ export class Chapter extends React.Component {
   }
 
   render () {
-    const { book, chapter, type, title, connectDragSource, connectDropTarget, isDragging, roles, outerContainer } = this.props
+    const { book, chapter, connectDragSource, connectDropTarget, ink, isDragging, outerContainer, roles, title, type } = this.props
     const { isRenamingTitle, isRenameEmpty } = this.state
     // const { _onSaveRename } = this
     const opacity = isDragging ? 0 : 1
@@ -485,9 +485,10 @@ export class Chapter extends React.Component {
           <div className={styles.secondLineContainer}>
             <div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
               <UploadWordButton
-                type='file'
                 accept='.docx'
+                ink={ink}
                 title=' '
+                type='file'
               />
             </div>
 
@@ -574,21 +575,18 @@ export class Chapter extends React.Component {
 }
 
 Chapter.propTypes = {
-  chapter: React.PropTypes.object.isRequired,
   book: React.PropTypes.object.isRequired,
-
-  remove: React.PropTypes.func.isRequired,
-  update: React.PropTypes.func.isRequired,
-  type: React.PropTypes.string.isRequired,
-  title: React.PropTypes.string.isRequired,
-  outerContainer: React.PropTypes.object.isRequired,
-  // roles: React.PropTypes.array.isRequired,
-  roles: React.PropTypes.array,
-
-  // react-dnd
+  chapter: React.PropTypes.object.isRequired,
   connectDragSource: React.PropTypes.func.isRequired,
   connectDropTarget: React.PropTypes.func.isRequired,
-  isDragging: React.PropTypes.bool.isRequired
+  ink: React.PropTypes.func.isRequired,
+  isDragging: React.PropTypes.bool.isRequired,
+  outerContainer: React.PropTypes.object.isRequired,
+  remove: React.PropTypes.func.isRequired,
+  roles: React.PropTypes.array,
+  title: React.PropTypes.string.isRequired,
+  type: React.PropTypes.string.isRequired,
+  update: React.PropTypes.func.isRequired
 }
 
 // combine them, as each chapter can be both a source and a target

app/components/BookBuilder/Division.jsx

@@ -104,7 +104,7 @@ export class Division extends React.Component {
   }
 
   render () {
-    const { book, title, type, chapters, update, roles, outerContainer } = this.props
+    const { book, chapters, ink, outerContainer, roles, title, type, update } = this.props
     const { _onAddClick, _onRemove, _onMove } = this
 
     const chapterType = (type === 'body') ? 'chapter' : 'component'
@@ -114,16 +114,17 @@ export class Division extends React.Component {
         <Chapter
           book={book}
           chapter={c}
-          type={c.subCategory}
-          title={c.title}
-          remove={_onRemove}
-          update={update}
-          move={_onMove}
           key={c.index}
           id={c.id}
+          ink={ink}
+          move={_onMove}
           no={i}
           outerContainer={outerContainer}
+          remove={_onRemove}
           roles={roles}
+          title={c.title}
+          type={c.subCategory}
+          update={update}
         />
       )
     })
@@ -186,16 +187,16 @@ export class Division extends React.Component {
 }
 
 Division.propTypes = {
+  add: React.PropTypes.func.isRequired,
   book: React.PropTypes.object.isRequired,
   chapters: React.PropTypes.array.isRequired,
-  title: React.PropTypes.string.isRequired,
-  type: React.PropTypes.string.isRequired,
-  add: React.PropTypes.func.isRequired,
+  ink: React.PropTypes.func.isRequired,
+  outerContainer: React.PropTypes.object.isRequired,
   remove: React.PropTypes.func.isRequired,
-  update: React.PropTypes.func.isRequired,
-  // roles: React.PropTypes.array.isRequired,
   roles: React.PropTypes.array,
-  outerContainer: React.PropTypes.object.isRequired
+  title: React.PropTypes.string.isRequired,
+  type: React.PropTypes.string.isRequired,
+  update: React.PropTypes.func.isRequired
 }
 
 export default DragDropContext(HTML5Backend)(Division)

app/components/BookBuilder/UploadWordBtn.jsx

@@ -2,27 +2,46 @@ import React from 'react'
 import styles from './styles/bookBuilder.local.scss'
 
 export class UploadWordButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handleFileUpload = this.handleFileUpload.bind(this)
+  }
 
   render () {
-    const { type, accept, title } = this.props
+    const { accept, title, type } = this.props
 
     return (
       <div id='bb-upload' className={styles.btnFile}>
         Upload Word
         <input
-          type={type}
           accept={accept}
+          onChange={this.handleFileUpload}
+          ref='yes'
           title={title}
+          type={type}
         />
       </div>
     )
   }
+
+  handleFileUpload (event) {
+    event.preventDefault()
+
+    const file = event.target.files[0]
+    console.log(file)
+    const convertFile = this.props.ink
+
+    convertFile(file).then(response =>
+      console.log(response)
+    )
+  }
 }
 
 UploadWordButton.propTypes = {
-  type: React.PropTypes.string.isRequired,
   accept: React.PropTypes.string.isRequired,
-  title: React.PropTypes.string.isRequired
+  ink: React.PropTypes.func.isRequired,
+  title: React.PropTypes.string.isRequired,
+  type: React.PropTypes.string.isRequired
 }
 
 export default UploadWordButton

config/dev.js

@@ -18,6 +18,6 @@ module.exports = {
     teams: universal.teams
   },
   pubsweet: {
-    components: ['pubsweet-component-signup', 'pubsweet-component-login', 'pubsweet-component-ink-frontend']
+    components: universal.components
   }
 }

config/universal.js

 const editoriaMode = require('../app/authsome_editoria')
 
 module.exports = {
+  components: [
+    'pubsweet-component-ink-backend',
+    'pubsweet-component-ink-frontend',
+    'pubsweet-component-login',
+    'pubsweet-component-signup'
+  ],
   mode: editoriaMode,
   teams: {
     teamProduction: {