feat(is-routing): support instantsearch routing (#551)

* feat(is-routing): support instantsearch routing makes Places InstantSearch Widget support the routing API from InstantSearch. * test(is-routing): add tests for the case where there is no widgetOptions * fix(is-routing): avoid overriding position in init * fix(is-routing): support backward and forward navigation
algolia · Aug 8, 2018 · 05a8cdb · 05a8cdb
1 parent 449c84d
commit 05a8cdb
Show file tree

Hide file tree

Showing 3 changed files with 435 additions and 8 deletions.
diff --git a/src/instantsearch/__snapshots__/widget.test.js.snap b/src/instantsearch/__snapshots__/widget.test.js.snap
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`instantsearch widget routing getWidgetSearchParameters should add the refinements according to the UI state provided 1`] = `
+SearchParameters {
+ "advancedSyntax": undefined,
+ "allowTyposOnNumericTokens": undefined,
+ "analytics": undefined,
+ "analyticsTags": undefined,
+ "aroundLatLng": "123,123",
+ "aroundLatLngViaIP": undefined,
+ "aroundPrecision": undefined,
+ "aroundRadius": undefined,
+ "attributesToHighlight": undefined,
+ "attributesToRetrieve": undefined,
+ "attributesToSnippet": undefined,
+ "disableExactOnAttributes": undefined,
+ "disjunctiveFacets": Array [],
+ "disjunctiveFacetsRefinements": Object {},
+ "distinct": undefined,
+ "enableExactOnSingleWordQuery": undefined,
+ "facets": Array [],
+ "facetsExcludes": Object {},
+ "facetsRefinements": Object {},
+ "getRankingInfo": undefined,
+ "hierarchicalFacets": Array [],
+ "hierarchicalFacetsRefinements": Object {},
+ "highlightPostTag": undefined,
+ "highlightPreTag": undefined,
+ "hitsPerPage": undefined,
+ "ignorePlurals": undefined,
+ "index": "",
+ "insideBoundingBox": undefined,
+ "insidePolygon": undefined,
+ "length": undefined,
+ "maxValuesPerFacet": undefined,
+ "minProximity": undefined,
+ "minWordSizefor1Typo": undefined,
+ "minWordSizefor2Typos": undefined,
+ "minimumAroundRadius": undefined,
+ "numericFilters": undefined,
+ "numericRefinements": Object {},
+ "offset": undefined,
+ "optionalFacetFilters": undefined,
+ "optionalTagFilters": undefined,
+ "optionalWords": undefined,
+ "page": 0,
+ "query": "",
+ "queryType": undefined,
+ "removeWordsIfNoResults": undefined,
+ "replaceSynonymsInHighlight": undefined,
+ "restrictSearchableAttributes": undefined,
+ "snippetEllipsisText": undefined,
+ "synonyms": undefined,
+ "tagFilters": undefined,
+ "tagRefinements": Array [],
+ "typoTolerance": undefined,
+}
+`;
+
+exports[`instantsearch widget routing getWidgetSearchParameters should enforce the default value if no value is in the UI State 1`] = `
+SearchParameters {
+ "advancedSyntax": undefined,
+ "allowTyposOnNumericTokens": undefined,
+ "analytics": undefined,
+ "analyticsTags": undefined,
+ "aroundLatLng": "2,2",
+ "aroundLatLngViaIP": undefined,
+ "aroundPrecision": undefined,
+ "aroundRadius": undefined,
+ "attributesToHighlight": undefined,
+ "attributesToRetrieve": undefined,
+ "attributesToSnippet": undefined,
+ "disableExactOnAttributes": undefined,
+ "disjunctiveFacets": Array [],
+ "disjunctiveFacetsRefinements": Object {},
+ "distinct": undefined,
+ "enableExactOnSingleWordQuery": undefined,
+ "facets": Array [],
+ "facetsExcludes": Object {},
+ "facetsRefinements": Object {},
+ "getRankingInfo": undefined,
+ "hierarchicalFacets": Array [],
+ "hierarchicalFacetsRefinements": Object {},
+ "highlightPostTag": undefined,
+ "highlightPreTag": undefined,
+ "hitsPerPage": undefined,
+ "ignorePlurals": undefined,
+ "index": "",
+ "insideBoundingBox": undefined,
+ "insidePolygon": undefined,
+ "length": undefined,
+ "maxValuesPerFacet": undefined,
+ "minProximity": undefined,
+ "minWordSizefor1Typo": undefined,
+ "minWordSizefor2Typos": undefined,
+ "minimumAroundRadius": undefined,
+ "numericFilters": undefined,
+ "numericRefinements": Object {},
+ "offset": undefined,
+ "optionalFacetFilters": undefined,
+ "optionalTagFilters": undefined,
+ "optionalWords": undefined,
+ "page": 0,
+ "query": "",
+ "queryType": undefined,
+ "removeWordsIfNoResults": undefined,
+ "replaceSynonymsInHighlight": undefined,
+ "restrictSearchableAttributes": undefined,
+ "snippetEllipsisText": undefined,
+ "synonyms": undefined,
+ "tagFilters": undefined,
+ "tagRefinements": Array [],
+ "typoTolerance": undefined,
+}
+`;
+
+exports[`instantsearch widget routing getWidgetSearchParameters should reset aroundLatLng if no defaultOptions and no value is in the UI State 1`] = `
+SearchParameters {
+ "advancedSyntax": undefined,
+ "allowTyposOnNumericTokens": undefined,
+ "analytics": undefined,
+ "analyticsTags": undefined,
+ "aroundLatLng": undefined,
+ "aroundLatLngViaIP": undefined,
+ "aroundPrecision": undefined,
+ "aroundRadius": undefined,
+ "attributesToHighlight": undefined,
+ "attributesToRetrieve": undefined,
+ "attributesToSnippet": undefined,
+ "disableExactOnAttributes": undefined,
+ "disjunctiveFacets": Array [],
+ "disjunctiveFacetsRefinements": Object {},
+ "distinct": undefined,
+ "enableExactOnSingleWordQuery": undefined,
+ "facets": Array [],
+ "facetsExcludes": Object {},
+ "facetsRefinements": Object {},
+ "getRankingInfo": undefined,
+ "hierarchicalFacets": Array [],
+ "hierarchicalFacetsRefinements": Object {},
+ "highlightPostTag": undefined,
+ "highlightPreTag": undefined,
+ "hitsPerPage": undefined,
+ "ignorePlurals": undefined,
+ "index": "",
+ "insideBoundingBox": undefined,
+ "insidePolygon": undefined,
+ "length": undefined,
+ "maxValuesPerFacet": undefined,
+ "minProximity": undefined,
+ "minWordSizefor1Typo": undefined,
+ "minWordSizefor2Typos": undefined,
+ "minimumAroundRadius": undefined,
+ "numericFilters": undefined,
+ "numericRefinements": Object {},
+ "offset": undefined,
+ "optionalFacetFilters": undefined,
+ "optionalTagFilters": undefined,
+ "optionalWords": undefined,
+ "page": 0,
+ "query": "",
+ "queryType": undefined,
+ "removeWordsIfNoResults": undefined,
+ "replaceSynonymsInHighlight": undefined,
+ "restrictSearchableAttributes": undefined,
+ "snippetEllipsisText": undefined,
+ "synonyms": undefined,
+ "tagFilters": undefined,
+ "tagRefinements": Array [],
+ "typoTolerance": undefined,
+}
+`;
diff --git a/src/instantsearch/widget.js b/src/instantsearch/widget.js
@@ -10,34 +10,89 @@ class AlgoliaPlacesWidget {
  }
 
  this.placesOptions = placesOptions;
