ReactiveSearch query and results behavior

Question

I'm trying to get my search app to work with ReactiveSearch and having some trouble (probably lack of understanding on my part... still learning).

Basically on my homepage ('/') , all I have is a DataSearch component that is used for providing autocomplete (much like google.com). When a suggestion is selected, it redirects (using RR4) to the /results route, which is a ReactiveList component. There is also a copy of the same DataSearch component in my global Header (Navbar.js) is conditionally rendered based on the route - displays on every route except for ('/') .

Couple of things are going on:

1. When I make a query selection from the dropdown the home route '/' , and then redirected to the '/results route, the DataSearch text input is not blank - the previously selected query is there, it doesn't provide any NEW suggestions and the results shown are NOT based upon the selected query.

2. No actual search results based on the selected query are displayed from the ResultList component on the /results page - whether from '/' or '/results (suggestions are shown - not actual search results after query selection).

3. If I go to /results (from clicking on link in Navbar), the page automatically displays the ES index - even though no query is performed?

Not sure what is going on...

I took the relevant code (routes and components) from my app and made a codesandbox to demonstrate the behavior I'm describing.

Answer 1

Many thanks to @sidi for helping with this over at this codesandbox .

In my DataSearch component on my home route, it was all about my onValueSelected function, just had to add a bit of code:

<DataSearch
  ...
  onValueSelected={(value, cause, source) => {
  if (cause !== "SUGGESTION_SELECT") {
  // use this query
  console.log(
  "use this query - onValueSelected: ",
  this.query
  );
  this.setState({ redirect: true, value: value }); // value: value
  this.props.history.push(`/?q=${value}`); // added entire line
  } else {
  this.valueSelected = true;
  this.setState({ value }); // added enter line
  }
}}

In the first setState, value: value was added and also the this.history.push( /?q=${value} ); too. Finally I was also missing the second this.setState({ value }); in else clause.

In the if statement on both the '/' and '/results/ routes:

if (redirect) {
      return (
        <Redirect
          to={{
            pathname: "/results",
            search: `?q=${value}`
          }}
        />
      );
    }

I was missing the <Redirect> in the return () .

Sometimes, you just need another set of eyes on the code when you've worked on it for a few days.

HTH anyone else with ReactiveSearch! Great UI library for Elasticsearch.