import React, { useContext, useEffect, useState } from "react"; import { Badge, Tooltip } from "@material-ui/core"; import SpeakerIcon from "@material-ui/icons/Speaker"; import { ClientContext } from "../../../utils/ClientContext"; const DevicesBadge = () => { const { playback } = useContext(ClientContext); const [state] = playback; const [nbrDevices, setNbrDevices] = useState("0"); // eslint-disable-next-line const getNbrOfDevices = () => { const count = state.devices.filter((device) => device.selected === true) .length; setNbrDevices(count); }; useEffect(() => { getNbrOfDevices(); }, [state.devices, getNbrOfDevices]); return ( <> <Tooltip title="Devices/Groups Selected" aria-label="Devices"> <Badge color="secondary" badgeContent={nbrDevices}> <SpeakerIcon /> </Badge> </Tooltip> </> ); }; export default DevicesBadge;