diff --git a/examples/autocomplete/package.json b/examples/autocomplete/package.json index f3591fc6c5..de6d10c159 100644 --- a/examples/autocomplete/package.json +++ b/examples/autocomplete/package.json @@ -13,6 +13,7 @@ "react-test-renderer": "16.8.6" }, "dependencies": { + "algoliasearch": "3.32.1", "antd": "3.19.8", "lodash": "4.17.11", "prop-types": "15.6.0", diff --git a/examples/autocomplete/src/App-Mentions.js b/examples/autocomplete/src/App-Mentions.js index 3cd866124d..19f96c5ca1 100644 --- a/examples/autocomplete/src/App-Mentions.js +++ b/examples/autocomplete/src/App-Mentions.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Mention from 'antd/lib/mention'; +import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, connectAutoComplete } from 'react-instantsearch-dom'; import 'antd/lib/mention/style/css'; @@ -22,12 +23,13 @@ AsyncMention.propTypes = { const ConnectedAsyncMention = connectAutoComplete(AsyncMention); +const searchClient = algoliasearch( + 'latency', + '6be0576ff61c053d5f9a3225e2a90f76' +); + const App = () => ( - + ); diff --git a/examples/autocomplete/src/App-Multi-Index.js b/examples/autocomplete/src/App-Multi-Index.js index c51aa56f4a..a06957ff98 100644 --- a/examples/autocomplete/src/App-Multi-Index.js +++ b/examples/autocomplete/src/App-Multi-Index.js @@ -8,13 +8,15 @@ import { Highlight, connectAutoComplete, } from 'react-instantsearch-dom'; +import algoliasearch from 'algoliasearch/lite'; + +const searchClient = algoliasearch( + 'latency', + '6be0576ff61c053d5f9a3225e2a90f76' +); const App = () => ( - + diff --git a/examples/autocomplete/yarn.lock b/examples/autocomplete/yarn.lock index 7c76f2bf02..7f7fc71fab 100644 --- a/examples/autocomplete/yarn.lock +++ b/examples/autocomplete/yarn.lock @@ -1892,6 +1892,27 @@ algoliasearch-helper@^2.26.0: qs "^6.5.1" util "^0.10.3" +algoliasearch@3.32.1: + version "3.32.1" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.32.1.tgz#605f8a2c17ab8da2af4456110f4d0a02b384e3d0" + integrity sha512-NaaHMboU9tKwrU3aim7LlzSDqKb+1TGaC+Lx3NOttSnuMHbPpaf+7LtJL4KlosbRWEwqb9t5wSYMVDrPTH2dNA== + dependencies: + agentkeepalive "^2.2.0" + debug "^2.6.9" + envify "^4.0.0" + es6-promise "^4.1.0" + events "^1.1.0" + foreach "^2.0.5" + global "^4.3.2" + inherits "^2.0.1" + isarray "^2.0.1" + load-script "^1.0.0" + object-keys "^1.0.11" + querystring-es3 "^0.2.1" + reduce "^1.0.1" + semver "^5.1.0" + tunnel-agent "^0.6.0" + algoliasearch@^3.27.1: version "3.30.0" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1" diff --git a/examples/geo-search/package.json b/examples/geo-search/package.json index ff5515c63d..2089c571ae 100644 --- a/examples/geo-search/package.json +++ b/examples/geo-search/package.json @@ -13,6 +13,7 @@ "react-test-renderer": "16.8.6" }, "dependencies": { + "algoliasearch": "3.32.1", "instantsearch.css": "7.3.1", "qs": "6.7.0", "react": "16.8.6", diff --git a/examples/geo-search/src/App.js b/examples/geo-search/src/App.js index 48d3c92fe6..06827755c1 100644 --- a/examples/geo-search/src/App.js +++ b/examples/geo-search/src/App.js @@ -1,5 +1,6 @@ import qs from 'qs'; import React, { Component, Fragment } from 'react'; +import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom'; import { GoogleMapsLoader, @@ -8,6 +9,11 @@ import { Marker, } from 'react-instantsearch-dom-maps'; +const searchClient = algoliasearch( + 'latency', + '6be0576ff61c053d5f9a3225e2a90f76' +); + const updateAfter = 700; const searchStateToUrl = searchState => searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''; @@ -72,8 +78,7 @@ class App extends Component { return ( ( - +

Results in first dataset

diff --git a/examples/multi-index/yarn.lock b/examples/multi-index/yarn.lock index f121dbf275..4345b68323 100644 --- a/examples/multi-index/yarn.lock +++ b/examples/multi-index/yarn.lock @@ -1830,6 +1830,27 @@ algoliasearch-helper@^2.26.0: qs "^6.5.1" util "^0.10.3" +algoliasearch@3.32.1: + version "3.32.1" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.32.1.tgz#605f8a2c17ab8da2af4456110f4d0a02b384e3d0" + integrity sha512-NaaHMboU9tKwrU3aim7LlzSDqKb+1TGaC+Lx3NOttSnuMHbPpaf+7LtJL4KlosbRWEwqb9t5wSYMVDrPTH2dNA== + dependencies: + agentkeepalive "^2.2.0" + debug "^2.6.9" + envify "^4.0.0" + es6-promise "^4.1.0" + events "^1.1.0" + foreach "^2.0.5" + global "^4.3.2" + inherits "^2.0.1" + isarray "^2.0.1" + load-script "^1.0.0" + object-keys "^1.0.11" + querystring-es3 "^0.2.1" + reduce "^1.0.1" + semver "^5.1.0" + tunnel-agent "^0.6.0" + algoliasearch@^3.27.1: version "3.30.0" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1" diff --git a/examples/next/components/app.js b/examples/next/components/app.js index 93eb90b132..6353e91e92 100644 --- a/examples/next/components/app.js +++ b/examples/next/components/app.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import algoliasearch from 'algoliasearch/lite'; import { RefinementList, SearchBox, @@ -10,6 +11,11 @@ import { } from 'react-instantsearch-dom'; import { InstantSearch } from './instantsearch'; +const searchClient = algoliasearch( + 'latency', + '6be0576ff61c053d5f9a3225e2a90f76' +); + const HitComponent = ({ hit }) => (
@@ -48,8 +54,7 @@ export default class extends React.Component { render() { return ( diff --git a/examples/server-side-rendering/yarn.lock b/examples/server-side-rendering/yarn.lock index 8a7228bf05..fd48f68ae5 100644 --- a/examples/server-side-rendering/yarn.lock +++ b/examples/server-side-rendering/yarn.lock @@ -1308,6 +1308,27 @@ algoliasearch-helper@^2.26.0: qs "^6.5.1" util "^0.10.3" +algoliasearch@3.32.1: + version "3.32.1" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.32.1.tgz#605f8a2c17ab8da2af4456110f4d0a02b384e3d0" + integrity sha512-NaaHMboU9tKwrU3aim7LlzSDqKb+1TGaC+Lx3NOttSnuMHbPpaf+7LtJL4KlosbRWEwqb9t5wSYMVDrPTH2dNA== + dependencies: + agentkeepalive "^2.2.0" + debug "^2.6.9" + envify "^4.0.0" + es6-promise "^4.1.0" + events "^1.1.0" + foreach "^2.0.5" + global "^4.3.2" + inherits "^2.0.1" + isarray "^2.0.1" + load-script "^1.0.0" + object-keys "^1.0.11" + querystring-es3 "^0.2.1" + reduce "^1.0.1" + semver "^5.1.0" + tunnel-agent "^0.6.0" + algoliasearch@^3.27.1: version "3.30.0" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1" diff --git a/package.json b/package.json index 7e865c713a..c8d4b91a1e 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,7 @@ }, { "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js", - "maxSize": "64.25 kB" + "maxSize": "53 kB" }, { "path": "packages/react-instantsearch-dom-maps/dist/umd/ReactInstantSearchDOMMaps.min.js", diff --git a/packages/react-instantsearch-core/src/components/Index.tsx b/packages/react-instantsearch-core/src/components/Index.tsx index 1e581c74a1..e928a34b3f 100644 --- a/packages/react-instantsearch-core/src/components/Index.tsx +++ b/packages/react-instantsearch-core/src/components/Index.tsx @@ -32,12 +32,17 @@ type State = { * @propType {{ Root: string|function, props: object }} [root] - Use this to customize the root element. Default value: `{ Root: 'div' }` * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Index, SearchBox, Hits, Configure } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-core/src/components/InstantSearch.tsx b/packages/react-instantsearch-core/src/components/InstantSearch.tsx index 3ce7767647..a998337579 100644 --- a/packages/react-instantsearch-core/src/components/InstantSearch.tsx +++ b/packages/react-instantsearch-core/src/components/InstantSearch.tsx @@ -81,11 +81,8 @@ type State = { * @name * @requirements You will need to have an Algolia account to be able to use this widget. * [Create one now](https://www.algolia.com/users/sign_up). - * @propType {string} appId - Your Algolia application id. - * @propType {string} apiKey - Your Algolia search-only API key. * @propType {string} indexName - Main index in which to search. * @propType {boolean} [refresh=false] - Flag to activate when the cache needs to be cleared so that the front-end is updated when a change occurs in the index. - * @propType {object} [algoliaClient] - Provide a custom Algolia client instead of the internal one (deprecated in favor of `searchClient`). * @propType {object} [searchClient] - Provide a custom search client. * @propType {func} [onSearchStateChange] - Function to be called everytime a new search is done. Useful for [URL Routing](guide/Routing.html). * @propType {object} [searchState] - Object to inject some search state. Switches the InstantSearch component in controlled mode. Useful for [URL Routing](guide/Routing.html). @@ -95,12 +92,17 @@ type State = { * @propType {{ Root: string|function, props: object }} [root] - Use this to customize the root element. Default value: `{ Root: 'div' }` * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * @@ -117,7 +119,12 @@ class InstantSearch extends Component { // @TODO: These props are currently constant. indexName: PropTypes.string.isRequired, - searchClient: PropTypes.object.isRequired, + searchClient: PropTypes.shape({ + search: PropTypes.func.isRequired, + searchForFacetValues: PropTypes.func, + addAlgoliaAgent: PropTypes.func, + clearCache: PropTypes.func, + }).isRequired, createURL: PropTypes.func, diff --git a/packages/react-instantsearch-core/src/connectors/connectHighlight.js b/packages/react-instantsearch-core/src/connectors/connectHighlight.js index 34a346bc14..370d9284fe 100644 --- a/packages/react-instantsearch-core/src/connectors/connectHighlight.js +++ b/packages/react-instantsearch-core/src/connectors/connectHighlight.js @@ -26,8 +26,14 @@ const highlight = ({ * @providedPropType {function} highlight - function to retrieve and parse an attribute from a hit. It takes a configuration object with 3 attributes: `highlightProperty` which is the property that contains the highlight structure from the records, `attribute` which is the name of the attribute (it can be either a string or an array of strings) to look for and `hit` which is the hit from Algolia. It returns an array of objects `{value: string, isHighlighted: boolean}`. If the element that corresponds to the attribute is an array of strings, it will return a nested array of objects. * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SearchBox, Hits, connectHighlight } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const CustomHighlight = connectHighlight( * ({ highlight, attribute, hit, highlightProperty }) => { * const highlights = highlight({ @@ -52,8 +58,7 @@ const highlight = ({ * * const App = () => ( * * diff --git a/packages/react-instantsearch-core/src/connectors/connectHits.js b/packages/react-instantsearch-core/src/connectors/connectHits.js index 002d8be2e6..77cbe3d3bb 100644 --- a/packages/react-instantsearch-core/src/connectors/connectHits.js +++ b/packages/react-instantsearch-core/src/connectors/connectHits.js @@ -19,8 +19,13 @@ import { addAbsolutePositions, addQueryID } from '../core/utils'; * @providedPropType {array.} hits - the records that matched the search state * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Highlight, connectHits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); * const CustomHits = connectHits(({ hits }) => ( *
* {hits.map(hit => @@ -33,8 +38,7 @@ import { addAbsolutePositions, addQueryID } from '../core/utils'; * * const App = () => ( * * diff --git a/packages/react-instantsearch-core/src/connectors/connectStateResults.js b/packages/react-instantsearch-core/src/connectors/connectStateResults.js index a42635600f..3e46686500 100644 --- a/packages/react-instantsearch-core/src/connectors/connectStateResults.js +++ b/packages/react-instantsearch-core/src/connectors/connectStateResults.js @@ -17,8 +17,14 @@ import { getResults } from '../core/indexUtils'; * @providedPropType {object} props - component props. * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SearchBox, Hits, connectStateResults } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const Content = connectStateResults(({ searchState, searchResults }) => { * const hasResults = searchResults && searchResults.nbHits !== 0; * @@ -36,8 +42,7 @@ import { getResults } from '../core/indexUtils'; * * const App = () => ( * * diff --git a/packages/react-instantsearch-core/src/core/__tests__/__snapshots__/createInstantSearch.js.snap b/packages/react-instantsearch-core/src/core/__tests__/__snapshots__/createInstantSearch.js.snap deleted file mode 100644 index bf6924ec07..0000000000 --- a/packages/react-instantsearch-core/src/core/__tests__/__snapshots__/createInstantSearch.js.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`createInstantSearch expect to create InstantSearch with a custom root props 1`] = ` -Object { - "children": undefined, - "createURL": undefined, - "indexName": "name", - "onSearchParameters": undefined, - "onSearchStateChange": undefined, - "refresh": false, - "resultsState": undefined, - "root": Object { - "Root": "span", - "props": Object { - "style": Object { - "flex": 1, - }, - }, - }, - "searchState": undefined, - "stalledSearchDelay": 200, -} -`; - -exports[`createInstantSearch wraps InstantSearch 1`] = ` -Object { - "children": undefined, - "createURL": undefined, - "indexName": "name", - "onSearchParameters": undefined, - "onSearchStateChange": undefined, - "refresh": false, - "resultsState": undefined, - "root": Object { - "Root": "div", - }, - "searchState": undefined, - "stalledSearchDelay": 200, -} -`; diff --git a/packages/react-instantsearch-core/src/core/__tests__/createInstantSearch.js b/packages/react-instantsearch-core/src/core/__tests__/createInstantSearch.js index ba3ad28923..753ba6125f 100644 --- a/packages/react-instantsearch-core/src/core/__tests__/createInstantSearch.js +++ b/packages/react-instantsearch-core/src/core/__tests__/createInstantSearch.js @@ -8,187 +8,90 @@ import version from '../version'; Enzyme.configure({ adapter: new Adapter() }); describe('createInstantSearch', () => { - const algoliaClient = { addAlgoliaAgent: jest.fn() }; - const algoliaClientFactory = jest.fn(() => algoliaClient); - const CustomInstantSearch = createInstantSearch(algoliaClientFactory, { + const searchClient = { search() {}, addAlgoliaAgent: jest.fn() }; + const CustomInstantSearch = createInstantSearch({ Root: 'div', }); beforeEach(() => { - algoliaClient.addAlgoliaAgent.mockClear(); - algoliaClientFactory.mockClear(); + searchClient.addAlgoliaAgent.mockClear(); }); it('wraps InstantSearch', () => { const wrapper = shallow( - + ); - const { - algoliaClient, // eslint-disable-line no-shadow - searchClient, - ...propsWithoutClient - } = wrapper.props(); + const { searchClient: _, ...propsWithoutClient } = wrapper.props(); expect(wrapper.is(InstantSearch)).toBe(true); - expect(propsWithoutClient).toMatchSnapshot(); - expect(wrapper.props().algoliaClient).toBe(algoliaClient); expect(wrapper.props().searchClient).toBe(searchClient); - }); - - it('creates an algolia client using the provided factory', () => { - shallow(); - - expect(algoliaClientFactory).toHaveBeenCalledTimes(1); - expect(algoliaClientFactory).toHaveBeenCalledWith('app', 'key', { - _useRequestCache: true, - }); - - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledWith( - `react-instantsearch (${version})` - ); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledWith( - `react (${React.version})` - ); - }); - - it('throws if algoliaClient is given with searchClient', () => { - const trigger = () => - shallow( - - ); - - expect(() => trigger()).toThrow(); - }); - - it('throws if appId is given with searchClient', () => { - const trigger = () => - shallow( - - ); - - expect(() => trigger()).toThrow(); - }); - - it('throws if apiKey is given with searchClient', () => { - const trigger = () => - shallow( - - ); - - expect(() => trigger()).toThrow(); - }); - - it('updates the algoliaClient when appId or apiKey changes', () => { - const wrapper = shallow( - - ); - - wrapper.setProps({ appId: 'app2', apiKey: 'key' }); - wrapper.setProps({ appId: 'app', apiKey: 'key2' }); - - expect(algoliaClientFactory).toHaveBeenCalledTimes(3); - expect(algoliaClientFactory.mock.calls[1]).toEqual(['app2', 'key']); - expect(algoliaClientFactory.mock.calls[2]).toEqual(['app', 'key2']); + expect(propsWithoutClient).toMatchInlineSnapshot(` + Object { + "children": undefined, + "createURL": undefined, + "indexName": "name", + "onSearchParameters": undefined, + "onSearchStateChange": undefined, + "refresh": false, + "resultsState": undefined, + "root": Object { + "Root": "div", + }, + "searchState": undefined, + "stalledSearchDelay": 200, + } + `); }); it('uses the provided searchClient', () => { const wrapper = shallow( - + ); - expect(algoliaClientFactory).toHaveBeenCalledTimes(0); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - expect(wrapper.props().searchClient).toBe(algoliaClient); - }); + expect(searchClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - it('uses the provided algoliaClient', () => { - const wrapper = shallow( - + expect(searchClient.addAlgoliaAgent).toHaveBeenCalledWith( + `react-instantsearch (${version})` + ); + expect(searchClient.addAlgoliaAgent).toHaveBeenCalledWith( + `react (${React.version})` ); - expect(algoliaClientFactory).toHaveBeenCalledTimes(0); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - expect(wrapper.props().algoliaClient).toBe(algoliaClient); + expect(wrapper.props().searchClient).toBe(searchClient); }); it('does not throw if searchClient does not have a `addAlgoliaAgent()` method', () => { - const client = {}; + const client = { search() {} }; const trigger = () => shallow(); expect(() => trigger()).not.toThrow(); }); - it('does not throw if algoliaClient does not have a `addAlgoliaAgent()` method', () => { - const client = {}; - const trigger = () => - shallow(); - - expect(() => trigger()).not.toThrow(); - }); - - it('updates the algoliaClient when provided algoliaClient is passed down', () => { - const newAlgoliaClient = { - addAlgoliaAgent: jest.fn(), - }; - - const wrapper = shallow( - - ); - - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - - wrapper.setProps({ - algoliaClient: newAlgoliaClient, - }); - - expect(wrapper.props().algoliaClient).toBe(newAlgoliaClient); - expect(newAlgoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - }); - it('updates the searchClient when provided searchClient is passed down', () => { - const newAlgoliaClient = { + const newSearchClient = { addAlgoliaAgent: jest.fn(), }; const wrapper = shallow( - + ); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); + expect(searchClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); wrapper.setProps({ - searchClient: newAlgoliaClient, + searchClient: newSearchClient, }); - expect(wrapper.props().searchClient).toBe(newAlgoliaClient); - expect(newAlgoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - }); - - it('does not throw when algoliaClient gets updated and does not have a `addAlgoliaAgent()` method', () => { - const client = {}; - const makeWrapper = () => - shallow(); - - expect(() => { - makeWrapper().setProps({ - algoliaClient: client, - }); - }).not.toThrow(); + expect(wrapper.props().searchClient).toBe(newSearchClient); + expect(newSearchClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); + expect(newSearchClient.addAlgoliaAgent).toHaveBeenCalledWith( + `react-instantsearch (${version})` + ); + expect(newSearchClient.addAlgoliaAgent).toHaveBeenCalledWith( + `react (${React.version})` + ); }); it('does not throw when searchClient gets updated and does not have a `addAlgoliaAgent()` method', () => { @@ -214,16 +117,33 @@ describe('createInstantSearch', () => { }; const wrapper = shallow( - + ); - const { - algoliaClient, // eslint-disable-line no-shadow, no-unused-vars - searchClient, // eslint-disable-line no-unused-vars - ...propsWithoutClient - } = wrapper.props(); + // eslint-disable-next-line no-shadow, no-unused-vars + const { searchClient, ...propsWithoutClient } = wrapper.props(); expect(wrapper.props().root).toEqual(root); - expect(propsWithoutClient).toMatchSnapshot(); + expect(propsWithoutClient).toMatchInlineSnapshot(` + Object { + "children": undefined, + "createURL": undefined, + "indexName": "name", + "onSearchParameters": undefined, + "onSearchStateChange": undefined, + "refresh": false, + "resultsState": undefined, + "root": Object { + "Root": "span", + "props": Object { + "style": Object { + "flex": 1, + }, + }, + }, + "searchState": undefined, + "stalledSearchDelay": 200, + } + `); }); }); diff --git a/packages/react-instantsearch-core/src/core/createInstantSearch.js b/packages/react-instantsearch-core/src/core/createInstantSearch.js index b0769c0056..e18797077a 100644 --- a/packages/react-instantsearch-core/src/core/createInstantSearch.js +++ b/packages/react-instantsearch-core/src/core/createInstantSearch.js @@ -5,18 +5,19 @@ import version from './version'; /** * Creates a specialized root InstantSearch component. It accepts - * an algolia client and a specification of the root Element. - * @param {function} defaultAlgoliaClient - a function that builds an Algolia client + * a specification of the root Element. * @param {object} root - the defininition of the root of an InstantSearch sub tree. * @returns {object} an InstantSearch root */ -export default function createInstantSearch(defaultAlgoliaClient, root) { +export default function createInstantSearch(root) { return class CreateInstantSearch extends Component { static propTypes = { - algoliaClient: PropTypes.object, - searchClient: PropTypes.object, - appId: PropTypes.string, - apiKey: PropTypes.string, + searchClient: PropTypes.shape({ + search: PropTypes.func.isRequired, + searchForFacetValues: PropTypes.func, + addAlgoliaAgent: PropTypes.func, + clearCache: PropTypes.func, + }).isRequired, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, @@ -46,27 +47,7 @@ export default function createInstantSearch(defaultAlgoliaClient, root) { constructor(...args) { super(...args); - if (this.props.searchClient) { - if (this.props.appId || this.props.apiKey || this.props.algoliaClient) { - throw new Error( - 'react-instantsearch:: `searchClient` cannot be used with `appId`, `apiKey` or `algoliaClient`.' - ); - } - } - - if (this.props.algoliaClient) { - // eslint-disable-next-line no-console - console.warn( - '`algoliaClient` option was renamed `searchClient`. Please use this new option before the next major version.' - ); - } - - this.client = - this.props.searchClient || - this.props.algoliaClient || - defaultAlgoliaClient(this.props.appId, this.props.apiKey, { - _useRequestCache: true, - }); + this.client = this.props.searchClient; if (typeof this.client.addAlgoliaAgent === 'function') { this.client.addAlgoliaAgent(`react (${React.version})`); @@ -75,18 +56,7 @@ export default function createInstantSearch(defaultAlgoliaClient, root) { } componentWillReceiveProps(nextProps) { - const props = this.props; - - if (nextProps.searchClient) { - this.client = nextProps.searchClient; - } else if (nextProps.algoliaClient) { - this.client = nextProps.algoliaClient; - } else if ( - props.appId !== nextProps.appId || - props.apiKey !== nextProps.apiKey - ) { - this.client = defaultAlgoliaClient(nextProps.appId, nextProps.apiKey); - } + this.client = nextProps.searchClient; if (typeof this.client.addAlgoliaAgent === 'function') { this.client.addAlgoliaAgent(`react (${React.version})`); @@ -104,7 +74,6 @@ export default function createInstantSearch(defaultAlgoliaClient, root) { onSearchParameters={this.props.onSearchParameters} root={this.props.root} searchClient={this.client} - algoliaClient={this.client} refresh={this.props.refresh} resultsState={this.props.resultsState} > diff --git a/packages/react-instantsearch-core/src/widgets/Configure.js b/packages/react-instantsearch-core/src/widgets/Configure.js index 6991966318..ac3f90368f 100644 --- a/packages/react-instantsearch-core/src/widgets/Configure.js +++ b/packages/react-instantsearch-core/src/widgets/Configure.js @@ -16,12 +16,17 @@ import connectConfigure from '../connectors/connectConfigure'; * @kind widget * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Configure, Hits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/package.json b/packages/react-instantsearch-dom/package.json index 5b80e94408..2a9c2b028a 100644 --- a/packages/react-instantsearch-dom/package.json +++ b/packages/react-instantsearch-dom/package.json @@ -41,7 +41,6 @@ }, "dependencies": { "@babel/runtime": "^7.1.2", - "algoliasearch": "^3.27.1", "algoliasearch-helper": "^2.26.0", "classnames": "^2.2.5", "lodash": "^4.17.4", diff --git a/packages/react-instantsearch-dom/src/core/__tests__/createInstantSearchServer.js b/packages/react-instantsearch-dom/src/core/__tests__/createInstantSearchServer.js index bc268d02ce..cff415d2b2 100644 --- a/packages/react-instantsearch-dom/src/core/__tests__/createInstantSearchServer.js +++ b/packages/react-instantsearch-dom/src/core/__tests__/createInstantSearchServer.js @@ -56,28 +56,21 @@ describe('createInstantSearchServer', () => { }; describe('props', () => { - it('uses the provided factory', () => { + it('adds expected user agents', () => { const searchClient = { ...createSearchClient(), addAlgoliaAgent: jest.fn(), }; - const createSearchClientMock = jest.fn(() => searchClient); - - const { InstantSearch } = createInstantSearchServer( - createSearchClientMock - ); + const { InstantSearch } = createInstantSearchServer(); const props = { ...requiredProps, - appId: 'appId', - apiKey: 'apiKey', + searchClient, }; shallow(); - expect(createSearchClientMock).toHaveBeenCalledTimes(1); - expect(createSearchClientMock).toHaveBeenCalledWith('appId', 'apiKey'); expect(searchClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); expect(searchClient.addAlgoliaAgent).toHaveBeenCalledWith( `react (${React.version})` @@ -102,38 +95,6 @@ describe('createInstantSearchServer', () => { expect(wrapper.props().searchClient).toBe(searchClient); }); - it('uses the provided algoliaClient', () => { - const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {}); - - const { InstantSearch } = createInstantSearchServer(); - - const algoliaClient = { - ...createSearchClient(), - addAlgoliaAgent: jest.fn(), - }; - - const props = { - ...requiredProps, - algoliaClient, - }; - - const wrapper = shallow(); - - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledTimes(2); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledWith( - `react (${React.version})` - ); - expect(algoliaClient.addAlgoliaAgent).toHaveBeenCalledWith( - `react-instantsearch (${version})` - ); - expect(wrapper.props().algoliaClient).toBe(algoliaClient); - expect(warnSpy.mock.calls[0][0]).toMatchInlineSnapshot( - `"\`algoliaClient\` option was renamed \`searchClient\`. Please use this new option before the next major version."` - ); - - warnSpy.mockRestore(); - }); - it('does not throw if searchClient does not have a `addAlgoliaAgent()` method', () => { const { InstantSearch } = createInstantSearchServer(); @@ -146,73 +107,6 @@ describe('createInstantSearchServer', () => { expect(() => trigger()).not.toThrow(); }); - - it('does not throw if algoliaClient does not have a `addAlgoliaAgent()` method', () => { - const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {}); - const { InstantSearch } = createInstantSearchServer(); - - const props = { - ...requiredProps, - algoliaClient: createSearchClient(), - }; - - const trigger = () => shallow(); - - expect(() => trigger()).not.toThrow(); - expect(warnSpy.mock.calls[0][0]).toMatchInlineSnapshot( - `"\`algoliaClient\` option was renamed \`searchClient\`. Please use this new option before the next major version."` - ); - warnSpy.mockRestore(); - }); - - it('throws if algoliaClient is given with searchClient', () => { - const { InstantSearch } = createInstantSearchServer(); - - const props = { - ...requiredProps, - searchClient: createSearchClient(), - algoliaClient: createSearchClient(), - }; - - const trigger = () => - shallow(); - - expect(() => trigger()).toThrowErrorMatchingInlineSnapshot( - `"react-instantsearch:: \`searchClient\` cannot be used with \`appId\`, \`apiKey\` or \`algoliaClient\`."` - ); - }); - - it('throws if appId is given with searchClient', () => { - const { InstantSearch } = createInstantSearchServer(); - - const props = { - ...requiredProps, - appId: 'appId', - searchClient: createSearchClient(), - }; - - const trigger = () => shallow(); - - expect(() => trigger()).toThrowErrorMatchingInlineSnapshot( - `"react-instantsearch:: \`searchClient\` cannot be used with \`appId\`, \`apiKey\` or \`algoliaClient\`."` - ); - }); - - it('throws if apiKey is given with searchClient', () => { - const { InstantSearch } = createInstantSearchServer(); - - const props = { - ...requiredProps, - apiKey: 'apiKey', - searchClient: createSearchClient(), - }; - - const trigger = () => shallow(); - - expect(() => trigger()).toThrowErrorMatchingInlineSnapshot( - `"react-instantsearch:: \`searchClient\` cannot be used with \`appId\`, \`apiKey\` or \`algoliaClient\`."` - ); - }); }); describe('single index', () => { diff --git a/packages/react-instantsearch-dom/src/core/createInstantSearchServer.js b/packages/react-instantsearch-dom/src/core/createInstantSearchServer.js index bdcf45d510..e9c03d7e2c 100644 --- a/packages/react-instantsearch-dom/src/core/createInstantSearchServer.js +++ b/packages/react-instantsearch-dom/src/core/createInstantSearchServer.js @@ -92,8 +92,8 @@ const multiIndexSearch = ( ); }; -const createInstantSearchServer = algoliasearch => { - const InstantSearch = createInstantSearch(algoliasearch, { +const createInstantSearchServer = () => { + const InstantSearch = createInstantSearch({ Root: 'div', props: { className: 'ais-InstantSearch__root', @@ -131,10 +131,12 @@ const createInstantSearchServer = algoliasearch => { class CreateInstantSearchServer extends Component { static propTypes = { - algoliaClient: PropTypes.object, - searchClient: PropTypes.object, - appId: PropTypes.string, - apiKey: PropTypes.string, + searchClient: PropTypes.shape({ + search: PropTypes.func.isRequired, + searchForFacetValues: PropTypes.func, + addAlgoliaAgent: PropTypes.func, + clearCache: PropTypes.func, + }).isRequired, indexName: PropTypes.string.isRequired, resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), }; @@ -142,25 +144,7 @@ const createInstantSearchServer = algoliasearch => { constructor(...args) { super(...args); - if (this.props.searchClient) { - if (this.props.appId || this.props.apiKey || this.props.algoliaClient) { - throw new Error( - 'react-instantsearch:: `searchClient` cannot be used with `appId`, `apiKey` or `algoliaClient`.' - ); - } - } - - if (this.props.algoliaClient) { - // eslint-disable-next-line no-console - console.warn( - '`algoliaClient` option was renamed `searchClient`. Please use this new option before the next major version.' - ); - } - - client = - this.props.searchClient || - this.props.algoliaClient || - algoliasearch(this.props.appId, this.props.apiKey); + client = this.props.searchClient; if (typeof client.addAlgoliaAgent === 'function') { client.addAlgoliaAgent(`react (${React.version})`); diff --git a/packages/react-instantsearch-dom/src/server.js b/packages/react-instantsearch-dom/src/server.js index 61064b462a..6a7ba35f41 100644 --- a/packages/react-instantsearch-dom/src/server.js +++ b/packages/react-instantsearch-dom/src/server.js @@ -1,5 +1,3 @@ -import algoliasearch from 'algoliasearch/lite'; import createInstantSearchServer from './core/createInstantSearchServer'; -export const createInstantSearch = () => - createInstantSearchServer(algoliasearch); +export const createInstantSearch = createInstantSearchServer; diff --git a/packages/react-instantsearch-dom/src/widgets/Breadcrumb.js b/packages/react-instantsearch-dom/src/widgets/Breadcrumb.js index ff2c2a6380..11fed1a9f7 100644 --- a/packages/react-instantsearch-dom/src/widgets/Breadcrumb.js +++ b/packages/react-instantsearch-dom/src/widgets/Breadcrumb.js @@ -59,12 +59,17 @@ import Breadcrumb from '../components/Breadcrumb'; * @translationKey rootLabel - The root's label. Accepts a string * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { Breadcrumb, InstantSearch, HierarchicalMenu } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/CurrentRefinements.js b/packages/react-instantsearch-dom/src/widgets/CurrentRefinements.js index c45df9a53c..1b7bed25dd 100644 --- a/packages/react-instantsearch-dom/src/widgets/CurrentRefinements.js +++ b/packages/react-instantsearch-dom/src/widgets/CurrentRefinements.js @@ -23,12 +23,17 @@ import CurrentRefinements from '../components/CurrentRefinements'; * @translationKey clearFilter - the remove filter button label * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, CurrentRefinements, RefinementList } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/HierarchicalMenu.js b/packages/react-instantsearch-dom/src/widgets/HierarchicalMenu.js index 2d0a369179..2574c9c8b4 100644 --- a/packages/react-instantsearch-dom/src/widgets/HierarchicalMenu.js +++ b/packages/react-instantsearch-dom/src/widgets/HierarchicalMenu.js @@ -69,12 +69,17 @@ import HierarchicalMenu from '../components/HierarchicalMenu'; * @translationKey showMore - The label of the show more button. Accepts one parameter, a boolean that is true if the values are expanded * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, HierarchicalMenu } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ( @@ -25,10 +26,14 @@ import Highlight from '../components/Highlight'; *
* ); * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/Hits.js b/packages/react-instantsearch-dom/src/widgets/Hits.js index 1b968953da..4f5a0f3a33 100644 --- a/packages/react-instantsearch-dom/src/widgets/Hits.js +++ b/packages/react-instantsearch-dom/src/widgets/Hits.js @@ -17,12 +17,16 @@ import Hits from '../components/Hits'; * @themeKey ais-Hits-item - the hit list item * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Hits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js b/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js index 43a7e344c3..2eece79f93 100644 --- a/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js +++ b/packages/react-instantsearch-dom/src/widgets/HitsPerPage.js @@ -18,12 +18,17 @@ import HitsPerPage from '../components/HitsPerPage'; * @themeKey ais-HitsPerPage-option - the select option * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, HitsPerPage, Hits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/InstantSearch.js b/packages/react-instantsearch-dom/src/widgets/InstantSearch.js index e9d85d6ef8..75a9c0aac0 100644 --- a/packages/react-instantsearch-dom/src/widgets/InstantSearch.js +++ b/packages/react-instantsearch-dom/src/widgets/InstantSearch.js @@ -1,7 +1,6 @@ -import algoliasearch from 'algoliasearch/lite'; import { createInstantSearch } from 'react-instantsearch-core'; -const InstantSearch = createInstantSearch(algoliasearch, { +const InstantSearch = createInstantSearch({ Root: 'div', props: { className: 'ais-InstantSearch__root', diff --git a/packages/react-instantsearch-dom/src/widgets/Menu.js b/packages/react-instantsearch-dom/src/widgets/Menu.js index c1240e137b..3e162eccf2 100644 --- a/packages/react-instantsearch-dom/src/widgets/Menu.js +++ b/packages/react-instantsearch-dom/src/widgets/Menu.js @@ -34,12 +34,17 @@ import Menu from '../components/Menu'; * @translationkey noResults - The label of the no results text when no search for facet values results are found. * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Menu } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/MenuSelect.js b/packages/react-instantsearch-dom/src/widgets/MenuSelect.js index a902d90055..1e45cc7ad5 100644 --- a/packages/react-instantsearch-dom/src/widgets/MenuSelect.js +++ b/packages/react-instantsearch-dom/src/widgets/MenuSelect.js @@ -20,12 +20,18 @@ import MenuSelect from '../components/MenuSelect'; * @translationkey seeAllOption - The label of the option to select to remove the refinement * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, MenuSelect } from 'react-instantsearch-dom'; + + * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/NumericMenu.js b/packages/react-instantsearch-dom/src/widgets/NumericMenu.js index c5b9c9f5ae..227e59e4f4 100644 --- a/packages/react-instantsearch-dom/src/widgets/NumericMenu.js +++ b/packages/react-instantsearch-dom/src/widgets/NumericMenu.js @@ -23,12 +23,17 @@ import NumericMenu from '../components/NumericMenu'; * @translationkey all - The label of the largest range added automatically by react instantsearch * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, NumericMenu } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/Panel.js b/packages/react-instantsearch-dom/src/widgets/Panel.js index 49692d16bb..0c46ac7ab9 100644 --- a/packages/react-instantsearch-dom/src/widgets/Panel.js +++ b/packages/react-instantsearch-dom/src/widgets/Panel.js @@ -17,12 +17,17 @@ import Panel from '../components/Panel'; * @themeKey ais-Panel-footer - the footer of the Panel (optional) * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, Panel, RefinementList } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/PoweredBy.js b/packages/react-instantsearch-dom/src/widgets/PoweredBy.js index e92dd87349..0f1e7ad7c2 100644 --- a/packages/react-instantsearch-dom/src/widgets/PoweredBy.js +++ b/packages/react-instantsearch-dom/src/widgets/PoweredBy.js @@ -15,11 +15,16 @@ import PoweredBy from '../components/PoweredBy'; * @example * import React from 'react'; * import { InstantSearch, PoweredBy } from 'react-instantsearch-dom'; + * import algoliasearch from 'algoliasearch/lite'; + * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/RangeInput.js b/packages/react-instantsearch-dom/src/widgets/RangeInput.js index 62df5a6b77..cb16db2a80 100644 --- a/packages/react-instantsearch-dom/src/widgets/RangeInput.js +++ b/packages/react-instantsearch-dom/src/widgets/RangeInput.js @@ -27,12 +27,17 @@ import RangeInput from '../components/RangeInput'; * @translationKey separator - Label value for the input separator * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, RangeInput } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/RatingMenu.js b/packages/react-instantsearch-dom/src/widgets/RatingMenu.js index a5e58657ca..8114dcd9ae 100644 --- a/packages/react-instantsearch-dom/src/widgets/RatingMenu.js +++ b/packages/react-instantsearch-dom/src/widgets/RatingMenu.js @@ -33,12 +33,17 @@ import RatingMenu from '../components/RatingMenu'; * @translationKey ratingLabel - Label value for the rating link * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, RatingMenu } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/RefinementList.js b/packages/react-instantsearch-dom/src/widgets/RefinementList.js index ef72c8698b..bbbd54cad3 100644 --- a/packages/react-instantsearch-dom/src/widgets/RefinementList.js +++ b/packages/react-instantsearch-dom/src/widgets/RefinementList.js @@ -37,12 +37,17 @@ import RefinementList from '../components/RefinementList'; * the [dashboard](https://www.algolia.com/explorer/display/) or using the [API](https://www.algolia.com/doc/guides/searching/faceting/#search-for-facet-values). * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, RefinementList } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/ScrollTo.js b/packages/react-instantsearch-dom/src/widgets/ScrollTo.js index d255678c2b..05d1bf86c7 100644 --- a/packages/react-instantsearch-dom/src/widgets/ScrollTo.js +++ b/packages/react-instantsearch-dom/src/widgets/ScrollTo.js @@ -12,12 +12,17 @@ import ScrollTo from '../components/ScrollTo'; * @themeKey ais-ScrollTo - the root div of the widget * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, ScrollTo, Hits } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/SearchBox.js b/packages/react-instantsearch-dom/src/widgets/SearchBox.js index dc20e36e1f..1897cd304a 100644 --- a/packages/react-instantsearch-dom/src/widgets/SearchBox.js +++ b/packages/react-instantsearch-dom/src/widgets/SearchBox.js @@ -30,12 +30,17 @@ import SearchBox from '../components/SearchBox'; * @translationkey placeholder - The label of the input placeholder * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SearchBox } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/Snippet.js b/packages/react-instantsearch-dom/src/widgets/Snippet.js index a7dba9cbae..8de800d833 100644 --- a/packages/react-instantsearch-dom/src/widgets/Snippet.js +++ b/packages/react-instantsearch-dom/src/widgets/Snippet.js @@ -20,8 +20,14 @@ import Snippet from '../components/Snippet'; * @themeKey ais-Snippet-nonHighlighted - the normal text * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SearchBox, Hits, Snippet } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const Hit = ({ hit }) => ( *
* @@ -30,8 +36,7 @@ import Snippet from '../components/Snippet'; * * const App = () => ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/SortBy.js b/packages/react-instantsearch-dom/src/widgets/SortBy.js index e44abeff27..9f772519cb 100644 --- a/packages/react-instantsearch-dom/src/widgets/SortBy.js +++ b/packages/react-instantsearch-dom/src/widgets/SortBy.js @@ -15,12 +15,17 @@ import SortBy from '../components/SortBy'; * @themeKey ais-SortBy-option - the select option * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, SortBy } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ( * * diff --git a/packages/react-instantsearch-dom/src/widgets/ToggleRefinement.js b/packages/react-instantsearch-dom/src/widgets/ToggleRefinement.js index 9f352edd82..d83302e4d0 100644 --- a/packages/react-instantsearch-dom/src/widgets/ToggleRefinement.js +++ b/packages/react-instantsearch-dom/src/widgets/ToggleRefinement.js @@ -22,12 +22,17 @@ import ToggleRefinement from '../components/ToggleRefinement'; * @themeKey ais-ToggleRefinement-labelText - the label text of each toggle item * @example * import React from 'react'; + * import algoliasearch from 'algoliasearch/lite'; * import { InstantSearch, ToggleRefinement } from 'react-instantsearch-dom'; * + * const searchClient = algoliasearch( + * 'latency', + * '6be0576ff61c053d5f9a3225e2a90f76' + * ); + * * const App = () => ( * * ', module); +const searchClient = algoliasearch( + 'latency', + '6be0576ff61c053d5f9a3225e2a90f76' +); + stories .add('default', () => ( - + )) .add('with custom root', () => ( )) - .add('with algolia search client', () => ( - - - - - )) .add('with custom search client', () => ( ', module); stories .add('MultiHits', () => ( - + @@ -68,11 +70,7 @@ stories )) .add('AutoComplete', () => ( - + @@ -82,11 +80,7 @@ stories )) .add('with SortBy nested in same Index as Root', () => ( - +
@@ -123,11 +117,7 @@ stories )) .add('with conditional rendering', () => ( - +
@@ -167,11 +157,7 @@ stories )) .add('with Hits & Configure', () => ( - + @@ -185,11 +171,7 @@ stories )) .add('with custom root', () => ( - + diff --git a/stories/util.js b/stories/util.js index 217962ecdf..b46e18a4a5 100644 --- a/stories/util.js +++ b/stories/util.js @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import PropTypes from 'prop-types'; import { linkTo } from '@storybook/addon-links'; +import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, ClearRefinements, @@ -47,25 +48,6 @@ Hits.propTypes = { export const CustomHits = connectHits(Hits); -export const Wrap = ({ appId, apiKey, indexName, children }) => ( - - {children} - -); - -Wrap.propTypes = { - children: PropTypes.node.isRequired, - appId: PropTypes.string, - apiKey: PropTypes.string, - indexName: PropTypes.string, -}; - -Wrap.defaultProps = { - appId: 'latency', - apiKey: '6be0576ff61c053d5f9a3225e2a90f76', - indexName: 'instant_search', -}; - export const WrapWithHits = ({ searchParameters: askedSearchParameters = {}, children, @@ -80,6 +62,10 @@ export const WrapWithHits = ({ initialSearchState, onSearchStateChange, }) => { + const searchClient = useMemo(() => { + return algoliasearch(appId, apiKey); + }, [appId, apiKey]); + const sourceCodeUrl = `https://github.com/algolia/react-instantsearch/tree/master/stories/${linkedStoryGroup}.stories.js`; const playgroundLink = hasPlayground ? (