import React, { useCallback, useRef, useState } from "react"; import { List, ListItem, ListItemText, Divider, ListItemAvatar, Avatar, Badge, ListItemSecondaryAction, Button, Popover } from "@material-ui/core"; // import PersonIcon from '@material-ui/icons/Person'; import StyleIcon from '@material-ui/icons/Style'; import useFetchData, { FetchType } from "../../../Hooks/useFetchData"; interface PlayersProps { players: any[]; host: string; czar: string; roomId: string; isCurrentUserHost: boolean; } const MobilePlayer = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => { const anchorEl = useRef<any>(); const [isOpen, setIsOpen] = useState(false); if (!player) { return null; } function renderKick() { if (isHost || !isCurrentUserHost) { return null; } return <List> <ListItem style={{ padding: 0 }}> <Button size="small" color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button> </ListItem> </List>; } return <> <div className={`player ${isCzar ? 'special' : ''}`} ref={anchorEl} onClick={() => setIsOpen(prev => !prev)}> <Badge badgeContent={player.score} color="error"> {player?.username} </Badge> </div> <Popover anchorEl={anchorEl.current} open={isHost || !isCurrentUserHost ? false : isOpen} onClose={() => setIsOpen(false)} anchorOrigin={{ vertical: 'top', horizontal: 'right', }} transformOrigin={{ vertical: 'bottom', horizontal: 'left', }} > {renderKick()} </Popover> </> }; const Player = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => { function renderIcon() { return <div style={!isCzar ? { opacity: 0 } : {}}> <ListItemAvatar> <Avatar> <StyleIcon /> </Avatar> </ListItemAvatar> </div> } function renderKick() { if (isHost || !isCurrentUserHost) { return null; } return <ListItemSecondaryAction style={{ right: '-10px' }}> <Button color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button> </ListItemSecondaryAction> } return <ListItem> {renderIcon()} <ListItemText primary={player.username} secondary={`Score: ${!player?.score ? 0 : player.score}`} /> {renderKick()} </ListItem>; }; const Players = React.memo(({ players, host, czar, roomId, isCurrentUserHost }: PlayersProps) => { const [, , , kickPlayer] = useFetchData(`/api/rooms/kick`, FetchType.PUT); const onPlayerKick = useCallback((playerToKick: string) => { return kickPlayer({ roomId, clientId: playerToKick }).catch(() => { }); }, [kickPlayer, roomId]); if (window.screen.width < 600) { return <> {players.sort((a, b) => b.score - a.score).map((player) => { const isHost = player._id === host; const isCzar = player?._id === czar; return <MobilePlayer key={player._id} player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} /> })} </> } return <List className="players-list"> {players.map((player, index) => { const isHost = player._id === host; const isCzar = player?._id === czar; return <React.Fragment key={player._id}> <Player player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} /> {index !== players?.length - 1 ? <Divider variant="inset" component="li" /> : null} </React.Fragment> })} </List>; }); export default Players;