Merged in chapter-buttons-refactor (pull request #5)

refactor upload word button and alignment boxes into their own files

app/components/BookBuilder/Chapter.jsx

@@ -7,8 +7,11 @@ import { findDOMNode } from 'react-dom'
 import { includes, get, map, flow, slice } from 'lodash'
 
 import BookBuilderModal from './BookBuilderModal'
+import PagePositionAlignment from './PagePositionAlignment'
 import ProgressIndicator from './ProgressIndicator'
 import TextInput from '../utils/TextInput'
+import UploadWordButton from './UploadWordBtn'
+
 import styles from './styles/bookBuilder.local.scss'
 
 const itemTypes = {
@@ -83,7 +86,6 @@ export class Chapter extends React.Component {
     this._toggleDelete = this._toggleDelete.bind(this)
     this._toggleUnlock = this._toggleUnlock.bind(this)
 
-    this._onClickAlignment = this._onClickAlignment.bind(this)
     this._isAdmin = this._isAdmin.bind(this)
     this._formatDate = this._formatDate.bind(this)
 
@@ -93,6 +95,8 @@ export class Chapter extends React.Component {
     this._myHandler = this._myHandler.bind(this)
     this._viewOrEdit = this._viewOrEdit.bind(this)
 
+    this.update = this.update.bind(this)
+
     this.state = {
       isRenamingTitle: false,
       isRenameEmpty: false,
@@ -103,18 +107,6 @@ export class Chapter extends React.Component {
     }
   }
 
-  _onClickAlignment (position) {
-    const { book, chapter, update } = this.props
-    if (!includes(['left', 'right'], position)) { return }
-
-    function clickAlignment () {
-      chapter.alignment[position] = !chapter.alignment[position]
-      update(book, chapter)
-    }
-
-    return clickAlignment
-  }
-
   _onClickRename () {
     this.setState({
       isRenamingTitle: true
@@ -269,14 +261,17 @@ export class Chapter extends React.Component {
     })
   }
 
+  update (changedChapter) {
+    const { book, update } = this.props
+    update(book, changedChapter)
+  }
+
   render () {
-    const { book, chapter, type, title, connectDragSource, connectDropTarget, isDragging, update, roles, outerContainer } = this.props
+    const { book, chapter, type, title, connectDragSource, connectDropTarget, isDragging, roles, outerContainer } = this.props
     const { isRenamingTitle, isRenameEmpty } = this.state
     // const { _onSaveRename } = this
     const opacity = isDragging ? 0 : 1
 
-    const align = chapter.alignment
-
     let titleArea = null
     let renameButton = null
 
@@ -463,9 +458,6 @@ export class Chapter extends React.Component {
 
     const rightArea = chapter.lock ? editorArea : buttons
 
-    const clickAlignmentLeft = this._onClickAlignment('left')
-    const clickAlignmentRight = this._onClickAlignment('right')
-
     return connectDragSource(connectDropTarget(
       <li
         className={styles.chapterContainer + ' col-lg-12 bb-chapter ' + (chapter.subCategory === 'chapter' ? styles.isChapter : styles.isPart)}
@@ -492,22 +484,18 @@ 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'}>
-              <div id='bb-upload' className={styles.btnFile}>
-                Upload Word
-                <input
-                  type='file'
-                  accept='.docx'
-                  title=' '
-                />
-              </div>
+              <UploadWordButton
+                type='file'
+                accept='.docx'
+                title=' '
+              />
             </div>
 
             <ul className={styles.secondActions + ' col-lg-7 col-md-12 col-sm-12 col-xs-12'}>
               <ProgressIndicator
                 type='style'
-                book={book}
                 chapter={chapter}
-                update={update}
+                update={this.update}
                 roles={roles}
                 outerContainer={outerContainer}
                 hasIcon
@@ -516,9 +504,8 @@ export class Chapter extends React.Component {
 
               <ProgressIndicator
                 type='edit'
-                book={book}
                 chapter={chapter}
-                update={update}
+                update={this.update}
                 roles={roles}
                 outerContainer={outerContainer}
                 hasIcon
@@ -527,9 +514,8 @@ export class Chapter extends React.Component {
 
               <ProgressIndicator
                 type='review'
-                book={book}
                 chapter={chapter}
-                update={update}
+                update={this.update}
                 roles={roles}
                 outerContainer={outerContainer}
                 hasIcon
@@ -538,37 +524,19 @@ export class Chapter extends React.Component {
 
               <ProgressIndicator
                 type='clean'
-                book={book}
                 chapter={chapter}
                 roles={roles}
                 outerContainer={outerContainer}
-                update={update}
+                update={this.update}
                 viewOrEdit={this._viewOrEdit}
               />
             </ul>
 
             <div className={styles.noPadding + ' col-lg-3 col-md-12 col-sm-12 col-xs-12'}>
-              <ul className={styles.pagePosition}>
-                <li>left &nbsp;</li>
-
-                <li onClick={clickAlignmentLeft}>
-                  <div className={styles.leftRightBox + ' ' + styles.leftBox}>
-                    <div className={align.left ? styles.boxActive : styles.boxInactiveHover} />
-                  </div>
-                </li>
-
-                <li onClick={clickAlignmentRight}>
-                  <div className={styles.leftRightBox + ' ' + styles.rightBox}>
-                    <div className={align.right ? styles.boxActive : styles.boxInactiveHover} />
-                  </div>
-                </li>
-
-                <li>
-                  <div className={styles.boxDiver} />
-                </li>
-
-                <li>&nbsp; right</li>
-              </ul>
+              <PagePositionAlignment
+                chapter={chapter}
+                update={this.update}
+              />
             </div>
 
             <div className={styles.separator} />

app/components/BookBuilder/PagePositionAlignment.jsx

+import React from 'react'
+import styles from './styles/bookBuilder.local.scss'
+import { includes } from 'lodash'
+
+export class PagePositionAlignment extends React.Component {
+  constructor (props) {
+    super(props)
+    this._onClickAlignment = this._onClickAlignment.bind(this)
+  }
+
+  _onClickAlignment (position) {
+    const { chapter, update } = this.props
+    if (!includes(['left', 'right'], position)) { return }
+
+    function clickAlignment () {
+      chapter.alignment[position] = !chapter.alignment[position]
+      update(chapter)
+    }
+
+    return clickAlignment
+  }
+
+  render () {
+    const { chapter } = this.props
+    const clickAlignmentLeft = this._onClickAlignment('left')
+    const clickAlignmentRight = this._onClickAlignment('right')
+    const align = chapter.alignment
+
+    return (
+      <ul className={styles.pagePosition}>
+        <li>left &nbsp;</li>
+
+        <li onClick={clickAlignmentLeft}>
+          <div className={styles.leftRightBox + ' ' + styles.leftBox}>
+            <div className={align.left ? styles.boxActive : styles.boxInactiveHover} />
+          </div>
+        </li>
+
+        <li onClick={clickAlignmentRight}>
+          <div className={styles.leftRightBox + ' ' + styles.rightBox}>
+            <div className={align.right ? styles.boxActive : styles.boxInactiveHover} />
+          </div>
+        </li>
+
+        <li>
+          <div className={styles.boxDiver} />
+        </li>
+
+        <li>&nbsp; right</li>
+      </ul>
+    )
+  }
+}
+
+PagePositionAlignment.propTypes = {
+  chapter: React.PropTypes.object.isRequired,
+  update: React.PropTypes.func.isRequired
+}
+
+export default PagePositionAlignment

app/components/BookBuilder/ProgressIndicator.jsx

@@ -57,7 +57,7 @@ export class ProgressIndicator extends React.Component {
   }
 
   _changeWorkflowState () {
-    const { book, chapter, update, type, viewOrEdit } = this.props
+    const { chapter, update, type, viewOrEdit } = this.props
     const { progressValues } = this
 
     const list = progressValues[type]
@@ -71,7 +71,7 @@ export class ProgressIndicator extends React.Component {
 
     chapter.progress[type] = position
 
-    update(book, chapter)
+    update(chapter)
     this.setState({ showWarning: false })
     viewOrEdit()
   }
@@ -82,7 +82,7 @@ export class ProgressIndicator extends React.Component {
 
     let ErrorMsg = this.state.showError
     ? (
-      <Alert bsStyle="warning" className={styles.noWritesError}>
+      <Alert bsStyle='warning' className={styles.noWritesError}>
         You don't have access to perfom this action. Please contact your Production Editor.
       </Alert>
     )
@@ -90,14 +90,14 @@ export class ProgressIndicator extends React.Component {
 
     let icon = ''
     if (hasIcon) {
-      icon = <i className="fa fa-angle-right" />
+      icon = <i className='fa fa-angle-right' />
     }
 
     const warningModal = (
       <BookBuilderModal
-        title="Change of workflow status"
-        action="workflow-warning"
-        successText="OK"
+        title='Change of workflow status'
+        action='workflow-warning'
+        successText='OK'
         successAction={this._changeWorkflowState}
         show={this.state.showWarning}
         toggle={this._toggleModal}
@@ -123,7 +123,6 @@ export class ProgressIndicator extends React.Component {
 
 ProgressIndicator.propTypes = {
   type: React.PropTypes.string.isRequired,
-  book: React.PropTypes.object.isRequired,
   chapter: React.PropTypes.object.isRequired,
   hasIcon: React.PropTypes.bool,
   update: React.PropTypes.func.isRequired,

app/components/BookBuilder/UploadWordBtn.jsx

+import React from 'react'
+import styles from './styles/bookBuilder.local.scss'
+
+export class UploadWordButton extends React.Component {
+
+  render () {
+    const { type, accept, title } = this.props
+
+    return (
+      <div id='bb-upload' className={styles.btnFile}>
+        Upload Word
+        <input
+          type={type}
+          accept={accept}
+          title={title}
+        />
+      </div>
+    )
+  }
+}
+
+UploadWordButton.propTypes = {
+  type: React.PropTypes.string.isRequired,
+  accept: React.PropTypes.string.isRequired,
+  title: React.PropTypes.string.isRequired
+}
+
+export default UploadWordButton