diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx index 75eeb23..63ee88a 100644 --- a/src/components/home/CallFavouritesDialog.tsx +++ b/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,24 +34,74 @@ const CallFavouritesDialog: React.FC = ({ onClose(selectedValue); }; + const [group, setGroup] = useState("Favorites"); + const [inputText, setInputText] = useState(""); + const [checkedUuids, setCheckedUuids] = useState([]); + + 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 ( Select who to call: - } - label="Select everyone" + + { + setInputText(e.target.value); + }} + /> - {users.map((user) => ( - } - label={user.name} - /> - ))} + {groupMembers + .filter((member) => + member.name.toLowerCase().includes(inputText.toLowerCase()) + ) + .map((member) => ( + { + handleCheck(member.uuid, e.target.checked); + }} + control={ + + } + /> + ))} 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 = ({ users }: Props) => { users={users} /> - Call Favourites + Call Group 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 = ({ group, setGroup }) => { +const GroupSelect: React.FC = ({ group, setGroup, onGroupChange }) => { const handleChange = (e: SelectChangeEvent) => { setGroup(e.target.value); + if (onGroupChange) { + onGroupChange(); + } }; return ( diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index a451e67..b80ae84 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -50,7 +50,7 @@ const Sidebar: React.FC = () => { - + {groupMembers.map((user, i) => (