now search uses includes and num contacts updated properly

This commit is contained in:
Taehee Choi 2022-03-24 22:04:00 -07:00
parent e18562c0c9
commit cdac8e9ef4

View File

@ -27,8 +27,15 @@ const Sidebar: React.FC = () => {
const favorites = useAppSelector((state) => const favorites = useAppSelector((state) =>
selectUsers(state, favoritesUuids) selectUsers(state, favoritesUuids)
); );
let filteredFavorites = favorites.filter((favorite) =>
favorite.name.toLowerCase().includes(inputText.toLowerCase())
);
const teamUuids = useAppSelector(selectTeam); const teamUuids = useAppSelector(selectTeam);
const team = useAppSelector((state) => selectUsers(state, teamUuids)); const team = useAppSelector((state) => selectUsers(state, teamUuids));
let filteredTeam = team.filter((member) =>
member.name.toLowerCase().includes(inputText.toLowerCase())
);
return ( return (
<Drawer <Drawer
@ -55,42 +62,36 @@ const Sidebar: React.FC = () => {
}} }}
/> />
</ListItem> </ListItem>
<Divider /> <Divider />
<ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}> <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
{favoritesOpen ? <ExpandLess /> : <ExpandMore />} {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
<ListItemText primary="Favorites" sx={{ textAlign: "center" }} /> <ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
<ListItemText <ListItemText
primary={favorites.length} primary={filteredFavorites.length}
sx={{ textAlign: "right" }} sx={{ textAlign: "right" }}
/> />
</ListItemButton> </ListItemButton>
<Collapse in={favoritesOpen} timeout="auto" unmountOnExit> <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
<List disablePadding> <List disablePadding>
{ {filteredFavorites.map((favorite, i) => (
favorites.filter(favorite => ( <ContactItem contactInfo={favorite} key={i} />
favorite.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length) ))}
)).map((favorite, i) => (
<ContactItem contactInfo={favorite} key={i} />
))
}
</List> </List>
</Collapse> </Collapse>
<ListItemButton onClick={() => setTeamOpen(!teamOpen)}> <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
{teamOpen ? <ExpandLess /> : <ExpandMore />} {teamOpen ? <ExpandLess /> : <ExpandMore />}
<ListItemText primary="Team" sx={{ textAlign: "center" }} /> <ListItemText primary="Team" sx={{ textAlign: "center" }} />
<ListItemText primary={team.length} sx={{ textAlign: "right" }} /> <ListItemText
primary={filteredTeam.length}
sx={{ textAlign: "right" }}
/>
</ListItemButton> </ListItemButton>
<Collapse in={teamOpen} timeout="auto" unmountOnExit> <Collapse in={teamOpen} timeout="auto" unmountOnExit>
<List disablePadding> <List disablePadding>
{ {filteredTeam.map((member, i) => (
team.filter(member => ( <ContactItem contactInfo={member} key={i} />
member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length) ))}
)).map((member, i) => (
<ContactItem contactInfo={member} key={i} />
))
}
</List> </List>
</Collapse> </Collapse>
</List> </List>