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] 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)}/>
               }
             />
           ))}