diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index e5255c0..811b282 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -15,15 +15,13 @@ import ContactItem from "./sidebar-components/ContactItem"; import { useAppSelector } from "../../../redux/hooks"; import { selectUsers, selectTeam } from "../../../redux/slices/usersSlice"; import { selectFavorites } from "../../../redux/slices/favoritesSlice"; -import UserLite from "../../../api-bodies/UserLite"; const sidebarWidth = 240; const Sidebar: React.FC = () => { const [favoritesOpen, setFavoritesOpen] = React.useState(true); const [teamOpen, setTeamOpen] = React.useState(false); - const [filteredFavorites, setFilteredFavorites] = React.useState([]); - const [filteredTeam, setFilteredTeam] = React.useState([]); + const [inputText, setInputText] = React.useState(""); const favoritesUuids = useAppSelector(selectFavorites); const favorites = useAppSelector((state) => @@ -32,25 +30,6 @@ const Sidebar: React.FC = () => { const teamUuids = useAppSelector(selectTeam); const team = useAppSelector((state) => selectUsers(state, teamUuids)); - const handleInputFavorites = (e: React.ChangeEvent) => { - const inputText = e.target.value.toLowerCase(); - const result = (inputText == "") ? favorites : - favorites.filter(f => ( - f.name.toLowerCase().slice(0, inputText.length) == inputText.slice(0, inputText.length))); - - setFilteredFavorites(result); - }; - - const handleInputTeam = (e: React.ChangeEvent) => { - - const inputText = e.target.value.toLowerCase(); - const result = (inputText == "") ? team : - team.filter(f => ( - f.name.toLowerCase().slice(0, inputText.length) == inputText.slice(0, inputText.length))); - - setFilteredTeam(result); - }; - return ( { variant="outlined" placeholder="Person" onChange={(e) => { - handleInputFavorites(e); - handleInputTeam(e); + setInputText(e.target.value); }} - // can we make it so the outline doesnt turn white (primary color) when its clicked on? /> @@ -91,9 +68,13 @@ const Sidebar: React.FC = () => { - {filteredFavorites.map((favorite, i) => ( - - ))} + { + favorites.filter(favorite => ( + favorite.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length) + )).map((favorite, i) => ( + + )) + } setTeamOpen(!teamOpen)}> @@ -103,9 +84,13 @@ const Sidebar: React.FC = () => { - {filteredTeam.map((member, i) => ( - - ))} + { + team.filter(member => ( + member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length) + )).map((member, i) => ( + + )) + }