From 317c611339d90f4510e55e04b0f86b83732e3206 Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Wed, 13 Aug 2025 11:48:46 +0530 Subject: [PATCH] photo gallery and phot gallery details page updated for api datas --- app/(event)/photo-gallery/page.jsx | 209 +++++++++-------- .../photo-gallery/single-gallery/page.tsx | 218 ++++++++++-------- 2 files changed, 225 insertions(+), 202 deletions(-) diff --git a/app/(event)/photo-gallery/page.jsx b/app/(event)/photo-gallery/page.jsx index adad2df..89c3e1a 100644 --- a/app/(event)/photo-gallery/page.jsx +++ b/app/(event)/photo-gallery/page.jsx @@ -5,112 +5,121 @@ import Link from "next/link"; import { useState, useEffect } from 'react'; export default function Memories() { - - const [selectedYear, setSelectedYear] = useState(''); - const [events, setEvents]=useState([]); - const [years, setYears] = useState([]); + const [selectedYear, setSelectedYear] = useState(''); + const [events, setEvents] = useState([]); + const [years, setYears] = useState([]); - useEffect(() => { - getEvents(); - }, []) + useEffect(() => { + getEvents(); + }, []); - const getEvents = async () => { - try { - const eventRes = await axios?.get('https://api.tamilculturewaterloo.org/api/events/'); - console.log("eventRes", eventRes) - setEvents(eventRes?.data?.data) - const years = Object.keys(eventRes?.data).sort((a, b) => Number(b) - Number(a)); - setYears(years); + const getEvents = async () => { + try { + const eventRes = await axios.get( + 'https://api.tamilculturewaterloo.org/api/events/' + ); - // Default to latest year - if (years.length > 0) { - setSelectedYear(years[0]); - } + const eventsData = eventRes?.data?.data || []; + setEvents(eventsData); - } catch (error) { - console.log("error fetching data", error) - } + // 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); } + }; - return ( - -
- {/* Header Section */} -
-
-
-
-
-

Recent Memories

-
- - Home Recent Memories - -
-
-
-
-
- - {/* Memory Section */} -
-
-
- {/* Left Column: Year Tabs */} -
-
-
-
    - {years.map((year) => ( -
  • - -
    • - ))} -
-
-
-
- - {/* Right Column: Gallery */} -
- {/*
-

📷 Memories of {selectedYear}

-
*/} - -
- {events[selectedYear]?.map((event, idx) => ( -
-
-
- {event.title} -
-
-

{event.date}

-
- {event.title} -
- - - -
-
-
-
- ))} -
-
-
-
+ // Filter events by selected year + const filteredEvents = events.filter(event => event.year === selectedYear); + + return ( + +
+ {/* Header Section */} +
+
+
+
+
+

Recent Memories

+
+ + Home Recent Memories +
+
- - ); +
+
+ + {/* Memory Section */} +
+
+
+ {/* Left Column: Year Tabs */} +
+
+
+
    + {years.map((year) => ( +
  • + +
    • + ))} +
+
+
+
+ + {/* Right Column: Gallery */} +
+
+ {filteredEvents.map((event, idx) => ( +
+
+
+ {event.eventtitle} +
+
+

{event.eventdate}

+
+ + {event.eventtitle} + +
+ + + +
+
+
+
+ ))} + {filteredEvents.length === 0 && ( +
+

No events found for {selectedYear}

+
+ )} +
+
+
+
+
+
+ + ); } diff --git a/app/(event)/photo-gallery/single-gallery/page.tsx b/app/(event)/photo-gallery/single-gallery/page.tsx index 9d52337..ab92fe8 100644 --- a/app/(event)/photo-gallery/single-gallery/page.tsx +++ b/app/(event)/photo-gallery/single-gallery/page.tsx @@ -1,122 +1,136 @@ '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 { - image: string; - title: string; - desc?: string; - date: string; - slug: string; - link?: string; - gallery?: string[]; +interface EventImage { + id: string; + src: string; + title?: string; + description?: string; } export default function SingleGallery() { - const searchParams = useSearchParams(); - const slug = searchParams.get('slug'); + const searchParams = useSearchParams(); + const eventId = searchParams.get('id'); - // Flatten all events into a single array - const allEvents: EventData[] = Object.values(memoryData).flat(); + const [eventImages, setEventImages] = useState([]); + const [open, setOpen] = useState(false); + const [currentIndex, setCurrentIndex] = useState(0); - // Match event by slug - const matchedEvent = allEvents.find(event => event.slug === slug); - const galleryImages: string[] = matchedEvent?.gallery || []; + useEffect(() => { + if (eventId) { + getEventGallery(); + } + }, [eventId]); - const [open, setOpen] = useState(false); - const [currentIndex, setCurrentIndex] = useState(0); + const getEventGallery = async () => { + 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); - setOpen(true); - }; + const handleImageClick = (index: number) => { + setCurrentIndex(index); + setOpen(true); + }; - return ( - <> - - {/* Header Section */} -
-
-
-
-
-

Recent Memories

-
- - Home Recent Memories - -
-
-
+ return ( + + {/* Header Section */} +
+
+
+
+
+

Recent Memories

+
+ + Home Recent Memories + +
+
+
+
+
+ + {/* Gallery Section */} +
+
+
+
+
+

+ Photos Gallery +

+
+
+
+ +
+
+
+ {eventImages.map((image, index) => ( +
+
+
handleImageClick(index)} + > + {image.title +
-
-
-
-
-
-
-

- {matchedEvent?.title || "Photos Gallery"} -

{matchedEvent?.desc}

-

-
-
-
+
+ ))} -
-
-
- {galleryImages.map((src: string, index: number) => ( -
-
-
handleImageClick(index)} - > - {`gallery-${index}`} -
-
-
- ))} + {eventImages.length === 0 && ( +
+

No images found for this event.

+
+ )} +
+
+
+
+
- {galleryImages.length === 0 && ( -
-

No images found for this event.

-
- )} -
-
-
-
-
- - setOpen(false)} - index={currentIndex} - slides={galleryImages.map((src) => ({ src }))} - /> - - - ); + {/* Lightbox */} + setOpen(false)} + index={currentIndex} + slides={eventImages.map((img) => ({ src: img.src, title: img.title }))} + /> + + ); }