@reach/router#useParams JavaScript Examples

The following examples show how to use @reach/router#useParams. 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: index.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
export default function MyEventDetails() {
  const classes = useStyles();
  // Retrieves ID of current event from parameters
  const { eventId } = useParams();
  // Retrieves logged in user info from Auth0
  const { user } = useAuth0();
  // Retrieves event details of specified event by ID which user is registered to
  const { loading, error, data, refetch } = useQuery(GET_EVENT_DETAILS, {
    variables: { id: eventId, email: user.email },
  });
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  const activeEvent = data.events;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Link href="/myevents" className={classes.linkBack}>
          <ArrowBackIosIcon color="primary" fontSize="large" />
          Back to my events
        </Link>
        <Typography variant="h1" gutterBottom>
          Event Details
        </Typography>
      </Box>
      {activeEvent &&
        activeEvent.map((event, id) => <EventDetails key={id} event={event} />)}
    </main>
  );
}
Example #2
Source File: index.js    From AdaptivApps-fe with MIT License 5 votes vote down vote up 
export default function ActivityList() {
  const classes = useStyles();
  const { eventId } = useParams();
  const { loading, error, data: activityData } = useQuery(
    GET_EVENT_ACTIVITIES,
    {
      variables: { id: eventId },
    }
  );
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;
  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Typography className={classes.heading} variant="h1" gutterBottom>
          Event Activities
        </Typography>
      </Box>
      <Box className={classes.eventContainer}>
        <Box className={classes.imgContainer}>
          <img
            className={classes.eventImg}
            src={activityData && activityData?.event?.imgUrl}
            alt="Event"
          />
        </Box>
        <Box className={classes.infoContainer}>
          <Typography
            className={classes.date}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {activityData.event.startDate}-{activityData.event.endDate}
          </Typography>
          <Typography className={classes.title}>
            {activityData.event.title}
          </Typography>
          <Typography
            className={classes.loc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {activityData.event.location}
          </Typography>
        </Box>
      </Box>
      <Box className={classes.details}>{activityData.event.details}</Box>
      {activityData.event.activities.length >= 1 ? (
        <Box className={classes.activityC}>
          <p>Activities Schedule</p>
          <table className={classes.table}>
            <tbody>
              <tr className={classes.headerRow}>
                <th className={classes.tableH}>Name</th>
                <th className={classes.tableH}>Date</th>
                {activityData.event.type === "In Person" ? (
                  <th className={classes.tableH}>Location</th>
                ) : null}
                <th className={classes.tableH}>Time</th>
              </tr>
              {activityData &&
                activityData?.event?.activities.map((activity, id) => (
                  <Activities
                    key={id}
                    activity={activity}
                    activityData={activityData}
                  />
                ))}
            </tbody>
          </table>
        </Box>
      ) : null}
    </main>
  );
}