const [saleResults, setSaleResults] = useState<any[]>([]);
const [lotResults, setLotResults] = useState<any[]>([]);
const { indexUiState } = useInstantSearch();
const selectedCategories =
indexUiState.hierarchicalMenu?.['ObjectCategoryHierarchy.lvl0'];
const parentCategory = selectedCategories && selectedCategories[0];
const category = selectedCategories && selectedCategories[1];
const memoizedQueries = useMemo(() => {
const queries = [
{
indexName: algoliaIndexName,
hitsPerPage: 100,
filters: `ObjectType:LOT AND ParentCategory:"${parentCategory}"`,
distinct: true,
},
{
indexName: algoliaIndexName,
hitsPerPage: 20,
filters: `ObjectType:SALE AND ParentCategory:"${parentCategory}"`,
distinct: true,
},
];
return queries;
}, [parentCategory]);
useEffect(() => {
const fetchData = async () => {
const { results } = await searchClient.search(memoizedQueries);
console.log(results);
const lotResults = results[0].hits;
const saleResults = results[1].hits;
setSaleResults(saleResults);
setLotResults(lotResults);
};
fetchData();
}, [memoizedQueries]);
return (
<>
<Container>
{saleResults.map((sale: AlgoliaData) => {
const filteredLotResults = lotResults.filter(
(lot: any) => lot.SALE_ID === sale.SALE_ID
);
const limitedLotResults = filteredLotResults.slice(0, 4);
return (
<SalesContainer
key={sale.SALE_ID}
title={sale.ObjectTitle}
lots={sale.NO_OF_LOTS}
location={''}
timeLeft={sale.SALE_DEFAULT_END_TIME}
>
<>
{limitedLotResults.map((hit: AlgoliaCardData) => (
<div key={hit.LOT_ID}>{renderCardByType(hit, 'Desktop')}</div>
))}
</>
</SalesContainer>
);
})}
</Container>
</>
);
Hey everyone just having trouble with this. Ive attempted to hit the same index twice, to retrieve results based of whether a result has ObjectType:LOT or ObjectType:SALE.
Then mapping over each individual result ensure that the SALE_IDs match and grouping them together. Results are showing up but having an issue where the page isnt responding to the other widgets on the page eg. HierarchicalMenu, Range Input etc.
A user travels to this page by clicking a button which will navigate them from an Items page to an auction page, widget is used deconstructing configure props to apply filters to a the page through indexUiState.configure, applying a filter of ObjectType:Sale where they navigate where the component is used.
Is my implementation correct?