+ this.placesAutocomplete = places(this.placesOptions);
+
+ this.state = {};
  }
- init({ helper }) {
- const placesAutocomplete = places(this.placesOptions);
 
+ init({ helper }) {
  helper
  .setQueryParameter('insideBoundingBox')
- .setQueryParameter('aroundLatLng', this.defaultPosition);
+ .setQueryParameter(
+ 'aroundLatLng',
+ this.state.position || this.defaultPosition
+ );
 
- placesAutocomplete.on('change', opts => {
+ this.placesAutocomplete.on('change', opts => {
  const {
  suggestion: {
  latlng: { lat, lng },
+ value,
  },
  } = opts;
 
+ this.state.position = `${lat},${lng}`;
+ this.state.query = value;
+
  helper
  .setQueryParameter('insideBoundingBox')
- .setQueryParameter('aroundLatLng', `${lat},${lng}`)
+ .setQueryParameter('aroundLatLng', this.state.position)
  .search();
  });
 
- placesAutocomplete.on('clear', () => {
+ this.placesAutocomplete.on('clear', () => {
+ this.state.position = undefined;
+ this.state.query = undefined;
+
  helper
  .setQueryParameter('insideBoundingBox')
  .setQueryParameter('aroundLatLng', this.defaultPosition)
  .search();
  });
  }
+
+ getWidgetSearchParameters(searchParameters, { uiState }) {
+ if (!uiState.places) {
+ this.placesAutocomplete.setVal('');
+ return searchParameters;
+ }
+
+ const { query, position } = uiState.places;
+
+ this.state = uiState.places;
+ this.placesAutocomplete.setVal(query || '');
+
+ return searchParameters
+ .setQueryParameter('insideBoundingBox')
+ .setQueryParameter('aroundLatLng', position);
+ }
+
+ getWidgetState(uiState, { searchParameters }) {
+ if (
+ uiState.places &&
+ this.state.query === uiState.places.query &&
+ searchParameters.aroundLatLng === uiState.places.position
+ ) {
+ return uiState;
+ }
+
+ if (
+ searchParameters.aroundLatLng === undefined &&
+ this.state.query === undefined
+ ) {
+ const newUiState = Object.assign({}, uiState);
+ delete newUiState.places;
+ return newUiState;
+ }
+
+ return {
+ ...uiState,
+ places: {
+ query: this.state.query,
+ position: searchParameters.aroundLatLng,
+ },
+ };
+ }
 }
 
 /**