fix(editor): fix add stops mode

Author: landonreed

lib/editor/components/pattern/PatternStopsPanel.js

@@ -20,9 +20,12 @@ export default class PatternStopsPanel extends Pure {
     updateEditSetting: PropTypes.func.isRequired
   }
 
-  _onClickAddStop = () => this.props.updateEditSetting('addStops', !this.props.editSettings.addStops)
+  _toggleAddStopsMode = () => {
+    const {editSettings, updateEditSetting} = this.props
+    updateEditSetting('addStops', !editSettings.present.addStops)
+  }
 
-  addStopFromSelect = (input) => {
+  _addStopFromSelect = (input) => {
     if (!input) {
       return
     }
@@ -45,9 +48,11 @@ export default class PatternStopsPanel extends Pure {
       setActiveStop,
       status,
       stops,
-      updateActiveEntity,
-      updateEditSetting
+      updateActiveEntity
     } = this.props
+    const {addStops} = editSettings.present
+    const patternHasStops = activePattern.patternStops &&
+      activePattern.patternStops.length > 0
     const cardStyle = {
       border: '1px dashed gray',
       padding: '0.5rem 0.5rem',
@@ -63,31 +68,36 @@ export default class PatternStopsPanel extends Pure {
         </h4>
         <div style={{width: '100%'}}>
           <Button
-            onClick={this._onClickAddStop}
+            onClick={this._toggleAddStopsMode}
             className='pull-right'
-            // bsStyle={editSettings.addStops ? 'default' : 'success'}
             bsSize='small'>
-            {editSettings.addStops
+            {addStops
               ? <span><Icon type='times' /> Cancel</span>
               : <span><Icon type='plus' /> Add stop</span>
             }
           </Button>
-          <small className='pull-right' style={{margin: '5px'}}>{editSettings.addStops && mapState.zoom <= 14
-            ? 'Zoom to view stops'
-            : `Add stops via map`
-          }</small>
+          <small className='pull-right' style={{margin: '5px'}}>
+            {addStops && mapState.zoom <= 14
+              ? 'Zoom to view stops'
+              : `Add stops via map`
+            }
+          </small>
         </div>
         {/* List of pattern stops */}
         <div id='pattern-stop-list-header'>
           <div className='pull-left' style={{width: '50%'}}>
-            <p className='small' style={{marginBottom: '0px'}}><strong>Stop sequence</strong></p>
+            <p className='small' style={{marginBottom: '0px'}}>
+              <strong>Stop sequence</strong>
+            </p>
           </div>
           <div className='pull-right' style={{width: '50%'}}>
-            <p style={{marginBottom: '0px'}} className='small text-right'><strong>Travel time</strong></p>
+            <p style={{marginBottom: '0px'}} className='small text-right'>
+              <strong>Travel time</strong>
+            </p>
           </div>
           <div className='clearfix' />
         </div>
-        {activePattern.patternStops && activePattern.patternStops.length > 0
+        {patternHasStops
           ? <PatternStopContainer
             stops={stops}
             cardStyle={cardStyle}
@@ -101,32 +111,30 @@ export default class PatternStopsPanel extends Pure {
             setActiveEntity={setActiveEntity}
             feedSource={feedSource}
             patternEdited={patternEdited}
-            setActiveStop={setActiveStop}
-            editSettings={editSettings}
-            updateEditSetting={updateEditSetting} />
+            setActiveStop={setActiveStop} />
           : <p className='lead text-center'>This pattern has no stops.</p>
         }
         {/* Add stop selector */}
-        {editSettings.addStops
+        {addStops
           ? <div style={cardStyle}>
             <VirtualizedEntitySelect
               component={'stop'}
               entities={stops}
-              onChange={this.addStopFromSelect} />
+              onChange={this._addStopFromSelect} />
             <div style={{marginTop: '5px'}}>
               <Button
                 bsSize='small'
                 bsStyle='default'
                 block
-                onClick={this._onClickAddStop}>
+                onClick={this._toggleAddStopsMode}>
                 <Icon type='times' /> Cancel
               </Button>
             </div>
           </div>
           : <Button
             bsSize='small'
             block
-            onClick={this._onClickAddStop}>
+            onClick={this._toggleAddStopsMode}>
             <Icon type='plus' /> Add stop by name
           </Button>
         }