photo gallery and phot gallery details page updated for api datas

app/(event)/photo-gallery/page.jsx

@@ -5,32 +5,38 @@ import Link from "next/link";
 import { useState, useEffect } from 'react';
 
 export default function Memories() {
-    
   const [selectedYear, setSelectedYear] = useState('');
-    const [events, setEvents]=useState([]);
+  const [events, setEvents] = useState([]);
   const [years, setYears] = useState([]);
 
   useEffect(() => {
     getEvents();
-    }, [])
+  }, []);
 
   const getEvents = async () => {
     try {
-          const eventRes = await axios?.get('https://api.tamilculturewaterloo.org/api/events/');
+      const eventRes = await axios.get(
-            console.log("eventRes", eventRes)
+        'https://api.tamilculturewaterloo.org/api/events/'
-            setEvents(eventRes?.data?.data)
+      );
-            const years = Object.keys(eventRes?.data).sort((a, b) => Number(b) - Number(a));
-             setYears(years);
 
-              // Default to latest year
+      const eventsData = eventRes?.data?.data || [];
-                if (years.length > 0) {
+      setEvents(eventsData);
-                    setSelectedYear(years[0]);
+
+      // Extract unique years & sort (latest first)
+      const uniqueYears = [...new Set(eventsData.map(event => event.year))].sort((a, b) => b - a);
+      setYears(uniqueYears);
+
+      // Default to latest year immediately
+      if (uniqueYears.length > 0) {
+        setSelectedYear(uniqueYears[0]);
       }
-
     } catch (error) {
-            console.log("error fetching data", error)
+      console.log("error fetching data", error);
-        }
     }
+  };
+
+  // Filter events by selected year
+  const filteredEvents = events.filter(event => event.year === selectedYear);
 
   return (
     <Layout headerStyle={1} footerStyle={1}>
@@ -68,9 +74,9 @@ export default function Memories() {
                         <li key={year}>
                           <button
                             onClick={() => setSelectedYear(year)}
-                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
+                            className={`btn w-100 mb-2 category-btn ${selectedYear === year ? 'active' : ''}`}
                           >
-                                                        Years {year}
+                            Year {year}
                           </button>
                         </li>
                       ))}
