@reach/router#useNavigate JavaScript Examples

The following examples show how to use @reach/router#useNavigate. 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: Pool.js    From speed-spend with MIT License 6 votes vote down vote up 
export function Pool({ pool, poolId, ownerStxAddress }) {
  const navigate = useNavigate();
  const spinner = useRef();
  return (
    <div>
      {pool ? (
        <>
          <PoolInfo pool={pool} />
          <div className="input-group ">
            <button
              className="btn btn-outline-secondary"
              type="button"
              onClick={() => {
                navigate(`/pools/${poolId}`, { state: { pool } });
              }}
            >
              <div
                ref={spinner}
                role="status"
                className="d-none spinner-border spinner-border-sm text-info align-text-top mr-2"
              />
              Join Pool
            </button>
          </div>

          <br />
        </>
      ) : (
        <>
          <br />
          Pool does not exist.
          <br />
          <br />
        </>
      )}
    </div>
  );
}
Example #2
Source File: EventCard.js    From AdaptivApps-fe with MIT License 5 votes vote down vote up 
export default function EventCard({ event }) {
  const classes = useStyles();
  const [updateEvent] = useMutation(REGISTER_EVENT);

  const { user } = useAuth0();
  const navigate = useNavigate();

  const registerEvent = async () => {
    await updateEvent({
      variables: { id: event.id, email: user.email },
    });
    await navigate(`/calendar/${event.id}`);
  };

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.card}>
        <Box>
          <div className={classes.banner}>{event.type}</div>
          <CardMedia
            className={classes.cardImg}
            component="img"
            alt="Event"
            width="15rem"
            image={event?.imgUrl}
            title="Angel City Event"
          />
        </Box>
        <CardContent className={classes.content}>
          <Typography
            className={classes.cardDate}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.startDate} - {event.endDate}
          </Typography>
          <Typography
            className={classes.cardTitle}
            gutterBottom
            variant="h5"
            component="h2"
          >
            {event.title}
          </Typography>
          <Typography
            className={classes.cardLoc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.btnContainer}>
        <SimpleModal event={event} registerEvent={registerEvent} />
      </CardActions>
    </Card>
  );
}
Example #3
Source File: MyEventCard.js    From AdaptivApps-fe with MIT License 4 votes vote down vote up 
export default function MyEventCard({ event, refetch }) {
  const classes = useStyles();
  const navigate = useNavigate();
  // Retrieves current user info from Auth0
  const { user } = useAuth0();
  const { data } = useQuery(GET_PARTICIPANT_IDS, {
    variables: { email: user.email, id: event.id },
    fetchPolicy: "no-cache",
  });
  const [unregisterFromAll] = useMutation(UNREGISTER_FROM_ALL);
  const [unregisterFromEventActivity] = useMutation(
    UNREGISTER_FROM_EVENT_ACTIVITY
  );
  // Unregisters user from specified event and all it's activities
  const unregisterFromEvent = async () => {
    const participantIds = data?.participants?.map(participant => {
      return participant.id;
    });

    const participantIdValue = data?.participants?.map(participant => {
      return participant.id;
    });

    const participantId = JSON.stringify(participantIdValue).replace(
      /[\[\]"]+/g,
      ""
    );

    data && data?.participants?.length === 1
      ? await unregisterFromEventActivity({
          variables: {
            id: event.id,
            email: user.email,
            participantId: participantId,
          },
        })
      : data && data?.participants === null
      ? await unregisterFromEvent({
          variables: {
            id: event.id,
            email: user.email,
          },
        })
      : await unregisterFromAll({
          variables: {
            id: event.id,
            email: user.email,
            participantIds: participantIds,
          },
        });
    await refetch();
  };
  const viewEventDetails = async () => {
    await navigate(`/myevents/${event?.id}`);
  };

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.card}>
        <Box>
          <div className={classes.banner}>{event.type}</div>
          <CardMedia
            className={classes.cardImg}
            component="img"
            alt="Event"
            width="15rem"
            image={event?.imgUrl}
            title="Angel City Event"
          />
        </Box>
        <CardContent className={classes.content}>
          <Typography
            className={classes.cardDate}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.startDate} - {event.endDate}
          </Typography>
          <Typography
            className={classes.cardTitle}
            gutterBottom
            variant="h5"
            component="h2"
          >
            {event.title}
          </Typography>
          <Typography
            className={classes.cardLoc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.btnContainer}>
        <Button onClick={viewEventDetails} className={classes.btn}>
          View Details
        </Button>
        <Button className={classes.btn} onClick={unregisterFromEvent}>
          Unregister
        </Button>
      </CardActions>
    </Card>
  );
}