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;