indicate that an upload is in progress

app/components/BookBuilder/Chapter.jsx

@@ -11,6 +11,7 @@ export class Chapter extends React.Component {
   constructor (props) {
     super(props)
 
+    this.toggleUpload = this.toggleUpload.bind(this)
     this.update = this.update.bind(this)
 
     this.state = {
@@ -23,6 +24,12 @@ export class Chapter extends React.Component {
     update(book, changedChapter)
   }
 
+  toggleUpload () {
+    this.setState({
+      isUploadInProgress: !this.state.isUploadInProgress
+    })
+  }
+
   render () {
     const {
       book,
@@ -38,6 +45,8 @@ export class Chapter extends React.Component {
       type
     } = this.props
 
+    const { isUploadInProgress } = this.state
+
     const listItemStyle = {
       opacity: isDragging ? 0 : 1
     }
@@ -59,6 +68,7 @@ export class Chapter extends React.Component {
           <FirstRow
             book={book}
             chapter={chapter}
+            isUploadInProgress={isUploadInProgress}
             outerContainer={outerContainer}
             remove={remove}
             roles={roles}
@@ -71,9 +81,10 @@ export class Chapter extends React.Component {
 
           <SecondRow
             chapter={chapter}
-            ink={ink}
+            convertFile={ink}
             outerContainer={outerContainer}
             roles={roles}
+            toggleUpload={this.toggleUpload}
             update={this.update}
             viewOrEdit={this._viewOrEdit}
           />

app/components/BookBuilder/Chapter/ChapterTitle.jsx

@@ -13,6 +13,7 @@ class ChapterTitle extends React.Component {
       division,
       isRenaming,
       isRenameEmpty,
+      isUploadInProgress,
       onClickRename,
       onSaveRename,
       title,
@@ -42,10 +43,19 @@ class ChapterTitle extends React.Component {
       )
     }
 
+    let uploadIndicator
+
+    if (isUploadInProgress) {
+      uploadIndicator = (
+        <span>Uploading...</span>
+      )
+    }
+
     return (
       <div className={styles.chapterTitle}>
 
         { titleArea }
+        { uploadIndicator }
 
         <RenameEmptyError
           isRenameEmpty={isRenameEmpty}
@@ -63,6 +73,7 @@ ChapterTitle.propTypes = {
   division: React.PropTypes.string.isRequired,
   isRenaming: React.PropTypes.bool.isRequired,
   isRenameEmpty: React.PropTypes.bool.isRequired,
+  isUploadInProgress: React.PropTypes.bool.isRequired,
   onClickRename: React.PropTypes.func.isRequired,
   onSaveRename: React.PropTypes.func.isRequired,
   title: React.PropTypes.string.isRequired,

app/components/BookBuilder/Chapter/FirstRow.jsx

@@ -41,7 +41,7 @@ class ChapterFirstRow extends React.Component {
   }
 
   render () {
-    const { book, chapter, outerContainer, remove, roles, title, type, update } = this.props
+    const { book, chapter, isUploadInProgress, outerContainer, remove, roles, title, type, update } = this.props
     const { isRenameEmpty, isRenamingTitle } = this.state
     const division = chapter.division
 
@@ -52,6 +52,7 @@ class ChapterFirstRow extends React.Component {
           division={division}
           isRenaming={isRenamingTitle}
           isRenameEmpty={isRenameEmpty}
+          isUploadInProgress={isUploadInProgress}
           onClickRename={this.onClickRename}
           onSaveRename={this.onSaveRename}
           title={title}
@@ -79,7 +80,7 @@ class ChapterFirstRow extends React.Component {
 ChapterFirstRow.propTypes = {
   book: React.PropTypes.object.isRequired,
   chapter: React.PropTypes.object.isRequired,
-  // ink: React.PropTypes.func.isRequired,
+  isUploadInProgress: React.PropTypes.bool.isRequired,
   outerContainer: React.PropTypes.object.isRequired,
   remove: React.PropTypes.func.isRequired,
   roles: React.PropTypes.array,

app/components/BookBuilder/Chapter/SecondRow.jsx

@@ -8,7 +8,7 @@ import styles from '../styles/bookBuilder.local.scss'
 
 class ChapterSecondRow extends React.Component {
   render () {
-    const { chapter, ink, outerContainer, roles, update } = this.props
+    const { chapter, convertFile, outerContainer, roles, toggleUpload, update } = this.props
 
     // TODO -- surrounding divs should go inside the components
 
@@ -18,9 +18,12 @@ class ChapterSecondRow extends React.Component {
         <div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
           <UploadButton
             accept='.docx'
-            ink={ink}
+            chapter={chapter}
+            convertFile={convertFile}
             title=' '
+            toggleUpload={toggleUpload}
             type='file'
+            update={update}
           />
         </div>
 
@@ -46,9 +49,10 @@ class ChapterSecondRow extends React.Component {
 
 ChapterSecondRow.propTypes = {
   chapter: React.PropTypes.object.isRequired,
-  ink: React.PropTypes.func.isRequired,
+  convertFile: React.PropTypes.func.isRequired,
   outerContainer: React.PropTypes.object.isRequired,
   roles: React.PropTypes.array,
+  toggleUpload: React.PropTypes.func.isRequired,
   update: React.PropTypes.func.isRequired
 }
 

app/components/BookBuilder/Chapter/UploadButton.jsx

@@ -11,11 +11,21 @@ export class UploadButton extends React.Component {
     event.preventDefault()
 
     const file = event.target.files[0]
-    console.log(file)
-    const convertFile = this.props.ink
+    const {
+      chapter,
+      convertFile,
+      toggleUpload
+      // update
+    } = this.props
+
+    toggleUpload()
 
     convertFile(file).then(response =>
       console.log(response)
+    ).then(() =>
+      console.log(chapter)
+    ).then(() =>
+      toggleUpload()
     )
   }
 
@@ -45,9 +55,12 @@ export class UploadButton extends React.Component {
 
 UploadButton.propTypes = {
   accept: React.PropTypes.string.isRequired,
-  ink: React.PropTypes.func.isRequired,
+  chapter: React.PropTypes.object.isRequired,
+  convertFile: React.PropTypes.func.isRequired,
   title: React.PropTypes.string.isRequired,
-  type: React.PropTypes.string.isRequired
+  toggleUpload: React.PropTypes.func.isRequired,
+  type: React.PropTypes.string.isRequired,
+  update: React.PropTypes.func.isRequired
 }
 
 export default UploadButton