fix(modes-panel): refactor mode button into separate component

Author: landonreed

lib/components/form/mode-button.js

@@ -0,0 +1,41 @@
+import React, {PropTypes, Component} from 'react'
+
+import { getModeIcon } from '../../util/itinerary'
+
+export default class ModeButton extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    mode: PropTypes.string,
+    queryModes: PropTypes.array,
+    setMode: PropTypes.func
+  }
+
+  _onToggleMode = () => {
+    const {active, mode, queryModes, setMode} = this.props
+    // remove icon
+    if (active) {
+      setMode({mode: queryModes.filter(m => m !== mode).join(',')})
+    } else {
+      // add icon
+      queryModes.push(mode)
+      setMode({mode: queryModes.join(',')})
+    }
+  }
+
+  render () {
+    const {active, icons, mode} = this.props
+    return (
+      <div className='mode-icon-highlight'>
+        <button
+          onClick={this._onToggleMode}
+          title={mode}>
+          <div
+            className='mode-icon'
+            style={{ fill: active ? 'red' : '#bbb' }}>
+            {getModeIcon(mode, icons)}
+          </div>
+        </button>
+      </div>
+    )
+  }
+}

lib/components/form/modes-panel.js

@@ -1,9 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
-import { getModeIcon } from '../../util/itinerary'
-
 import { setMode } from '../../actions/form'
+import ModeButton from './mode-button'
 
 class ModesPanel extends Component {
   static propTypes = {
@@ -14,7 +13,7 @@ class ModesPanel extends Component {
   }
 
   render () {
-    const {icons, modeGroups, queryModes} = this.props
+    const {icons, modeGroups, queryModes, setMode} = this.props
 
     return (
       <div className='modes-panel'>
@@ -24,26 +23,13 @@ class ModesPanel extends Component {
               <div className='group-name'>{group.name}</div>
               {group.modes.map(mode => {
                 const modeSelected = queryModes.indexOf(mode) !== -1
-                return (
-                  <div key={mode} className='mode-icon-highlight'>
-                    <button
-                      onClick={() => {
-                        if (modeSelected) {
-                          this.props.setMode(queryModes.filter(m => m !== mode).join(','))
-                        } else {
-                          queryModes.push(mode)
-                          this.props.setMode(queryModes.join(','))
-                        }
-                      }}
-                    >
-                      <div className='mode-icon'
-                        style={{ fill: modeSelected ? 'red' : '#bbb' }}
-                      >
-                        {getModeIcon(mode, icons)}
-                      </div>
-                    </button>
-                  </div>
-                )
+                return <ModeButton
+                  active={modeSelected}
+                  icons={icons}
+                  key={mode}
+                  mode={mode}
+                  queryModes={queryModes}
+                  setMode={setMode} />
               })}
             </div>
           )
@@ -62,10 +48,6 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-  return {
-    setMode: (mode) => { dispatch(setMode({ mode })) }
-  }
-}
+const mapDispatchToProps = {setMode}
 
 export default connect(mapStateToProps, mapDispatchToProps)(ModesPanel)