From 2fbedad271eba617ad088cf214081930d52bb397 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Fri, 22 Nov 2019 10:35:28 +0200 Subject: [PATCH 1/6] ignore editor-specific files --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index b38db2f..36da5d6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules/ build/ +.history/ +.vscode/ From bdb3078150813fe6a621d27a7fb5b15d8366c9c4 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Fri, 22 Nov 2019 10:35:57 +0200 Subject: [PATCH 2/6] rename transformHit prop to align with instantsearch --- src/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index d616797..015eb88 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ const AlgoliaPlaces = ({ children, defaultValue, formatInputValue = defaultFormatInputValue, - hitTransformer = transformHit, + transformItems = transformHit, onSelect = noop, render, searchParams, @@ -40,7 +40,7 @@ const AlgoliaPlaces = ({ getPlaceObject(defaultValue) .then(result => { setLoading(false); - const { city, country } = hitTransformer(result); + const { city, country } = transformItems(result); setInputValue(formatInputValue(city, country)); }) .catch(error => { @@ -55,7 +55,7 @@ const AlgoliaPlaces = ({ }, [ defaultValue, formatInputValue, - hitTransformer, + transformItems, placesClient, searchParams, ]); @@ -83,7 +83,7 @@ const AlgoliaPlaces = ({ searchPlace(query) .then(results => { setLoading(false); - const optionsList = results.hits.map(hitTransformer); + const optionsList = results.hits.map(transformItems); setOptions(optionsList); }) .catch(error => { From 55edb4b281ad5fd329086a836818251fe4c89525 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Fri, 22 Nov 2019 10:40:23 +0200 Subject: [PATCH 3/6] make user handle the client initiation, removing direct algoliasearch dep --- src/index.js | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 015eb88..70608a3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,31 +1,23 @@ import { useEffect, useState, useMemo } from "react"; -import algoliasearch from "algoliasearch"; import { transformHit, - formatInputValue as defaultFormatInputValue, + formatInputValue as defaultFormatInputValue } from "./utils"; const noop = () => {}; const AlgoliaPlaces = ({ - apiKey, - appId, children, defaultValue, formatInputValue = defaultFormatInputValue, - transformItems = transformHit, onSelect = noop, render, + searchClient, searchParams, + transformItems = transformHit }) => { - // Setup algoliasearch placesClient client - const placesClient = useMemo(() => algoliasearch.initPlaces(appId, apiKey), [ - appId, - apiKey, - ]); - const searchPlace = query => placesClient.search(query, searchParams); - + const searchPlace = query => searchClient.search(query, searchParams); // Setup hooks const [error, setError] = useState(null); const [inputValue, setInputValue] = useState(""); @@ -57,7 +49,7 @@ const AlgoliaPlaces = ({ formatInputValue, transformItems, placesClient, - searchParams, + searchParams ]); const clear = () => { @@ -91,12 +83,11 @@ const AlgoliaPlaces = ({ setError(error); }); } - }, + } }; }, getOptionProps(option) { const { city, country, objectID } = option; - return { title: option.formatted, disabled: loading, @@ -104,9 +95,9 @@ const AlgoliaPlaces = ({ setOptions(null); setInputValue(formatInputValue(city, country)); onSelect(objectID, option); - }, + } }; - }, + } }); }; From f4e01de5e45dd3fec1e1452323ddf4a263a7ae32 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Fri, 22 Nov 2019 10:52:31 +0200 Subject: [PATCH 4/6] update docs --- README.md | 54 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index cd5a8f4..07d0d4f 100644 --- a/README.md +++ b/README.md @@ -18,14 +18,17 @@ yarn add @syndicode/react-algolia-places ## Usage ```jsx +const placesAppId = process.env.REACT_APP_ALGOLIA_PLACES_APP_ID; +const placesApiKey = process.env.REACT_APP_ALGOLIA_PLACES_API_KEY; +const searchClient = algoliasearch.initPlaces(placesAppId, placesApiKey); + +... + { - console.log(objectID); - }} + onSelect={objectID => { console.log(objectID) }} searchParams={searchParams} + searchClient={searchClient} > {({ clear, error, loading, options, getInputProps, getOptionProps }) => ( <> @@ -34,36 +37,39 @@ yarn add @syndicode/react-algolia-places {options && options.map(option => { // NOTE: you have to pass the option down to the getOptionProps() method - return
  • {option.city}
    • ; + return ( +
  • + {option.city} +
    • + ); })} )} -     +; ``` ### Component's props ``` -apiKey: String -appId: String # Your algolia's app apiKey and appId -defaultValue: String # Pass down objectID to prefetch result and fill in the input -onSelect(objectID: String, option: Option): String # -searchParams: searchParams -render | children - render prop -formatInputValue(hit: Hit): String - redefine default transformer for the inputs value on option select -hitTransformer(hit: Hit): Option - redefine default transformer for formatted option +**`defaultValue: String`** - Pass down a `objectID` to prefetch result and render the stored value +**`formatInputValue(hit: Hit): String`** - redefine default transformer for the inputs value on option select +**`onSelect(objectID: String, option: Option)`** - onselect callback +**`render`** | **`children`** - render prop +**`searchClient`** - initiated algoliasearch client +**`searchParams: searchParams`** - algoliasearch client search options +**`transformItems(hit: Hit): Option`** - redefine default transformer for formatted option ``` ### Render props parameters ``` -clear() - change selected value to `null`, reset all search results -error: Object - -getInputProps() - method that creates props object to pass onto input element -getOptionProps(option: Option) - method that creates props object to pass onto option component -loading: Boolean - whether search request is in progress -options: [Option] - list of formatted algolia places search results +**`clear()`** - change selected value to `null`, reset all search results +**`error: Object`** - search request error object +**`getInputProps()`** - method that creates props object to pass onto input element +**`getOptionProps(option: Option)`** - method that creates props object to pass onto option component +**`loading: Boolean`** - whether search request is in progress +**`options: [Option]`** - list of formatted algolia places search results ``` ### Types @@ -79,7 +85,7 @@ type Option { } ``` -See algolia docs for more info +See algolia docs for more info: -- search params options - https://community.algolia.com/places/api-clients.html#search-parameters -- hit's shape - https://community.algolia.com/places/api-clients.html#json-answer +- **`searchParams`** options - https://community.algolia.com/places/api-clients.html#search-parameters +- **`Hit`**'s shape - https://community.algolia.com/places/api-clients.html#json-answer From 3978fbf45bedaa0976fd137fdd3706bb4a8ba515 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Mon, 25 Nov 2019 10:03:58 +0200 Subject: [PATCH 5/6] fix variable name --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 70608a3..1d6fc4a 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,7 @@ const AlgoliaPlaces = ({ const [options, setOptions] = useState(null); useEffect(() => { const getPlaceObject = objectID => - placesClient.getObject(objectID, searchParams); + searchClient.getObject(objectID, searchParams); const getPlaceById = async defaultValue => { setLoading(true); @@ -48,7 +48,7 @@ const AlgoliaPlaces = ({ defaultValue, formatInputValue, transformItems, - placesClient, + searchClient, searchParams ]); From 2427390024c187e2806dee13de9fed324f846bc8 Mon Sep 17 00:00:00 2001 From: Anton Rusinov Date: Mon, 25 Nov 2019 10:22:13 +0200 Subject: [PATCH 6/6] add guard clause for the searchClient prop --- src/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 1d6fc4a..f3cfb2e 100644 --- a/src/index.js +++ b/src/index.js @@ -17,8 +17,6 @@ const AlgoliaPlaces = ({ searchParams, transformItems = transformHit }) => { - const searchPlace = query => searchClient.search(query, searchParams); - // Setup hooks const [error, setError] = useState(null); const [inputValue, setInputValue] = useState(""); const [loading, setLoading] = useState(false); @@ -52,6 +50,14 @@ const AlgoliaPlaces = ({ searchParams ]); + if (!searchClient) { + throw new Error( + "`searchClient` is required. Provide initialized client: `algoliasearch.initPlaces(placesAppId, placesApiKey)`" + ); + } + + const searchPlace = query => searchClient.search(query, searchParams); + const clear = () => { onSelect(null); setInputValue("");