[WIP] Add geocoding using NYC GeoSearch API with autosuggest

package.json

@@ -36,6 +36,7 @@
     "normalize-scss": "^6.0.0",
     "query-string": "^5.0.1",
     "react": "^15.4.2",
+    "react-autosuggest": "^9.3.4",
     "react-collapse": "^2.3.3",
     "react-copy-to-clipboard": "^4.2.3",
     "react-dom": "^15.4.2",

scss/components/_search-results.scss

@@ -0,0 +1,32 @@
+.SearchResults {
+  width: 100%;
+  position: relative;
+  padding-right: 10px;
+
+  border: 1px solid $marine-light;
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  p.address {
+    font-size: 14px;
+  }
+
+  button.close {
+    float: right;
+
+    height: 20px;
+    padding: 0 5px;
+    margin: 5px 5px 10px 10px;
+    font-size: 11px;
+    line-height: 11px;
+    background-color: $off-white;
+    border-color: transparent;
+    color: $marine-light;
+    text-align: left;
+    text-transform: capitalize;
+    letter-spacing: 0.5px;
+    border: none;
+  }
+}

scss/components/_search.scss

@@ -0,0 +1,73 @@
+.Search {
+  width: 240px;
+  position: absolute;
+  top: $margin-5 + $app-header-height - 10;
+  left: $margin-25 + $zoom-controls-width + $padding-10 - 10;
+  z-index: 5;
+  padding-right: 10px;
+  background-color: transparent;
+
+  .status {
+    line-height: 52px;
+  }
+
+  .react-autosuggest__container {
+    position: relative;
+  }
+
+  .react-autosuggest__input {
+    width: 240px;
+    height: 30px;
+    padding: 10px 20px;
+    font-family: Helvetica, sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+  }
+
+  .react-autosuggest__input--focused {
+    outline: none;
+  }
+
+  .react-autosuggest__input--open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .react-autosuggest__suggestions-container {
+    display: none;
+  }
+
+  .react-autosuggest__suggestions-container--open {
+    display: block;
+    position: absolute;
+    top: 51px;
+    width: 280px;
+    border: 1px solid #aaa;
+    background-color: #fff;
+    font-family: Helvetica, sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    z-index: 2;
+  }
+
+  .react-autosuggest__suggestions-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 5px 10px;
+    color: #333;
+  }
+
+  .react-autosuggest__suggestion--highlighted {
+    background-color: #ddd;
+  }
+
+}

scss/main.scss

@@ -37,3 +37,5 @@
 @import 'components/modal';
 @import 'components/small-device-message';
 @import 'components/about-copy';
+@import 'components/search';
+@import 'components/search-results';

src/actions/async_actions.js

