implement basic contactspage search

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<boolean>(true);
   const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
-  const [filteredFavorites, setFilteredFavorites] = React.useState<UserLite[]>([]);
+  const [inputText, setInputText] = React.useState<string>("");
-  const [filteredTeam, setFilteredTeam] = React.useState<UserLite[]>([]);
 
   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<HTMLTextAreaElement | HTMLInputElement>) => {
-    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<HTMLTextAreaElement | HTMLInputElement>) => {
-    
-    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 (
     <Drawer
       variant="permanent"
@@ -72,10 +51,8 @@ const Sidebar: React.FC = () => {
             variant="outlined"
             placeholder="Person"
             onChange={(e) => {
-              handleInputFavorites(e);
+              setInputText(e.target.value);
-              handleInputTeam(e);
             }}
-            // can we make it so the outline doesnt turn white (primary color) when its clicked on?
           />
         </ListItem>
         
@@ -91,9 +68,13 @@ const Sidebar: React.FC = () => {
         </ListItemButton>
         <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {filteredFavorites.map((favorite, i) => (
+            {
-              <ContactItem contactInfo={favorite} key={i} />
+              favorites.filter(favorite => (
-            ))}
+                favorite.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
+              )).map((favorite, i) => (
+                <ContactItem contactInfo={favorite} key={i} />
+              ))
+            }
           </List>
         </Collapse>
         <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
@@ -103,9 +84,13 @@ const Sidebar: React.FC = () => {
         </ListItemButton>
         <Collapse in={teamOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {filteredTeam.map((member, i) => (
+            {
-              <ContactItem contactInfo={member} key={i} />
+              team.filter(member => (
-            ))}
+                member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
+              )).map((member, i) => (
+                <ContactItem contactInfo={member} key={i} />
+              ))
+            }
           </List>
         </Collapse>
       </List>