Merge pull request #36 from CPSC319-Winter-term-2/mbalsdon-contacts-search

contacts page search

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<boolean>(true);
   const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
+  const [inputText, setInputText] = React.useState<string>("");
 
   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 (
     <Drawer
@@ -42,18 +52,29 @@ const Sidebar: React.FC = () => {
           primaryTypographyProps={{ variant: "h6" }}
           sx={{ textAlign: "center" }}
         />
+        <ListItem>
+          <TextField
+            label="Search Contacts"
+            variant="outlined"
+            placeholder="Person"
+            onChange={(e) => {
+              setInputText(e.target.value);
+            }}
+          />
+        </ListItem>
+
         <Divider />
         <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
           {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
           <ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
           <ListItemText
-            primary={favorites.length}
+            primary={filteredFavorites.length}
             sx={{ textAlign: "right" }}
           />
         </ListItemButton>
         <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {favorites.map((favorite, i) => (
+            {filteredFavorites.map((favorite, i) => (
               <ContactItem contactInfo={favorite} key={i} />
             ))}
           </List>
@@ -61,11 +82,14 @@ const Sidebar: React.FC = () => {
         <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
           {teamOpen ? <ExpandLess /> : <ExpandMore />}
           <ListItemText primary="Team" sx={{ textAlign: "center" }} />
-          <ListItemText primary={team.length} sx={{ textAlign: "right" }} />
+          <ListItemText
+            primary={filteredTeam.length}
+            sx={{ textAlign: "right" }}
+          />
         </ListItemButton>
         <Collapse in={teamOpen} timeout="auto" unmountOnExit>
           <List disablePadding>
-            {team.map((member, i) => (
+            {filteredTeam.map((member, i) => (
               <ContactItem contactInfo={member} key={i} />
             ))}
           </List>