commit for Ayush

app/events/[...eventId]/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+import React from 'react';
+import { useSearchParams } from 'next/navigation';
+import Header from '../../../components/custom/header';
+import Footer from '../../../components/custom/footer';
+import EventDescription from '../../../components/custom/EventDescription';
+
+// Dummy function to simulate a GET request
+const fetchEventDetails = (eventID: number) => {
+  alert(`Fetching details for event ID: ${eventID}`);
+  // Simulated JSON response for the event
+  return {
+    EventID: eventID,
+    name: 'Example Event Name',
+    date: '2023-12-01',
+    location: 'Example Location',
+    ticketPrice: 100,
+    description: 'Detailed description of the event.',
+    capacity: 300,
+    ticketsSold: 150,
+    imageUrl: [
+      'https://via.placeholder.com/150',
+      'https://via.placeholder.com/150',
+    ],
+    host: 'Example Host',
+    tickets: [1, 2, 3, 4],
+  };
+};
+
+const ListingPage: React.FC = () => {
+  const searchParams = useSearchParams();
+  const eventID = searchParams.get('eventID');
+
+  // Simulate fetching data from backend
+  if (eventID) {
+    const eventDetails = fetchEventDetails(Number(eventID));
+    console.log('Event Details:', eventDetails);
+  }
+
+  return (
+    <>
+      <Header />
+      <EventDescription />
+      <Footer />
+    </>
+  );
+};
+
+export default ListingPage;

app/events/page.tsx

@@ -1,20 +1,20 @@
 'use client';
 import React, { useEffect, useState, useRef } from 'react';
+import { useRouter } from 'next/navigation'; // Import useRouter for routing
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
 
-// Define the Event interface including new fields
 interface Event {
   EventID: number;
   name: string;
-  date: string; // Should ideally be a Date object for better handling
+  date: string;
   location: string;
-  ticketPrice: number; // Changed to number for sorting
+  ticketPrice: number;
   description: string;
   capacity: number;
   ticketsSold: number;
   imageUrl: string;
-  host: string; // New field for host
+  host: string;
 }
 
 // Dummy function to fetch events
@@ -64,14 +64,15 @@ const EventsPage: React.FC = () => {
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
-  const [sortOption, setSortOption] = useState<string>(''); // Track sorting option
+  const [sortOption, setSortOption] = useState<string>('');
-  const [filterOptions, setFilterOptions] = useState<string[]>([]); // Track applied filters
+  const [filterOptions, setFilterOptions] = useState<string[]>([]);
-  const [selectedHost, setSelectedHost] = useState<string>(''); // For host filtering
+  const [selectedHost, setSelectedHost] = useState<string>('');
   const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
   const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
 
   const sortRef = useRef<HTMLDivElement>(null);
   const filterRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
 
   useEffect(() => {
     const eventsData = fetchEvents();
@@ -145,6 +146,10 @@ const EventsPage: React.FC = () => {
     };
   }, []);
 
+  const handleEventClick = (eventID: number) => {
+    router.push(`/events/${eventID}`); // You may replace this with a Link from Next.js
+  };
+
   return (
     <div className="relative min-h-screen overflow-hidden">
       <Header />
@@ -297,9 +302,10 @@ const EventsPage: React.FC = () => {
             </h2>
             <div className="grid grid-cols-1 gap-6">
               {filteredEvents.map((event) => (
-                <div
+                <button
                   key={event.EventID}
-                  className="relative flex bg-white p-4 rounded-lg shadow-lg"
+                  className="relative flex bg-white p-4 rounded-lg shadow-lg text-left"
+                  onClick={() => handleEventClick(event.EventID)}
                   onMouseEnter={() => setHoveredEventId(event.EventID)}
                   onMouseLeave={() => setHoveredEventId(null)}
                 >
@@ -329,7 +335,7 @@ const EventsPage: React.FC = () => {
                       </div>
                     )}
                   </div>
-                </div>
+                </button>
               ))}
             </div>
           </section>