Merge pull request #37 from CPSC319-Winter-term-2/mbalsdon-callfavs-improvement

Add search and per-group-selection to Call Favorites (now "Call Group")

src/components/home/CallFavouritesDialog.tsx

@@ -7,8 +7,14 @@ import {
   DialogTitle,
   FormControlLabel,
   FormGroup,
+  TextField,
   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 {
@@ -28,22 +34,72 @@ const CallFavouritesDialog: React.FC<Props> = ({
     onClose(selectedValue);
   };
 
+  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 handleGroupChange = () => {
+    setCheckedUuids([]);
+  };
+
+  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
+        <GroupSelect
-          control={<Checkbox color="success" />}
+          group={group}
-          label="Select everyone"
+          setGroup={setGroup}
+          onGroupChange={handleGroupChange}
         />
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
+        <TextField
+          label="Search"
+          variant="outlined"
+          placeholder="Person"
+          fullWidth
+          sx={{ pb: 1 }}
+          onChange={(e) => {
+            setInputText(e.target.value);
+          }}
+        />
         <FormGroup>
-          {users.map((user) => (
+          {groupMembers
+            .filter((member) =>
+              member.name.toLowerCase().includes(inputText.toLowerCase())
+            )
+            .map((member) => (
               <FormControlLabel
-              key={user.id}
+                key={member.uuid}
-              control={<Checkbox color="success" />}
+                label={member.name}
-              label={user.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>

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}>

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 (

src/components/sidebar/Sidebar.tsx

@@ -50,7 +50,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}>