From ad5ecf2d41d7ed5c50b764342be285d0843e063f Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 16:11:14 -0700
Subject: [PATCH 1/7] add dropdown to switch between groups; remove select all
 button

---
 src/components/home/CallFavouritesDialog.tsx | 34 +++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index 75eeb23..c6e9ff8 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -9,6 +9,11 @@ import {
   FormGroup,
   Typography,
 } from "@mui/material";
+import React, { useState } from "react";
+import { useAppSelector } from "../../redux/hooks";
+import { selectFavorites } from "../../redux/slices/favoritesSlice";
+import { selectTeam, selectUsers } from "../../redux/slices/usersSlice";
+import GroupSelect from "../sidebar/GroupSelect";
 import { SidebarUserObj } from "./Home";
 
 interface Props {
@@ -24,26 +29,39 @@ const CallFavouritesDialog: React.FC<Props> = ({
   onClose,
   users,
 }: Props) => {
+
   const handleClose = () => {
+    console.log(users);
+    console.log(selectedValue);
     onClose(selectedValue);
   };
 
+  const [group, setGroup] = useState<string>("Favorites");
+
+  const favoritesUuids = useAppSelector(selectFavorites);
+  const teamUuids = useAppSelector(selectTeam);
+
+  const groupMembersUuids: string[] = 
+    group === "Favorites" ? favoritesUuids : teamUuids;
+  const groupMembers = useAppSelector((state) =>
+    selectUsers(state, groupMembersUuids)
+  );
+
   return (
     <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>Select who to call:</DialogTitle>
       <DialogContent>
-        <FormControlLabel
-          control={<Checkbox color="success" />}
-          label="Select everyone"
-        />
+        <GroupSelect group={group} setGroup={setGroup} />
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
         <FormGroup>
-          {users.map((user) => (
-            <FormControlLabel
-              key={user.id}
-              control={<Checkbox color="success" />}
+          {groupMembers.map(user => (
+            <FormControlLabel 
+              key={user.uuid} 
               label={user.name}
+              control={
+                <Checkbox color="success" />
+              }
             />
           ))}
         </FormGroup>

From fea1a6aae55fa3f4632c783d14db7f48716336b6 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 16:11:55 -0700
Subject: [PATCH 2/7] change 'call favourites' to 'call group'

---
 src/components/home/ShortCuts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 7404a87..98ae56c 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -58,7 +58,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             users={users}
           />
           <Typography className="mylabel" sx={{ ml: 1 }}>
-            Call Favourites
+            Call Group
           </Typography>
         </Grid>
         <Grid item sm={6}>

From c21e4785ce25bc49bbd753fe1f72590e40e64ee6 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 16:48:14 -0700
Subject: [PATCH 3/7] add search to call group dialog

---
 src/components/home/CallFavouritesDialog.tsx | 39 ++++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index c6e9ff8..6173d05 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -7,6 +7,7 @@ import {
   DialogTitle,
   FormControlLabel,
   FormGroup,
+  TextField,
   Typography,
 } from "@mui/material";
 import React, { useState } from "react";
@@ -37,6 +38,16 @@ const CallFavouritesDialog: React.FC<Props> = ({
   };
 
   const [group, setGroup] = useState<string>("Favorites");
+  const [inputText, setInputText] = useState<string>("");
+  const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
+
+  const handleCheck = (uuid: string, checked: boolean) => {
+    if (checked) {
+      setCheckedUuids(checkedUuids.concat([uuid]));
+    } else {
+      setCheckedUuids(checkedUuids.filter(id => id != uuid));
+    }
+  };
 
   const favoritesUuids = useAppSelector(selectFavorites);
   const teamUuids = useAppSelector(selectTeam);
@@ -54,13 +65,33 @@ const CallFavouritesDialog: React.FC<Props> = ({
         <GroupSelect group={group} setGroup={setGroup} />
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
+        <TextField
+          label="Search"
+          variant="outlined"
+          placeholder="Person"
+          fullWidth
+          sx={{ pb: 1 }}
+          onChange={(e) => {
+            setInputText(e.target.value);
+          }} 
+        />
         <FormGroup>
-          {groupMembers.map(user => (
+          {groupMembers.filter(member => (
+            member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
+          )).map(member => (
             <FormControlLabel 
-              key={user.uuid} 
-              label={user.name}
+              key={member.uuid} 
+              label={member.name}
+              sx={{ pl: 1 }}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              onChange={(e: any) => {
+                handleCheck(member.uuid, e.target.checked);
+                console.log(checkedUuids);
+              }}
               control={
-                <Checkbox color="success" />
+                <Checkbox 
+                  color="success" 
+                  checked={checkedUuids.includes(member.uuid)}/>
               }
             />
           ))}

From a735ee8304190c6ce08ef072c00c4ed690dd538d Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 17:31:53 -0700
Subject: [PATCH 4/7] add onGroupChange function parameter (can be null)

---
 src/components/sidebar/GroupSelect.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/GroupSelect.tsx b/src/components/sidebar/GroupSelect.tsx
index 7b100e1..a9b40ec 100644
--- a/src/components/sidebar/GroupSelect.tsx
+++ b/src/components/sidebar/GroupSelect.tsx
@@ -13,13 +13,17 @@ import React from "react";
 interface Props {
   group: string;
   setGroup: (group: string) => void;
+  onGroupChange: (() => void) | null;
 }
 
 const groups = ["Favorites", "Team"];
 
-const GroupSelect: React.FC<Props> = ({ group, setGroup }) => {
+const GroupSelect: React.FC<Props> = ({ group, setGroup, onGroupChange }) => {
   const handleChange = (e: SelectChangeEvent) => {
     setGroup(e.target.value);
+    if (onGroupChange) {
+      onGroupChange();
+    }
   };
 
   return (

From 0c247569b767b270a6bfcd46343a95622274f6c3 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 17:33:11 -0700
Subject: [PATCH 5/7] add onGroupChange input to GroupSelect component

---
 src/components/sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index ea49f48..a224f51 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -49,7 +49,7 @@ const Sidebar: React.FC = () => {
       <Toolbar />
       <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
-          <GroupSelect group={group} setGroup={setGroup} />
+          <GroupSelect group={group} setGroup={setGroup} onGroupChange={null} />
         </ListSubheader>
         {groupMembers.map((user, i) => (
           <ListItem disablePadding key={user.uuid}>

From bee47e29a8524250e577c007788aa006c43f91cc Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 17:34:37 -0700
Subject: [PATCH 6/7] fix small issue where selected checkboxes stay selected
 after changing group

---
 src/components/home/CallFavouritesDialog.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index 6173d05..df25dff 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -49,6 +49,10 @@ const CallFavouritesDialog: React.FC<Props> = ({
     }
   };
 
+  const handleGroupChange = () => {
+    setCheckedUuids([]);
+  };
+
   const favoritesUuids = useAppSelector(selectFavorites);
   const teamUuids = useAppSelector(selectTeam);
 
@@ -62,7 +66,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
     <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>Select who to call:</DialogTitle>
       <DialogContent>
-        <GroupSelect group={group} setGroup={setGroup} />
+        <GroupSelect group={group} setGroup={setGroup} onGroupChange={handleGroupChange}/>
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
         <TextField
@@ -86,7 +90,6 @@ const CallFavouritesDialog: React.FC<Props> = ({
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               onChange={(e: any) => {
                 handleCheck(member.uuid, e.target.checked);
-                console.log(checkedUuids);
               }}
               control={
                 <Checkbox 

From 877df73ea5e99e2af8c8a2c39da293f2541ef80f Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Fri, 25 Mar 2022 00:11:51 -0700
Subject: [PATCH 7/7] filter now uses includes

---
 src/components/home/CallFavouritesDialog.tsx | 54 +++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index df25dff..63ee88a 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -30,10 +30,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
   onClose,
   users,
 }: Props) => {
-
   const handleClose = () => {
-    console.log(users);
-    console.log(selectedValue);
     onClose(selectedValue);
   };
 
@@ -45,7 +42,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
     if (checked) {
       setCheckedUuids(checkedUuids.concat([uuid]));
     } else {
-      setCheckedUuids(checkedUuids.filter(id => id != uuid));
+      setCheckedUuids(checkedUuids.filter((id) => id != uuid));
     }
   };
 
@@ -56,7 +53,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
   const favoritesUuids = useAppSelector(selectFavorites);
   const teamUuids = useAppSelector(selectTeam);
 
-  const groupMembersUuids: string[] = 
+  const groupMembersUuids: string[] =
     group === "Favorites" ? favoritesUuids : teamUuids;
   const groupMembers = useAppSelector((state) =>
     selectUsers(state, groupMembersUuids)
@@ -66,7 +63,11 @@ const CallFavouritesDialog: React.FC<Props> = ({
     <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>Select who to call:</DialogTitle>
       <DialogContent>
-        <GroupSelect group={group} setGroup={setGroup} onGroupChange={handleGroupChange}/>
+        <GroupSelect
+          group={group}
+          setGroup={setGroup}
+          onGroupChange={handleGroupChange}
+        />
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
         <TextField
@@ -77,27 +78,30 @@ const CallFavouritesDialog: React.FC<Props> = ({
           sx={{ pb: 1 }}
           onChange={(e) => {
             setInputText(e.target.value);
-          }} 
+          }}
         />
         <FormGroup>
-          {groupMembers.filter(member => (
-            member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
-          )).map(member => (
-            <FormControlLabel 
-              key={member.uuid} 
-              label={member.name}
-              sx={{ pl: 1 }}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onChange={(e: any) => {
-                handleCheck(member.uuid, e.target.checked);
-              }}
-              control={
-                <Checkbox 
-                  color="success" 
-                  checked={checkedUuids.includes(member.uuid)}/>
-              }
-            />
-          ))}
+          {groupMembers
+            .filter((member) =>
+              member.name.toLowerCase().includes(inputText.toLowerCase())
+            )
+            .map((member) => (
+              <FormControlLabel
+                key={member.uuid}
+                label={member.name}
+                sx={{ pl: 1 }}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onChange={(e: any) => {
+                  handleCheck(member.uuid, e.target.checked);
+                }}
+                control={
+                  <Checkbox
+                    color="success"
+                    checked={checkedUuids.includes(member.uuid)}
+                  />
+                }
+              />
+            ))}
         </FormGroup>
       </DialogContent>