feat(geocoding): use mapzen's autocomplete service

also, cache autocomplete results so queries to Mapzen don’t occur when
user hits backspace

Author: evansiroky

.npmignore

@@ -1 +1,3 @@
 .DS_Store
+mock-autocomplete-result.json
+yarn.lock

README.md

@@ -7,10 +7,11 @@ Geocoder that uses react-select
 
 ## Usage
 
-Check the `propTypes` for the options. For `boundary` see [isomorphic-mapzen-search](https://github.com/conveyal/isomorphic-mapzen-search#searchapikey-text-options) and for `focusPoint` use any [lonlat](https://github.com/conveyal/lonlat) compatible value.
+Check the `propTypes` for the options. For `boundary` see [isomorphic-mapzen-search](https://github.com/conveyal/isomorphic-mapzen-search#autocomplete) and for `focusPoint` use any [lonlat](https://github.com/conveyal/lonlat) compatible value.
 
 ```js
 import Geocoder from 'react-select-geocoder'
+
 render(
   <Geocoder
     apiKey={process.env.MAPZEN_KEY}

__snapshots__/index.test.js.snap

@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`Geocoder should render 1`] = `
 <Geocoder
   apiKey="test"
@@ -6,7 +8,8 @@ exports[`Geocoder should render 1`] = `
   findingLocationText="Locating you..."
   reverseSearch={[Function]}
   search={[Function]}
-  useLocationText="Use Current Location">
+  useLocationText="Use Current Location"
+>
   <Async
     apiKey="test"
     autoBlur={true}
@@ -27,9 +30,10 @@ exports[`Geocoder should render 1`] = `
     search={[Function]}
     searchPromptText="Type to search"
     useLocationText="Use Current Location"
-    value={null}>
+    value={null}
+  >
     <Select
-      addLabelText="Add \"{label}\"?"
+      addLabelText="Add \\"{label}\\"?"
       apiKey="test"
       arrowRenderer={[Function]}
       autoBlur={true}
@@ -85,21 +89,26 @@ exports[`Geocoder should render 1`] = `
       useLocationText="Use Current Location"
       value={null}
       valueComponent={[Function]}
-      valueKey="value">
+      valueKey="value"
+    >
       <div
-        className="Select Select--single is-searchable">
+        className="Select Select--single is-searchable"
+      >
         <div
           className="Select-control"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
-          onTouchStart={[Function]}>
+          onTouchStart={[Function]}
+        >
           <span
             className="Select-multi-value-wrapper"
-            id="react-select-2--value">
+            id="react-select-2--value"
+          >
             <div
-              className="Select-placeholder">
+              className="Select-placeholder"
+            >
               Select...
             </div>
             <AutosizeInput
@@ -114,14 +123,16 @@ exports[`Geocoder should render 1`] = `
               onFocus={[Function]}
               required={false}
               role="combobox"
-              value="">
+              value=""
+            >
               <div
                 className="Select-input"
                 style={
                   Object {
                     "display": "inline-block",
                   }
-                }>
+                }
+              >
                 <input
                   aria-activedescendant="react-select-2--value"
                   aria-expanded="false"
@@ -138,7 +149,8 @@ exports[`Geocoder should render 1`] = `
                       "width": "5px",
                     }
                   }
-                  value="" />
+                  value=""
+                />
                 <div
                   style={
                     Object {
@@ -150,16 +162,19 @@ exports[`Geocoder should render 1`] = `
                       "visibility": "hidden",
                       "whiteSpace": "pre",
                     }
-                  } />
+                  }
+                />
               </div>
             </AutosizeInput>
           </span>
           <span
             className="Select-arrow-zone"
-            onMouseDown={[Function]}>
+            onMouseDown={[Function]}
+          >
             <span
               className="Select-arrow"
-              onMouseDown={[Function]} />
+              onMouseDown={[Function]}
+            />
           </span>
         </div>
       </div>

index.js

@@ -1,4 +1,5 @@
-import {search as mapzenSearch, reverse as reverseSearch} from 'isomorphic-mapzen-search'
+import stableStringify from 'json-stable-stringify'
+import {autocomplete as mapzenAutocomplete, reverse as reverseSearch} from 'isomorphic-mapzen-search'
 import throttle from 'lodash.throttle'
 import React, {Component, PropTypes} from 'react'
 import {shallowEqual} from 'react-pure-render'
@@ -29,10 +30,12 @@ class Geocoder extends Component {
     featureToValue: (feature) => `${feature.properties.label}-${feature.geometry.coordinates.join(',')}`,
     findingLocationText: 'Locating you...',
     reverseSearch,
-    search: mapzenSearch,
+    search: mapzenAutocomplete,
     useLocationText: 'Use Current Location'
   }
 
+  autocompleteCache = {}
+
   options = {}
 
   state = {
@@ -88,16 +91,26 @@ class Geocoder extends Component {
         })
       }
     } else {
-      search({
+      const autocompleteQuery = {
         apiKey,
         boundary,
         focusPoint,
         text: input
-      }).then((geojson) => {
+      }
+      const autocompleteQueryKey = stableStringify(autocompleteQuery)
+
+      // check if autocomplete query has been made before
+      const cacheValue = this.autocompleteCache[autocompleteQueryKey]
+      if (cacheValue) {
+        return callback(null, cacheValue)
+      }
+
+      search(autocompleteQuery).then((geojson) => {
         const options = geojson && geojson.features
           ? geojson.features.map(this.featureToOption)
           : []
         this.cacheOptions(options)
+        this.autocompleteCache[autocompleteQueryKey] = {options}
         callback(null, {options})
       }).catch((error) => {
         callback(error)

index.test.js

@@ -2,15 +2,23 @@
 
 import {mount} from 'enzyme'
 import {mountToJson} from 'enzyme-to-json'
+import nock from 'nock'
 import React from 'react'
 
 import Geocoder from './index'
+const mockAutocompleteResult = require('./mock-autocomplete-result.json')
 
 // add a div to jsdom for enzyme to mount to
 const div = document.createElement('div')
 div.id = 'test'
 document.body.appendChild(div)
 
+function timeoutPromise (ms) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, ms)
+  })
+}
+
 describe('Geocoder', () => {
   it('should render', () => {
     const tree = mount(
@@ -22,4 +30,30 @@ describe('Geocoder', () => {
     })
     expect(mountToJson(tree)).toMatchSnapshot()
   })
+
+  it('should process input change', async () => {
+    nock('https://search.mapzen.com/')
+      .get(/v1\/autocomplete/)
+      .reply(200, mockAutocompleteResult)
+
+    const tree = mount(
+      <Geocoder
+        apiKey='test'
+        />
+    , {
+      attachTo: document.getElementById('test')
+    })
+
+    let calculatedOptions
+
+    tree.find('Async').props().loadOptions('123 main', (error, result) => {
+      expect(error).toBeFalsy()
+      calculatedOptions = result
+    })
+
+    // wait for query to mapzen
+    await timeoutPromise(1000)
+
+    expect(calculatedOptions.options).toHaveLength(10)
+  })
 })