Fixed the routing to use eventId from parameters.

frontend/src/index.js

@@ -59,9 +59,8 @@ const router = createBrowserRouter([
         element: session ? <Profile/> : <Navigate to="/login" />,
       },
       {
-        path: '/events', // /:event add this and then use params to get the id information
+        path: '/events/:eventId',
         element: session ? <Event EventService = {MockEventService} /> : <Navigate to="/login" />,
-        // () => ({title: 'Boulder Event', location: 'Boulder,CO', date: '12/4/2023', time: '6:30', info: 'Lorem Ipsum'})
       },
       {
         path: '/vendors',

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];