diff --git a/frontend/src/index.js b/frontend/src/index.js index 5f9908f..3e50a35 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -59,9 +59,8 @@ const router = createBrowserRouter([ element: session ? : , }, { - path: '/events', // /:event add this and then use params to get the id information + path: '/events/:eventId', element: session ? : , - // () => ({title: 'Boulder Event', location: 'Boulder,CO', date: '12/4/2023', time: '6:30', info: 'Lorem Ipsum'}) }, { path: '/vendors', diff --git a/frontend/src/routes/event.jsx b/frontend/src/routes/event.jsx index 6b71f54..a1ea5b7 100644 --- a/frontend/src/routes/event.jsx +++ b/frontend/src/routes/event.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import {useNavigate} from 'react-router-dom'; +import {useNavigate, useParams} from 'react-router-dom'; import logo from '../assets/PIM_logo_white.png'; import bLogo from '../assets/PIM_logo_black.png'; import {useState} from 'react'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faCaretDown} from '@fortawesome/free-solid-svg-icons'; +import {faCaretDown, faLeftRight} from '@fortawesome/free-solid-svg-icons'; import {faAnglesLeft} from '@fortawesome/free-solid-svg-icons'; import PropTypes from 'prop-types'; @@ -14,12 +14,13 @@ export default function Event({EventService}) { const [about, setAbout] = useState(false); const [vendorOpen, setVendorOpen] = useState(false); const navigate = useNavigate(); + const {eventId} = useParams(); // const [register, setRegistered] = useState(false); // wondering if I could use object destructuring here // e.g const [location, setLocation] = useState({getEvent}) // b/c getEvent realistically has a prop location - const {title, location, date, time, info} = EventService.getEventById(1); + const {title, location, date, time, info} = EventService.getEventById(parseInt(eventId)); // const vendorList = RegisterEventService[id].getVendors(); const vendorImages = [logo, bLogo, logo, bLogo, logo, bLogo, logo, bLogo, logo, bLogo, logo, bLogo];