add dropdown to switch between groups; remove select all button

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
+        <GroupSelect group={group} setGroup={setGroup} />
-          control={<Checkbox color="success" />}
-          label="Select everyone"
-        />
       </DialogContent>
       <DialogContent sx={{ height: "40vh" }} dividers>
         <FormGroup>
-          {users.map((user) => (
+          {groupMembers.map(user => (
             <FormControlLabel 
-              key={user.id}
+              key={user.uuid} 
-              control={<Checkbox color="success" />}
               label={user.name}
+              control={
+                <Checkbox color="success" />
+              }
             />
           ))}
         </FormGroup>