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