Skip to content

Commit

Permalink
feat: introduce initialUiState option (#4074)
Browse files Browse the repository at this point in the history
**Summary**

This PR introduces the `initialUiState` option at the `InstantSearch` level. The option allows users to provide an `uiState` used for the initial request. Only for the **initial request**. I've chosen to name the option `initialXXX` rather than `uiState` to have a clear intent. At some point, we might want to introduce the concept of controlled state (like React InstantSearch) that could use the option `uiState`.

At the moment the type definitions are incorrect. We have only one type that defines the `uiState` but we have to define two different types. The first is one is the "global" `uiState` and the second one is the "local" to each index. The "global" `uiState` is built on multiple "local" `uiState`. We'll update the definition in a separate PR.


**Usage**

```js
const search = instantsearch({
  // ...
  initialUiState: {
    instant_search: {
      query: "Apple"
    },
    instant_search_price_asc: {
      refinementList: {
        brand: ["Apple"]
      }
    }
  }
});
```

Checkout the example on [Storybook](https://deploy-preview-4074--instantsearchjs.netlify.com/stories/?path=/story/instantsearch--with-initialuistate).
  • Loading branch information
samouss authored and Haroenv committed Oct 23, 2019
1 parent 227a2cb commit de00707
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 66 deletions.
14 changes: 13 additions & 1 deletion src/lib/InstantSearch.ts
Expand Up @@ -103,6 +103,14 @@ export type InstantSearchOptions<TRouteState = UiState> = {
*/
searchParameters?: PlainSearchParameters;

/**
* Injects a `uiState` to the `instantsearch` instance. You can use this option
* to provide an initial state to a widget. Note that the state is only used
* for the first search. To unconditionally pass additional parameters to the
* Algolia API, take a look at the `configure` widget.
*/
initialUiState?: UiState;

/**
* Time before a search is considered stalled. The default is 200ms
*/
Expand Down Expand Up @@ -139,6 +147,7 @@ class InstantSearch extends EventEmitter {
public _searchStalledTimer: any;
public _isSearchStalled: boolean;
public _searchParameters: PlainSearchParameters;
public _initialUiState: UiState;
public _searchFunction?: InstantSearchOptions['searchFunction'];
public _createURL?: (params: SearchParameters) => string;
public _createAbsoluteURL?: (params: SearchParameters) => string;
Expand All @@ -151,7 +160,8 @@ class InstantSearch extends EventEmitter {
const {
indexName = null,
numberLocale,
searchParameters,
searchParameters = {},
initialUiState = {},
routing = null,
searchFunction,
stalledSearchDelay = 200,
Expand Down Expand Up @@ -234,6 +244,7 @@ See ${createDocumentationLink({
this._stalledSearchDelay = stalledSearchDelay;
this._searchStalledTimer = null;
this._isSearchStalled = false;
this._initialUiState = initialUiState;
this._searchParameters = {
...searchParameters,
index: indexName,
Expand Down Expand Up @@ -411,6 +422,7 @@ See ${createDocumentationLink({
this.mainIndex.init({
instantSearchInstance: this,
parent: null,
uiState: this._initialUiState,
});

mainHelper.search();
Expand Down

0 comments on commit de00707

Please sign in to comment.