import React, { useState } from "react"; import { useAuth0 } from "../../config/react-auth0-spa"; import { useMutation } from "react-apollo"; import { REGISTER_AS_ATHLETE, REGISTER_AS_COACH, REGISTER_AS_VOLUNTEER, REGISTER_AS_SPECTATOR, } from "./queries/ActivityRegister"; // Styling imports import { makeStyles, Popover, Button, Box } from "@material-ui/core"; import { IconContext } from "react-icons"; import { IoIosAddCircle } from "react-icons/io"; import LightTooltip from "../../theme/LightTooltip"; const useStyles = makeStyles(theme => ({ typography: { padding: theme.spacing(2), }, btn: { display: "flex", height: "100%", background: "transparent", boxShadow: "none", border: "none", margin: "0", padding: "0", "&:hover": { background: "none", boxShadow: "none", }, }, box: { display: "flex", flexDirection: "column", }, dialogPaper: { boxShadow: "none", }, role: { "&:hover": { color: "#2A62FF", }, "&:focus": { color: "#2A62FF", }, }, })); export default function SimplePopover({ activity, activityData }) { const { user } = useAuth0(); const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(null); const [registerAsAthlete] = useMutation(REGISTER_AS_ATHLETE); const [registerAsCoach] = useMutation(REGISTER_AS_COACH); const [registerAsVolunteer] = useMutation(REGISTER_AS_VOLUNTEER); const [registerAsSpectator] = useMutation(REGISTER_AS_SPECTATOR); const handleClick = event => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const participant = activity.participants.map(participant => { return participant?.id; }); const participantIdValue = JSON.stringify(participant).replace( /[\[\]"]+/g, "" ); const athleteRegister = async () => { console.log("participantIdValue", participantIdValue); console.log("participant", participant); await registerAsAthlete({ variables: { participantId: participantIdValue, activityId: activity.id, email: user.email, }, }); alert("Successfully registered to compete in this event!"); handleClose(); }; const coachRegister = async () => { console.log("participantIdValue", participantIdValue); console.log("participant", participant); await registerAsCoach({ variables: { participantId: participantIdValue, activityId: activity.id, email: user.email, }, }); alert("Successfully registered as a Coach!"); handleClose(); }; const volunteerRegister = async () => { console.log("participantIdValue", participantIdValue); console.log("participant", participant); await registerAsVolunteer({ variables: { participantId: participantIdValue, activityId: activity.id, email: user.email, }, }); alert("Successfully registered as a Volunteer"); handleClose(); }; const spectatorRegister = async () => { console.log("participantIdValue", participantIdValue); console.log("participant", participant); await registerAsSpectator({ variables: { participantId: participantIdValue, activityId: activity.id, email: user.email, }, }); alert("Successfully registered as a Spectator"); handleClose(); }; const open = Boolean(anchorEl); const id = open ? "simple-popover" : undefined; return ( <IconContext.Provider onBlur={handleClick} value={ anchorEl ? { style: { background: "white", color: "#FFC629", fontSize: "3rem", }, } : { style: { background: "white", color: "#2962FF", fontSize: "3rem", }, } } > {activityData && activityData?.event?.type === "Webinar" ? ( <LightTooltip title="Register for Activity" placement="right"> <Button className={classes.btn} aria-describedby={id} variant="contained" onClick={spectatorRegister} > <IoIosAddCircle /> </Button> </LightTooltip> ) : ( <> <LightTooltip title="Register for Activity" placement="right"> <Button className={classes.btn} aria-describedby={id} variant="contained" onClick={handleClick} > <IoIosAddCircle /> </Button> </LightTooltip> <Popover className={classes.popover} id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: "center", horizontal: "right", }} transformOrigin={{ vertical: "center", horizontal: "left", }} classes={{ paper: classes.dialogPaper }} > <Box className={classes.box}> <Button className={classes.role} onClick={athleteRegister}> I'm Competing </Button> <Button className={classes.role} onClick={coachRegister}> I'm Coaching </Button> <Button className={classes.role} onClick={volunteerRegister}> I'm Volunteering </Button> <Button className={classes.role} onClick={spectatorRegister}> I'm Spectating </Button> </Box> </Popover> </> )} </IconContext.Provider> ); }