@@ -12,6 +12,15 @@ import {
 
 polyfill();
 
+// fetch() has an annoying way of handling http errors, so make sure to check for them
+function maybeHandleHTTPError (response) {
+  if (!response.ok) {
+    throw Error(response.statusText);
+  } else {
+    return response;
+  }
+}
+
 const requestCrashStatsData = () => ({
   type: actions.CRASHES_ALL_REQUEST
 });
@@ -32,6 +41,7 @@ export const fetchCrashStatsData = (params) => {
   return (dispatch) => {
     dispatch(requestCrashStatsData());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then(json => dispatch(receiveCrashStatsData(json.rows[0])))
       .catch(error => dispatch(receiveCrashStatsError(error)));
@@ -58,6 +68,7 @@ export const fetchContributingFactors = (params) => {
   return (dispatch) => {
     dispatch(requestContributingFactors());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then(json => dispatch(receiveContributingFactors(json.rows)))
       .catch(error => dispatch(receiveContributingFactorsError(error)));
@@ -84,6 +95,7 @@ export const fetchCrashesYearRange = () => {
   return (dispatch) => {
     dispatch(requestCrashesYearRange());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then(json => dispatch(receiveCrashesYearRange(json.rows)))
       .catch(error => dispatch(receiveCrashesYearRangeError(error)));
@@ -110,6 +122,7 @@ export const fetchCrashesDateRange = () => {
   return (dispatch) => {
     dispatch(requestCrashesDateRange());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then(json => dispatch(receiveCrashesDateRange(json.rows)))
       .catch(error => dispatch(receiveCrashesDateRangeError(error)));
@@ -136,6 +149,7 @@ export const fetchCrashesMaxDate = () => {
   return (dispatch) => {
     dispatch(requestCrashesMaxDate());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then(json => dispatch(receiveCrashesMaxDate(json.rows)))
       .catch(error => dispatch(receiveCrashesMaxDateError(error)));
@@ -162,6 +176,7 @@ export const fetchGeoPolygons = (geo) => {
   return (dispatch) => {
     dispatch(requestGeoPolygons());
     return fetch(url)
+      .then(maybeHandleHTTPError)
       .then(res => res.json())
       .then((json) => {
         // tack on the geography name so that it may be diff'd in LeafletMap propTypes

src/actions/filter_by_search_location.js

@@ -0,0 +1,15 @@
+import {
+  FILTER_BY_LOCATION,
+  CLEAR_FILTER_BY_LOCATION,
+} from '../constants/action_types';
+
+export const filterByLocation = coordinates => ({
+  type: FILTER_BY_LOCATION,
+  coordinates
+});
+
+export const clearFilterByLocation = () => ({
+  type: CLEAR_FILTER_BY_LOCATION,
+});
+
+export default filterByLocation;

src/actions/index.js

@@ -4,6 +4,7 @@ export { fetchCrashStatsData,
   fetchCrashesDateRange,
   fetchCrashesMaxDate,
   fetchGeoPolygons,
+  fetchLocationGeocode
 } from './async_actions';
 export { startDateChange, endDateChange } from './filter_by_date_actions';
 export {
@@ -19,3 +20,5 @@ export {
 } from './filter_by_area_actions';
 export filterByContributingFactor from './filter_contributing_factor_actions';
 export { openModal, closeModal } from './modal_actions';
+export * from './location_search_actions';
+export * from './filter_by_search_location';

src/actions/location_search_actions.js

@@ -0,0 +1,67 @@
+import fetch from 'isomorphic-fetch';
+import { polyfill } from 'es6-promise';
+import {
+  LOCATION_SEARCH_REQUEST,
+  LOCATION_SEARCH_SUCCESS,
+  LOCATION_SEARCH_ERROR,
+  CLEAR_SEARCH_SUGGESTIONS,
+  UPDATE_AUTOSUGGEST_VALUE,
+  LOCATION_SEARCH_SELECT,
+  RESET_LOCATION_SEARCH,
+} from '../constants/action_types';
+
+polyfill();
+
+export const requestSearchResults = () => ({
+  type: LOCATION_SEARCH_REQUEST
+});
+
+export const receiveSearchResults = payload => ({
+  type: LOCATION_SEARCH_SUCCESS,
+  payload
+});
+
+export const receiveSearchError = error => ({
+  type: LOCATION_SEARCH_ERROR,
+  error
+});
+
+export const fetchSearchResults = () => {
+  const url = 'https://geosearch.planninglabs.nyc/v1/autocomplete?text=';
+  return (dispatch, getState) => {
+    const { autosuggestValue } = getState().search;
+    dispatch(requestSearchResults());
+    return fetch(`${url}${autosuggestValue}`)
+      .then((res) => {
+        // fetch has an annoying way of handling http errors...
+        if (!res.ok) {
+          throw Error(res.statusText);
+        } else {
+          return res.json();
+        }
+      })
+      .then((json) => {
+        const payload = json.features;
+        return dispatch(receiveSearchResults(payload));
+      })
+      .catch(error => dispatch(receiveSearchError(error.message)));
+  };
+};
+
+export const updateAutosuggestValue = value => ({
+  type: UPDATE_AUTOSUGGEST_VALUE,
+  value
+});
+
+export const selectSearchResult = feature => ({
+  type: LOCATION_SEARCH_SELECT,
+  feature
+});
+
+export const clearSearchSuggestions = () => ({
+  type: CLEAR_SEARCH_SUGGESTIONS
+});
+
+export const resetLocationSearch = () => ({
+  type: RESET_LOCATION_SEARCH
+});

src/components/App.js

@@ -10,6 +10,7 @@ import OptionsFiltersConnected from '../containers/OptionsFiltersConnected';
 import ModalConnected from '../containers/ModalConnected';
 import SmallDeviceMessage from './SmallDeviceMessage';
 import LoadingIndicator from './LoadingIndicator';
+import Search from '../containers/SearchConnected';
 
 class App extends Component {
   constructor() {
@@ -96,6 +97,7 @@ class App extends Component {
             <SmallDeviceMessage /> :
           [
             <AppHeader key="app-header" openModal={openModal} />,
+            <Search key="search-ui" />,
             <LeafletMapConnected
               key="leaflet-map"
               location={location}