diff --git a/app/components/BookBuilder/Chapter.jsx b/app/components/BookBuilder/Chapter.jsx index 2963e115bb9559f9c9d41c28cd615b116577fe23..5f95314cc9bc18649729c550ab54565ff21a3946 100644 --- a/app/components/BookBuilder/Chapter.jsx +++ b/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} /> diff --git a/app/components/BookBuilder/Chapter/ChapterTitle.jsx b/app/components/BookBuilder/Chapter/ChapterTitle.jsx index 652e60faed4413c4ea30133c9711fe84307079de..c0abc153d41d71b166127251562dea776b07fd23 100644 --- a/app/components/BookBuilder/Chapter/ChapterTitle.jsx +++ b/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, diff --git a/app/components/BookBuilder/Chapter/FirstRow.jsx b/app/components/BookBuilder/Chapter/FirstRow.jsx index 5f911c7e4a259f1c9cc19c5951006bab01eb817c..3284607c8c89eeef93a7c1742c3b7048f9a5c27a 100644 --- a/app/components/BookBuilder/Chapter/FirstRow.jsx +++ b/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, diff --git a/app/components/BookBuilder/Chapter/SecondRow.jsx b/app/components/BookBuilder/Chapter/SecondRow.jsx index bbffafa5dc6cd764a03a965dcd45acd83ff8e802..f07d399c5a19f8db4c34c71c235eb126c20c1bd2 100644 --- a/app/components/BookBuilder/Chapter/SecondRow.jsx +++ b/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 } diff --git a/app/components/BookBuilder/Chapter/UploadButton.jsx b/app/components/BookBuilder/Chapter/UploadButton.jsx index 7c41ead22e6ad33e3d78f0a6b849e9528d3f7388..d8de44f422a794d6f2a2190962cd4748db4acb89 100644 --- a/app/components/BookBuilder/Chapter/UploadButton.jsx +++ b/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