implement contactspage search (buggy)

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";
@@ -13,12 +15,15 @@ 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 [filteredTeam, setFilteredTeam] = React.useState<UserLite[]>([]);
 
   const favoritesUuids = useAppSelector(selectFavorites);
   const favorites = useAppSelector((state) =>
@@ -27,6 +32,25 @@ 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"
@@ -42,6 +66,20 @@ const Sidebar: React.FC = () => {
           primaryTypographyProps={{ variant: "h6" }}
           sx={{ textAlign: "center" }}
         />
+        <ListItem>
+          <TextField
+            label="Search Contacts"
+            variant="outlined"
+            placeholder="Person"
+            onChange={(e) => {
+              handleInputFavorites(e);
+              handleInputTeam(e);
+            }}
+            // can we make it so the outline doesnt turn white (primary color) when its clicked on?
+          />
+        </ListItem>
+        
+        
         <Divider />
         <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
           {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
@@ -53,7 +91,7 @@ const Sidebar: React.FC = () => {
         </ListItemButton>
         <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {favorites.map((favorite, i) => (
+            {filteredFavorites.map((favorite, i) => (
               <ContactItem contactInfo={favorite} key={i} />
             ))}
           </List>
@@ -65,7 +103,7 @@ const Sidebar: React.FC = () => {
         </ListItemButton>
         <Collapse in={teamOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {team.map((member, i) => (
+            {filteredTeam.map((member, i) => (
               <ContactItem contactInfo={member} key={i} />
             ))}
           </List>