Configure Bugs in React-Instantsearch

[zackify]

Bug: What is the current behavior?

Configure throws errors on page changes when it has no props.

Also, when you change the props passed to Configure, it does not call onSearchStateChanged, so the url isn't updated until changing the query or something else happens.

What project are you opening an issue for?

• react-instantsearch

What is the version you are using? Always use the latest one before opening a bug issue.

v3.0.0

[mthuret]

Hi @zackify,

I'll fix the cleanUp bug asap. For my understanding does that mean that in your use case, at some point, you have something like this: <Configure />?

Also you're right, changing the props of Configure by modifying the searchState will not trigger onSearchStateChange. But it should trigger an update with the correct parameter? If that's not the case, can you detail your use case?

Also can you confirm that if you change for example the aroundLatLng parameter directly in the URL and reload the page it's correctly taken into account?

Thanks :)

[zackify]

I have a location field that will set a bounding box or lat / long. When you clear it out, it removes the props on configure. So yes, at some points configure is rendered without anything.

When I am setting a prop on configure, it is not calling onSearchStateChanged until I change the query field, that triggers onSearchStateChanged, and puts the configure params in the url. Hope that helps!

Also can you confirm that if you change for example the aroundLatLng parameter directly in the URL and reload the page it's correctly taken into account?

They are not taken into account. This is probably my fault as the props are not passed to configure on reloading the page

[mthuret]

Are you using the props searchState on the <InstantSearch/> root component?

Here's a little example with pseudo code:

constructor() {
    super();
    this.state = {searchState: //parse the url here};
  }

  onSearchStateChange = searchState => {
    //change the configure values inside search state
    //update the URL
    this.setState({searchState});
  };

  render() {
    return <InstantSearch
      appId=""
      apiKey=""
      indexName=""
      searchState={this.state.searchState}
      createURL={this.createURL.bind(this)}
      onSearchStateChange={this.onSearchStateChange.bind(this)}
    >
      <Configure aroundLatLng="5, 2.3522" />
    </InstantSearch>;
  }

By doing that, you will first modify the search state according to your needs, then update the url with the new values and then do a setState on the searchState to trigger a new rendering of the page. Can this works for you?

[zackify]

I thought the whole point of configure is that you change the props on it and your app updates with whatever props you pass to it. That's how it worked in 2.2.5. It just didn't trigger onSesrchStateChanged. In v3 it errors when you have it rendered with no props and doesn't trigger a search state changed. Just confused as to why any time the props change it wouldn't just call that function. Everything would work perfect. Your example is doing exactly what my app is. Except I change the props on configure if they add a location. And as I said, the app reflects that, just no URL change. Hope that helps.

…

On Tue, Feb 7, 2017 at 04:22 Marie-Laure Thuret ***@***.***> wrote: Are you using the props searchState on the <InstantSearch/> root component? Here's a little example with pseudo code: constructor() { super(); this.state = {searchState: //parse the url here}; } onSearchStateChange = searchState => { //change the configure values inside search state //update the URL this.setState({searchState}); }; render() { return <InstantSearch appId="" apiKey="" indexName="" searchState={this.state.searchState} createURL={this.createURL.bind(this)} onSearchStateChange={this.onSearchStateChange.bind(this)} > <Configure aroundLatLng="5, 2.3522" /> </InstantSearch>; } By doing that, you will first modify the search state according to your needs, then update the url with the new values and then do a setState on the searchState to trigger a new rendering of the page. Can this works for you? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1950 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAbacFcJA1qn1uTTmkol6naIAMEfUr9Sks5raDe-gaJpZM4L4ibb> .

[mthuret]

You're right there's been some miscomprehension.
I did develop something for the controlled mode of react-instantsearch. It's the mode I described earlier.
It appears that for the uncontrolled mode, the one you are using, the onSearchStateChange is still not triggered. We're going to fix it.

[zackify]

Thanks!!

…

On Tue, Feb 7, 2017 at 10:45 Vincent Voyer ***@***.***> wrote: Closed #1950 <#1950> via 7e151db <7e151db> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1950 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAbacFsVSXsHqE5ffcEaeYwwbd29kECdks5raJGzgaJpZM4L4ibb> .

[zackify]

Can you let me know when a release is out? You guys are the best