From f09a2177dda51ed326bc8c43cd82f7ec460c2502 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 14:22:08 -0700
Subject: [PATCH 1/3] implement contactspage search (buggy)

---
 .../contacts/contacts-components/Sidebar.tsx  | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx
index 2795687..e5255c0 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";
@@ -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>

From e18562c0c97ecba479aeff66bd8c4bcbad3543fd Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 14:34:46 -0700
Subject: [PATCH 2/3] implement basic contactspage search

---
 .../contacts/contacts-components/Sidebar.tsx  | 47 +++++++------------
 1 file changed, 16 insertions(+), 31 deletions(-)

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<boolean>(true);
   const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
-  const [filteredFavorites, setFilteredFavorites] = React.useState<UserLite[]>([]);
-  const [filteredTeam, setFilteredTeam] = React.useState<UserLite[]>([]);
+  const [inputText, setInputText] = React.useState<string>("");
 
   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);
-              handleInputTeam(e);
+              setInputText(e.target.value);
             }}
-            // 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>

From cdac8e9ef4c10363cadecb0236fa6f5cf0ddf878 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Thu, 24 Mar 2022 22:04:00 -0700
Subject: [PATCH 3/3] now search uses includes and num contacts updated
 properly

---
 .../contacts/contacts-components/Sidebar.tsx  | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx
index 811b282..47cf766 100644
--- a/src/components/contacts/contacts-components/Sidebar.tsx
+++ b/src/components/contacts/contacts-components/Sidebar.tsx
@@ -27,8 +27,15 @@ const Sidebar: React.FC = () => {
   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
@@ -55,42 +62,36 @@ const Sidebar: React.FC = () => {
             }}
           />
         </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.filter(favorite => (
-                favorite.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
-              )).map((favorite, i) => (
-                <ContactItem contactInfo={favorite} key={i} />
-              ))
-            }
+            {filteredFavorites.map((favorite, i) => (
+              <ContactItem contactInfo={favorite} key={i} />
+            ))}
           </List>
         </Collapse>
         <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.filter(member => (
-                member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
-              )).map((member, i) => (
-                <ContactItem contactInfo={member} key={i} />
-              ))
-            }
+            {filteredTeam.map((member, i) => (
+              <ContactItem contactInfo={member} key={i} />
+            ))}
           </List>
         </Collapse>
       </List>