Add US state button to bottom of agency search results

src/components/AgencySearch.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 
 import AgencySearchResults from './AgencySearchResults'
 import OnEscape from './OnEscape'
+import { oriToState } from '../util/ori'
 
 class AgencySearch extends Component {
   constructor(props) {
@@ -50,14 +51,19 @@ class AgencySearch extends Component {
     return e
   }
 
-  handleSearchClick = d => e => {
+  handleResultsClick = d => e => {
     e.preventDefault()
     this.setState({ search: d.agency_name, hasSelection: true })
     this.props.onChange({ place: d.ori, placeType: 'agency' })
   }
 
+  handleStateClick = usState => {
+    this.setState({ showResults: false })
+    this.props.onChange({ place: usState, placeType: 'state' })
+  }
+
   clearInput = () => {
-    this.setState({ search: '', hasSelection: false })
+    this.setState({ search: '', hasSelection: false, showResults: true })
   }
 
   toggleResults = () => {
@@ -124,7 +130,9 @@ class AgencySearch extends Component {
                 )}
                 groupKey="primary_county"
                 groupValues={Object.keys(counties).sort()}
-                onClick={this.handleSearchClick}
+                onResultsClick={this.handleResultsClick}
+                onStateClick={this.handleStateClick}
+                usState={oriToState(data[0].ori)}
               />
             </OnEscape>}
         </div>

src/components/AgencySearchResults.js

@@ -1,3 +1,4 @@
+import startCase from 'lodash.startcase'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -26,7 +27,14 @@ const AgencySearchResultItem = ({ agency, onClick }) => {
 }
 /* eslint-enable camelcase */
 
-const AgencySearchResults = ({ data, groupKey, groupValues, onClick }) => {
+const AgencySearchResults = ({
+  data,
+  groupKey,
+  groupValues,
+  onResultsClick,
+  onStateClick,
+  usState,
+}) => {
   const noFederal = data.filter(d => d.agency_type_name !== 'Federal')
   const dataGrouped = groupValues.map(key => ({
     key,
@@ -52,11 +60,28 @@ const AgencySearchResults = ({ data, groupKey, groupValues, onClick }) => {
               .slice(0, 100)
               .sort((a, b) => a.agency_name < b.agency_name)
               .map((d, i) =>
-                <AgencySearchResultItem agency={d} key={i} onClick={onClick} />,
+                <AgencySearchResultItem
+                  agency={d}
+                  key={i}
+                  onClick={onResultsClick}
+                />,
               )}
           </ul>
         </div>,
       )}
+      <hr className="my2" />
+      <div>
+        <p className="italic serif fs-12">
+          Agencies that have submitted a full year{"'"}s worth of data in 2014
+          are listed in dark blue.
+        </p>
+        <button
+          className="btn btn-primary regular py-tiny px1 fs-14"
+          onClick={() => onStateClick(usState)}
+        >
+          View {startCase(usState)}
+        </button>
+      </div>
     </div>
   )
 }
@@ -65,7 +90,9 @@ AgencySearchResults.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   groupKey: PropTypes.string.isRequired,
   groupValues: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onClick: PropTypes.func.isRequired,
+  onResultsClick: PropTypes.func.isRequired,
+  onStateClick: PropTypes.func.isRequired,
+  usState: PropTypes.string.isRequired,
 }
 
 export default AgencySearchResults