@@ -81,23 +87,21 @@ export default function Memories() {
 
               {/* Right Column: Gallery */}
               <div className="col-lg-9">
-                                {/* <div className="heading12 mb-4 border-bottom pb-2">
-                                    <h2 className="text-center">📷 Memories of {selectedYear}</h2>
-                                </div> */}
-
                 <div className="row justify-content-start">
-                                    {events[selectedYear]?.map((event, idx) => (
+                  {filteredEvents.map((event, idx) => (
                     <div className="col-lg-4 col-md-6 mb-4" key={idx}>
                       <div className="memory3-boxarea">
                         <div className="img1">
-                                                    <img src={event.image} alt={event.title} />
+                          <img src={event.eventimageurl} alt={event.eventtitle} />
                         </div>
                         <div className="content-area">
-                                                    <p>{event.date}</p>
+                          <p>{event.eventdate}</p>
                           <div className="space12" />
-                                                    <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
+                          <Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
+                            {event.eventtitle}
+                          </Link>
                           <div className="plus">
-                                                        <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
+                            <Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
                               <i className="fa-solid fa-plus" />
                             </Link>
                           </div>
@@ -105,6 +109,11 @@ export default function Memories() {
                       </div>
                     </div>
                   ))}
+                  {filteredEvents.length === 0 && (
+                    <div className="col-12 text-center">
+                      <p>No events found for {selectedYear}</p>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

app/(event)/photo-gallery/single-gallery/page.tsx

@@ -1,36 +1,50 @@
 'use client';
 
 import Layout from '@/components/layout/Layout';
-import { memoryData } from '@/utility/constant.utils';
+import axios from 'axios';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-interface EventData {
+interface EventImage {
-    image: string;
+  id: string;
-    title: string;
+  src: string;
-    desc?: string;
+  title?: string;
-    date: string;
+  description?: string;
-    slug: string;
-    link?: string;
-    gallery?: string[];
 }
 
 export default function SingleGallery() {
   const searchParams = useSearchParams();
-    const slug = searchParams.get('slug');
+  const eventId = searchParams.get('id');
 
-    // Flatten all events into a single array
+  const [eventImages, setEventImages] = useState<EventImage[]>([]);
-    const allEvents: EventData[] = Object.values(memoryData).flat();
+  const [open, setOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-    // Match event by slug
+  useEffect(() => {
-    const matchedEvent = allEvents.find(event => event.slug === slug);
+    if (eventId) {
-    const galleryImages: string[] = matchedEvent?.gallery || [];
+      getEventGallery();
+    }
+  }, [eventId]);
 
-    const [open, setOpen] = useState<boolean>(false);
+  const getEventGallery = async () => {
-    const [currentIndex, setCurrentIndex] = useState<number>(0);
+    try {
+      const res = await axios.get(
+        `https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
+      );
+      const formatted = res.data?.data?.map((img: any) => ({
+        id: img.id,
+        src: img.imageurl,
+        title: img?.title || '',
+        description: img?.description || '',
+      }));
+      setEventImages(formatted || []);
+    } catch (error) {
+      console.log("Error fetching event images", error);
+    }
+  };
 
   const handleImageClick = (index: number) => {
     setCurrentIndex(index);
@@ -38,7 +52,6 @@ export default function SingleGallery() {
   };
 
   return (
-        <>
     <Layout headerStyle={1} footerStyle={1}>
       {/* Header Section */}
       <div
@@ -59,14 +72,15 @@ export default function SingleGallery() {
           </div>
         </div>
       </div>
+
+      {/* Gallery Section */}
       <div className="bloginner-section-area sp4">
         <div className="container">
           <div className="row">
             <div className="col-lg-12 m-auto">
               <div className="event2-header heading5 space-margin60">
                 <h2 className="text-anime-style-3">
-                                        {matchedEvent?.title || "Photos Gallery"}
+                  Photos Gallery
-                                        <p>{matchedEvent?.desc}</p>
                 </h2>
               </div>
             </div>
@@ -75,9 +89,9 @@ export default function SingleGallery() {
           <div className="row gx-5">
             <div className="col-lg-12">
               <div className="row mt-4">
-                                    {galleryImages.map((src: string, index: number) => (
+                {eventImages.map((image, index) => (
                   <div
-                                            key={index}
+                    key={image.id}
                     className="col-lg-3 col-md-6 mb-4"
                     data-aos="zoom-in"
                     data-aos-duration={1000}
@@ -89,8 +103,8 @@ export default function SingleGallery() {
                         onClick={() => handleImageClick(index)}
                       >
                         <img
-                                                        src={src}
+                          src={image.src}
-                                                        alt={`gallery-${index}`}
+                          alt={image.title || `gallery-${index}`}
                           loading="lazy"
                           style={{ width: '100%', height: 'auto' }}
                         />
@@ -99,7 +113,7 @@ export default function SingleGallery() {
                   </div>
                 ))}
 
-                                    {galleryImages.length === 0 && (
+                {eventImages.length === 0 && (
                   <div className="col-12 text-center mt-5">
                     <p className="text-muted">No images found for this event.</p>
                   </div>
@@ -110,13 +124,13 @@ export default function SingleGallery() {
         </div>
       </div>
 
+      {/* Lightbox */}
       <Lightbox
         open={open}
         close={() => setOpen(false)}
         index={currentIndex}
-                    slides={galleryImages.map((src) => ({ src }))}
+        slides={eventImages.map((img) => ({ src: img.src, title: img.title }))}
       />
     </Layout>
-        </>
   );
 }