diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index 2795687..47cf766 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -3,8 +3,10 @@ import { Divider, Drawer, List, + ListItem, ListItemButton, ListItemText, + TextField, Toolbar, } from "@mui/material"; import React from "react"; @@ -19,13 +21,21 @@ const sidebarWidth = 240; const Sidebar: React.FC = () => { const [favoritesOpen, setFavoritesOpen] = React.useState(true); const [teamOpen, setTeamOpen] = React.useState(false); + const [inputText, setInputText] = React.useState(""); const favoritesUuids = useAppSelector(selectFavorites); const favorites = useAppSelector((state) => selectUsers(state, favoritesUuids) ); + let filteredFavorites = favorites.filter((favorite) => + favorite.name.toLowerCase().includes(inputText.toLowerCase()) + ); + const teamUuids = useAppSelector(selectTeam); const team = useAppSelector((state) => selectUsers(state, teamUuids)); + let filteredTeam = team.filter((member) => + member.name.toLowerCase().includes(inputText.toLowerCase()) + ); return ( { primaryTypographyProps={{ variant: "h6" }} sx={{ textAlign: "center" }} /> + + { + setInputText(e.target.value); + }} + /> + + setFavoritesOpen(!favoritesOpen)}> {favoritesOpen ? : } - {favorites.map((favorite, i) => ( + {filteredFavorites.map((favorite, i) => ( ))} @@ -61,11 +82,14 @@ const Sidebar: React.FC = () => { setTeamOpen(!teamOpen)}> {teamOpen ? : } - + - {team.map((member, i) => ( + {filteredTeam.map((member, i) => ( ))}