react-icons/io#IoIosAddCircle JavaScript Examples

The following examples show how to use react-icons/io#IoIosAddCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SelectRole.js    From AdaptivApps-fe with MIT License 4 votes vote down vote up 
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>
  );
}