I am new to reactive search and new to reactjs. I am trying to do a search along with filters on elastic search using reactive search.
I have search bar along with filters such as Type , Topics , Tags and two more. I want to have the count of the filters change dynamically based on search given in search bar.
Example : If I search for **finance **in the search bar then the Type , Topics and Tags should show only finance and its respective count. But currently when I give search for finance , nothing is happening in the filters.
I tried adding react prop of the Data Search component ID in the Category Search. But nothing is happening. Also tried adding multiple multilists for each sensor such as kindsensor , tagsensor and added react SearchSensor prop in it. But that also doesn't work. In addition to it tried .keyword, .raw in the data field of multilists. But that also doesn't work.
Can anyone please help me on what I am missing in order to get the dynamic values and its respective counts of each filter based on the search given in the search bar.
Below is the code I am using.
function CatalogFilter(props) {
const { item, classes, renderNoResults, setFilter } = props;
const anchorRef = useRef(null);
const [openMenu, setOpenMenu] = useState(false);
return (
<>
<Button
color="inherit"
endIcon={<ChevronDown fontSize="small" />}
onClick={() => setOpenMenu(!openMenu)}
ref={anchorRef}
sx={{
ml: 2,
mt: 2,
mb: 2
}}
>
{item.title}
</Button>
<Popover
anchorEl={anchorRef.current}
anchorOrigin={{
horizontal: 'center',
vertical: 'bottom'
}}
getContentAnchorEl={null}
keepMounted
onClose={() => setOpenMenu(false)}
open={openMenu}
>
<Box sx={{ p: 3 }}>
<Typography color="textSecondary" variant="subtitle2">
<MultiList
innerClass={{ input: classes.mainSearch }}
showCheckbox
showLoadMore={false}
loader={<CircularProgress size={15} />}
showMissing={false}
showFilter
renderNoResults={renderNoResults}
filterLabel={item.filterLabel}
componentId={item.componentId}
dataField={item.dataField}
onValueChange={() => setFilter(false)}
react={{and: ['SearchSensor] }}
/>
</Typography>
</Box>
</Popover>
</>
);
}
CatalogFilter.propTypes = {
item: PropTypes.any,
classes: PropTypes.any,
setFilter: PropTypes.func,
renderNoResults: PropTypes.func
};
const Catalog = () => {
const token = useToken();
const { settings } = useSettings();
const theme = useTheme();
const classes = useStyles();
const anchorRef = useRef(null);
const [openMenu, setOpenMenu] = useState(false);
const [filterItems] = useState([
{
title: 'Type',
dataField: 'resourceKind',
componentId: 'KindSensor',
filterLabel: 'Type'
},
{
title: 'Tags',
dataField: 'tags',
componentId: 'TagSensor',
filterLabel: 'Tags'
},
{
title: 'Topics',
dataField: 'topics',
componentId: 'TopicSensor',
filterLabel: 'Topics'
},
{
title: 'Region',
dataField: 'region',
componentId: 'RegionSensor',
filterLabel: 'Region'
},
{
title: 'Classification',
dataField: 'classification',
componentId: 'ClassificationSensor',
filterLabel: 'Classification'
}
]);
const [selectedFiltersCleared, setSelectedFiltersCleared] = useState(true);
const transformRequest = (request) => {
const transformedRequest = { ...request };
transformedRequest.url = process.env.REACT_APP_SEARCH_API;
return {
...request,
url: transformedRequest.url,
credentials: { token },
headers: {
AccessControlAllowOrigin: '*',
AccessControlAllowHeaders: '*',
'access-control-allow-origin': '*',
Authorization: token,
AccessKeyId: 'None',
SecretKey: 'None'
}
};
};
if (!token) {
return <CircularProgress />;
}
return (
<>
<Helmet>
<title>Catalog | data.all</title>
</Helmet>
app="dataall-index"
enableAppbase={false}
url={process.env.REACT_APP_SEARCH_API}
transformRequest={transformRequest}
>
<Box sx={{ mt: 3 }}>
<Paper>
<Box
sx={{
py: 3,
mr: 3,
ml: 3
}}
>
<DataSearch
innerClass={{ input: classes.mainSearch, list: listClass }}
autoSuggest
showIcon
fuzziness="AUTO"
componentId="SearchSensor"
filterLabel="text"
dataField={[
'label',
'name',
'description',
'region',
'topics',
'tags'
]}
placeholder="Search"
/>
</Box>
<Divider />
<Box
sx={{
mt: 1,
mb: 1
}}
>
{selectedFiltersCleared ? (
<Box sx={{ p: 1 }}>
<Typography color="textSecondary" variant="subtitle2">
No filters applied
</Typography>
</Box>
) : (
<SelectedFilters />
)}
</Box>
<Divider />
<Box
sx={{
mr: 2
}}
>
<Grid container>
{filterItems.map((item) => (
<Grid item>
<CatalogFilter
onClick={() => setOpenMenu(!openMenu)}
ref={anchorRef}
item={item}
open={openMenu}
classes={classes}
setFilter={setSelectedFiltersCleared}
renderNoResults={() => <p>No filters found</p>}
react={{and: ['SearchSensor] }}
/>
</Grid>
))}
</Grid>
</Box>
</Paper>
</Box>
<Grid container spacing={3} sx={{ mt: 1 }}>
<Grid item key="node1" md={12} xs={12}>
<ReactiveList
react={{
and: [
'RegionSensor',
'SearchSensor',
'GlossaryPathSensor',
'TagSensor',
'TopicSensor',
'KindSensor',
'ClassificationSensor'
]
}}
dataField="model"
loader={<CircularProgress />}
size={8}
pagination
componentId="SearchResult"
render={({ data }) => (
<Box>
<Grid container spacing={3}>
{data.map((hit) => (
<Grid item key={hit._id} md={3} xs={12}>
<Hit hit={hit} />
</Grid>
))}
</Grid>
</Box>
)}
/>
</Grid>
</Grid>
</ReactiveBase>
</Container>
</Box>
</>
);
};
export default Catalog;`
