Merge pull request #206 from flacoman91/995-disableper1000

Conditionally disable complaints per 1000

src/MapPanel.jsx

@@ -3,12 +3,17 @@ import ActionBar from './ActionBar'
 import { connect } from 'react-redux'
 import DateIntervals from './DateIntervals'
 import ErrorBlock from './Error'
+import { hasFiltersEnabled } from './utils'
 import Loading from './Dialogs/Loading'
 import MapToolbar from './MapToolbar'
 import PerCapita from './PerCapita'
 import React from 'react'
 import RowChart from './RowChart'
 import TileChartMap from './TileChartMap'
+import Warning from './Warning'
+
+const WARNING_MESSAGE = 'Due to your filter selections, the “Complaints per' +
+  ' 1,000” option has been disabled'
 
 export class MapPanel extends React.Component {
   render() {
@@ -18,6 +23,7 @@ export class MapPanel extends React.Component {
         { this.props.error &&
           <ErrorBlock text="There was a problem executing your search" />
         }
+        { this.props.showWarning && <Warning text={ WARNING_MESSAGE } /> }
         <div className="layout-row refine">
           <DateIntervals/>
           <PerCapita/>
@@ -34,7 +40,8 @@ export class MapPanel extends React.Component {
 
 const mapStateToProps = state => ( {
   error: state.map.error,
-  isLoading: state.map.isLoading
+  isLoading: state.map.isLoading,
+  showWarning: hasFiltersEnabled( state.query )
 } )
 
 export default connect( mapStateToProps )( MapPanel )

src/PerCapita.jsx

@@ -2,35 +2,55 @@ import './PerCapita.less'
 import { GEO_NORM_NONE, GEO_NORM_PER1000 } from './constants'
 import { connect } from 'react-redux'
 import { dataNormalizationChanged } from './actions/map';
+import { hasFiltersEnabled } from './utils'
 import React from 'react'
 
 
 export class PerCapita extends React.Component {
+  _setNormalization( val ) {
+    this.props.onDataNormalization( val )
+  }
+
+  _getRawButtonClass() {
+    return this.props.dataNormalization === GEO_NORM_NONE ? '' : 'deselected'
+  }
+
+  _getPerCapButtonClass() {
+    if ( this.props.enablePer1000 ) {
+      return this.props.dataNormalization === GEO_NORM_NONE ? 'deselected' : ''
+    }
+    return 'a-btn__disabled'
+  }
   render() {
     return (
       <section className="per-capita">
-        <p>Map Shading</p>
-        <label className="u-visually-hidden" htmlFor="data-normalization">
-          Select the kind of shading to apply to the map
-        </label>
-        <select value={this.props.dataNormalization}
-                onChange={this.props.onDataNormalization}
-                id="data-normalization">
-          <option value={GEO_NORM_NONE}>Complaints</option>
-          <option value={GEO_NORM_PER1000}>Per 1000 population</option>
-        </select>
+        <div className="per-capita m-btn-group">
+          <p>Map Shading</p>
+          <button
+            className={ 'a-btn raw ' + this._getRawButtonClass() }
+            onClick={ () => this._setNormalization( GEO_NORM_NONE ) }>Complaints
+          </button>
+          <button
+            className={ 'a-btn capita ' + this._getPerCapButtonClass() }
+            onClick={ () =>
+                this.props.enablePer1000 &&
+                this._setNormalization( GEO_NORM_PER1000 ) }>
+            Complaints per 1,000 population
+          </button>
+        </div>
       </section>
     )
   }
 }
 
 export const mapStateToProps = state => ( {
-  dataNormalization: state.map.dataNormalization
+  dataNormalization: state.map.dataNormalization,
+  enablePer1000: !hasFiltersEnabled( state.query )
 } );
 
 export const mapDispatchToProps = dispatch => ( {
-  onDataNormalization: ev => {
-    dispatch( dataNormalizationChanged( ev.target.value ) )
+  onDataNormalization: value => {
+    dispatch( dataNormalizationChanged( value ) )
   }
 } );
 

src/PerCapita.less

@@ -1,7 +1,13 @@
 @import (less) "base.less";
 
 .per-capita {
-  select {
-    height: 34px;
+  button {
+    color: @black;
+    &:not(.a-btn__disabled) {
+      background-color: @pacific-80;
+    }
+    &.deselected {
+      background-color: @pacific-40;
+    }
   }
 }

src/__tests__/MapPanel.spec.jsx

@@ -21,12 +21,16 @@ function setupSnapshot( printMode ) {
       total: items.length
     },
     map: {
+      product: [],
       state: []
     },
     query: {
       from: 0,
       size: 10,
-      tab: MODE_MAP
+      tab: MODE_MAP,
+      product: [
+        { name: 'foo' }
+      ]
     },
     results: {
       items

src/__tests__/PerCapita.spec.jsx

@@ -1,13 +1,28 @@
 import configureMockStore from 'redux-mock-store'
 import {
-  mapDispatchToProps, mapStateToProps, PerCapita
+  mapDispatchToProps, mapStateToProps, PerCapita, validatePerCapFilters
 } from '../PerCapita'
 import { Provider } from 'react-redux'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { shallow } from 'enzyme'
 import thunk from 'redux-thunk'
 
+function setupEnzyme() {
+  const props = {
+    dataNormalization: true,
+    enablePer1000: true,
+    onDataNormalization: jest.fn()
+  }
+
+  const target = shallow(<PerCapita {...props} />);
+
+  return {
+    props,
+    target
+  }
+}
+
 function setupSnapshot() {
   const middlewares = [ thunk ]
   const mockStore = configureMockStore( middlewares )
@@ -29,6 +44,23 @@ describe( 'component: PerCapita', () => {
       let tree = target.toJSON()
       expect( tree ).toMatchSnapshot()
     } )
+
+    it('allows the user to trigger Complaints', () => {
+      const { target, props } = setupEnzyme()
+      const button = target.find('.raw');
+
+      button.simulate('click');
+      expect(props.onDataNormalization).toHaveBeenCalled();
+    });
+
+    it('allows the user to trigger Per 1000 Complaints', () => {
+      const { target, props } = setupEnzyme()
+      const button = target.find('.capita');
+
+      button.simulate('click');
+      expect(props.onDataNormalization).toHaveBeenCalled();
+    });
+
   } )
 
   describe('mapDispatchToProps', () => {
@@ -49,12 +81,14 @@ describe( 'component: PerCapita', () => {
       const state = {
         map: {
           dataNormalization: 'foo'
-        }
+        },
+        query: {}
       }
       let actual = mapStateToProps( state )
-      expect( actual ).toEqual( { dataNormalization: 'foo' } )
+      expect( actual ).toEqual( {
+        dataNormalization: 'foo',
+        enablePer1000: true
+      } )
     } )
   } )
-
-
 } )

src/__tests__/__snapshots__/App.spec.jsx.snap

@@ -1227,31 +1227,25 @@ exports[`initial state renders without crashing 1`] = `
           <section
             className="per-capita"
           >
-            <p>
-              Map Shading
-            </p>
-            <label
-              className="u-visually-hidden"
-              htmlFor="data-normalization"
-            >
-              Select the kind of shading to apply to the map
-            </label>
-            <select
-              id="data-normalization"
-              onChange={[Function]}
-              value="None"
+            <div
+              className="per-capita m-btn-group"
             >
-              <option
-                value="None"
+              <p>
+                Map Shading
+              </p>
+              <button
+                className="a-btn raw "
+                onClick={[Function]}
               >
                 Complaints
-              </option>
-              <option
-                value="Per 1000 pop."
+              </button>
+              <button
+                className="a-btn capita deselected"
+                onClick={[Function]}
               >
-                Per 1000 population
-              </option>
-            </select>
+                Complaints per 1,000 population
+              </button>
+            </div>
           </section>
         </div>
         <div>