Add tweaks from first round of code review.

hammerlab · Jul 17, 2015 · 6b8c8eb · 6b8c8eb
1 parent 3686be0
commit 6b8c8eb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
@@ -9,21 +9,28 @@ var React = require('react'),
 var NO_FILTER = 'All projects';
 
 var ModalStates = {
-    NONE: 0,
-    PROJECT: 1,
-    RUN: 2,
-    BAM: 3
+      NONE: 0,
+      PROJECT: 1,
+      RUN: 2,
+      BAM: 3
 };
 
+// This is a Bootstrap modal that displays all (3) forms: New Project, Add Run, and Add BAM
+// Closing/esc'ing/unfocusing the modal will set the ModalState to NONE.
+// cf. http://getbootstrap.com/javascript/#modals
 var Modal = React.createClass({
   componentDidMount: function() {
-    $('.modal').on('hidden.bs.modal', () => {this.props.handleClose()});
+    $('.modal').modal('show');
+    $('.modal').on('hidden.bs.modal', () => {this.props.handleClose();});
+  },
+  hideModal: function() {
+    $('.modal').modal('hide');
   },
   render: function(){
     return (
       <div className="modal fade" role="dialog" tabIndex="-1">
         <div className="modal-dialog" role="document">
-          <button className='close' type='button' onClick={this.props.handleClose}>&times;</button>
+          <button className='close' type='button' onClick={this.hideModal}>&times;</button>
           {this.props.children}
         </div>
       </div>
@@ -66,24 +73,6 @@ var RunsPage = React.createClass({
   createDragOverHandler: function(draggingOver) {
     return () => this.setState({draggingOver});
   },
-  componentDidUpdate: function(prevProps, prevState) {
-    var prevModal = prevState.modal,
-        newModal = this.state.modal;
-    if (prevModal == newModal) return;
-
-    if (prevModal == ModalStates.NONE) {
-      $(this.getDOMNode()).find('.modal').modal('show');
-    }
-  },
-  componentWillUpdate: function(nextProps, nextState) {
-    var newModal = nextState.modal,
-        prevModal = this.state.modal;
-    if (prevModal == newModal) return;
-
-    if (newModal == ModalStates.NONE) {
-      $(this.getDOMNode()).find('.modal').modal('hide');
-    }
-  },
   render: function() {
     var projectOptions = [NO_FILTER].concat(_.pluck(this.props.projects, 'name')).map(name => {
       return <option value={name} key={name}>{name}</option>;
@@ -106,20 +95,20 @@ var RunsPage = React.createClass({
         }.bind(this)).value();
     var modal;
     if (this.state.modal === ModalStates.NONE) {
-    modal = null;
+      modal = null;
     } else {
       var form;
       if (this.state.modal === ModalStates.PROJECT) {
         form = <forms.NewProjectForm />;
       } else if (this.state.modal === ModalStates.RUN) {
         form = <forms.NewRunForm bamUris={_.unique(_.pluck(this.state.newFormProps.projectBams, 'uri'))}
-                                       projectId={this.state.newFormProps.projectId}
-                                       projectName={this.state.newFormProps.projectName} />;
+                                 projectId={this.state.newFormProps.projectId}
+                                 projectName={this.state.newFormProps.projectName} />;
       } else {
         form = <forms.NewBAMForm projectId={this.state.newFormProps.projectId}
-                                       projectName={this.state.newFormProps.projectName} />;
+                                 projectName={this.state.newFormProps.projectName} />;
       }
-      modal = <Modal handleClose={this.closeModal}>{form}</Modal>
+      modal = <Modal handleClose={this.closeModal}>{form}</Modal>;
     }
     return (
       <div className="row">
@@ -181,6 +170,12 @@ var ProjectTable = React.createClass({
       this.setState({selectedBamId});
     };
   },
+  showRunModal: function(){
+    this.props.handleShowRunModal(this.props.name, this.props.project_id, this.props.bams);
+  },
+  showBAMModal: function(){
+    this.props.handleShowBAMModal(this.props.name, this.props.project_id);
+  },
   render: function() {
     var numBams = this.props.bams.length;
     var numRuns = this.props.runs.length;
@@ -210,11 +205,11 @@ var ProjectTable = React.createClass({
             </a>
           </div>
           <div className='add'>
-            <button onClick={() => this.props.handleShowRunModal(this.props.name, this.props.project_id, this.props.bams)}
+            <button onClick={this.showRunModal}
                     type='button' className='btn btn-primary btn-xs'>
               Add Run
             </button>
-            <button onClick={() => this.props.handleShowBAMModal(this.props.name, this.props.project_id)}
+            <button onClick={this.showBAMModal}
                     type='button' className='btn btn-primary btn-xs'>
               Add BAM
             </button>

diff --git a/cycledash/static/js/runs/components/forms.js b/cycledash/static/js/runs/components/forms.js
@@ -127,17 +127,16 @@ var NewProjectForm = React.createClass({
     return (
       <form method='POST' action='/api/projects' className='add-form' ref='projectForm'>
         <div className='row'>
-          <h3>New Project
-          </h3>
-            <TextInput label='Project Name' name='name' placeholder='PT01234' required={true} />
-            <div className='form-group add-form-input-full'>
-              <label>Notes</label>
-              <textarea className='form-control add-form-notes' rows='3' name='notes'
-                        placeholder='Notes etc.'></textarea>
-            </div>
-            <div className='form-group add-form-input-full'>
-              <button type='submit' className='add-form-submit'>Submit New Project</button>
-            </div>
+          <h3>New Project</h3>
+          <TextInput label='Project Name' name='name' placeholder='PT01234' required={true} />
+          <div className='form-group add-form-input-full'>
+            <label>Notes</label>
+            <textarea className='form-control add-form-notes' rows='3' name='notes'
+                      placeholder='Notes etc.'></textarea>
+          </div>
+          <div className='form-group add-form-input-full'>
+            <button type='submit' className='add-form-submit'>Submit New Project</button>
+          </div>
         </div>
       </form>
     );

diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
@@ -51,7 +51,7 @@ form.add-form {
   @extend .col-md-12;
 }
 .form-control.add-form-notes {
-  height: 8em;  
+  height: 8em;
 }
 .close {
   position: absolute;