Search index selection

Is there any way to pass a specific a search index to SearchProvider? I've been trying by passing down props but I always get a props undefined when onAutocomplete or onSearch are called.

// App.js

const App= () => {
  return (
    <>
      <Dropdown/> // selects specific index from a dropdown
      <SearchIndex searchIndex="foo" />
    </>
  )
}
// SearchIndex.js
class SearchIndex extends Component {
  constructor(props) {
    super(props);
    this.state = { searchIndex: props.searchIndex };
  }

  onResultClick() { }

  onAutocompleteResultClick() { }

  async onAutocomplete(searchTerm) {
    const requestBody = buildRequest({ searchTerm });
    const json = await runRequest(this.state.searchIndex, requestBody);
    const state = buildState(json);

    return { autocompletedResults: state.results };
  }

  async onSearch(state) {
    const { resultsPerPage } = state;
    const requestBody = buildRequest(state);
    const responseJson = await runRequest(this.state.searchIndex, requestBody);
    const responseJsonWithDisjunctiveFacetCounts = await applyDisjunctiveFaceting(responseJson,
      state,
      ["companies", "date_uploaded"],
      this.state.searchIndex);

    return buildState(responseJsonWithDisjunctiveFacetCounts, resultsPerPage);
  }

  render() {
    return (
      <SearchProvider config={{
        debug: false,
        hasA11yNotifications: false,
        onResultClick: this.onResultClick,
        onAutocompleteResultClick: this.onAutocompleteResultClick,
        onAutocomplete: this.onAutocomplete,
        onSearch: this.onSearch
      }}>
        <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
          {({ wasSearched }) => (
            <div className="App">
              <ErrorBoundary>
                <Layout
                  header={
                    <SearchBox
                      autocompleteMinimumCharacters={3}
                      autocompleteResults={{
                        linkTarget: "_blank",
                        sectionTitle: "Results",
                        titleField: "title",
                        urlField: "link",
                        shouldTrackClickThrough: true,
                        clickThroughTags: ["test"]
                      }}
                      autocompleteSuggestions={true}
                    />
                  }
                  sideContent={
                    <div>
                      {wasSearched && (
                        <Sorting
                          label={"Sort By"}
                          sortOptions={[
                            {
                              name: "Title",
                              value: "title",
                              direction: "asc"
                            }
                          ]}
                        />
                      )}
                      <Facet
                        field="search_index"
                        label="Search Index"
                        filterType="any"
                        isFilterable={true}
                      />
                      <Facet
                        field="date_uploaded"
                        label="Date Uploaded"
                        filterType="any"
                        isFilterable={true}
                      />
                    </div>
                  }
                  bodyContent={
                    <Results
                      titleField="title"
                      urlField="link"
                      shouldTrackClickThrough={true}
                      resultView={Result}
                    />
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          )}
        </WithSearch>
      </SearchProvider>
    )
  }
}

export default SearchIndex;

This is really really cool. And it looks to me like it should work. Are you still unable to get this working?

If not, can you elaborate on what you mean by you get prop undefined?

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.