photo gallery and phot gallery details page updated for api datas
This commit is contained in:
Alaguraj0361
parent
782616940d
commit
317c611339
@ -5,112 +5,121 @@ import Link from "next/link";
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
export default function Memories() {
|
export default function Memories() {
|
||||||
|
const [selectedYear, setSelectedYear] = useState('');
|
||||||
const [selectedYear, setSelectedYear] = useState('');
|
const [events, setEvents] = useState([]);
|
||||||
const [events, setEvents]=useState([]);
|
const [years, setYears] = useState([]);
|
||||||
const [years, setYears] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getEvents();
|
getEvents();
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
const getEvents = async () => {
|
const getEvents = async () => {
|
||||||
try {
|
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]);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
// Extract unique years & sort (latest first)
|
||||||
console.log("error fetching data", error)
|
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 (
|
// Filter events by selected year
|
||||||
<Layout headerStyle={1} footerStyle={1}>
|
const filteredEvents = events.filter(event => event.year === selectedYear);
|
||||||
<div>
|
|
||||||
{/* Header Section */}
|
return (
|
||||||
<div
|
<Layout headerStyle={1} footerStyle={1}>
|
||||||
className="inner-page-header"
|
<div>
|
||||||
style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
|
{/* Header Section */}
|
||||||
>
|
<div
|
||||||
<div className="container">
|
className="inner-page-header"
|
||||||
<div className="row">
|
style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
|
||||||
<div className="col-lg-6 m-auto">
|
>
|
||||||
<div className="heading1 text-center">
|
<div className="container">
|
||||||
<h1>Recent Memories</h1>
|
<div className="row">
|
||||||
<div className="space20" />
|
<div className="col-lg-6 m-auto">
|
||||||
<Link href="/">
|
<div className="heading1 text-center">
|
||||||
Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
|
<h1>Recent Memories</h1>
|
||||||
</Link>
|
<div className="space20" />
|
||||||
</div>
|
<Link href="/">
|
||||||
</div>
|
Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
|
||||||
</div>
|
</Link>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Memory Section */}
|
|
||||||
<div className="memory-inner-section-area blog-details-section sp4">
|
|
||||||
<div className="container">
|
|
||||||
<div className="row gx-5">
|
|
||||||
{/* Left Column: Year Tabs */}
|
|
||||||
<div className="col-lg-3 mb-4 mb-lg-0">
|
|
||||||
<div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
|
|
||||||
<div className="blog-categories">
|
|
||||||
<ul className="list-unstyled">
|
|
||||||
{years.map((year) => (
|
|
||||||
<li key={year}>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedYear(year)}
|
|
||||||
className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
|
|
||||||
>
|
|
||||||
Years {year}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 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) => (
|
|
||||||
<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} />
|
|
||||||
</div>
|
|
||||||
<div className="content-area">
|
|
||||||
<p>{event.date}</p>
|
|
||||||
<div className="space12" />
|
|
||||||
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
|
|
||||||
<div className="plus">
|
|
||||||
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
|
|
||||||
<i className="fa-solid fa-plus" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
|
||||||
|
{/* Memory Section */}
|
||||||
|
<div className="memory-inner-section-area blog-details-section sp4">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row gx-5">
|
||||||
|
{/* Left Column: Year Tabs */}
|
||||||
|
<div className="col-lg-3 mb-4 mb-lg-0">
|
||||||
|
<div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
|
||||||
|
<div className="blog-categories">
|
||||||
|
<ul className="list-unstyled">
|
||||||
|
{years.map((year) => (
|
||||||
|
<li key={year}>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedYear(year)}
|
||||||
|
className={`btn w-100 mb-2 category-btn ${selectedYear === year ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Year {year}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Gallery */}
|
||||||
|
<div className="col-lg-9">
|
||||||
|
<div className="row justify-content-start">
|
||||||
|
{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.eventimageurl} alt={event.eventtitle} />
|
||||||
|
</div>
|
||||||
|
<div className="content-area">
|
||||||
|
<p>{event.eventdate}</p>
|
||||||
|
<div className="space12" />
|
||||||
|
<Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
|
||||||
|
{event.eventtitle}
|
||||||
|
</Link>
|
||||||
|
<div className="plus">
|
||||||
|
<Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
|
||||||
|
<i className="fa-solid fa-plus" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filteredEvents.length === 0 && (
|
||||||
|
<div className="col-12 text-center">
|
||||||
|
<p>No events found for {selectedYear}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,122 +1,136 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Layout from '@/components/layout/Layout';
|
import Layout from '@/components/layout/Layout';
|
||||||
import { memoryData } from '@/utility/constant.utils';
|
import axios from 'axios';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
import { useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import Lightbox from "yet-another-react-lightbox";
|
import Lightbox from "yet-another-react-lightbox";
|
||||||
import "yet-another-react-lightbox/styles.css";
|
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() {
|
export default function SingleGallery() {
|
||||||
const searchParams = useSearchParams();
|
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) => {
|
const handleImageClick = (index: number) => {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Layout headerStyle={1} footerStyle={1}>
|
||||||
<Layout headerStyle={1} footerStyle={1}>
|
{/* Header Section */}
|
||||||
{/* Header Section */}
|
<div
|
||||||
<div
|
className="inner-page-header"
|
||||||
className="inner-page-header"
|
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
|
||||||
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
|
>
|
||||||
>
|
<div className="container">
|
||||||
<div className="container">
|
<div className="row">
|
||||||
<div className="row">
|
<div className="col-lg-6 m-auto">
|
||||||
<div className="col-lg-6 m-auto">
|
<div className="heading1 text-center">
|
||||||
<div className="heading1 text-center">
|
<h1>Recent Memories</h1>
|
||||||
<h1>Recent Memories</h1>
|
<div className="space20" />
|
||||||
<div className="space20" />
|
<Link href="/">
|
||||||
<Link href="/">
|
Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
|
||||||
Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
|
</Link>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
|
Photos Gallery
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row gx-5">
|
||||||
|
<div className="col-lg-12">
|
||||||
|
<div className="row mt-4">
|
||||||
|
{eventImages.map((image, index) => (
|
||||||
|
<div
|
||||||
|
key={image.id}
|
||||||
|
className="col-lg-3 col-md-6 mb-4"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-duration={1000}
|
||||||
|
>
|
||||||
|
<div className="blog4-boxarea">
|
||||||
|
<div
|
||||||
|
className="img1"
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
onClick={() => handleImageClick(index)}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image.src}
|
||||||
|
alt={image.title || `gallery-${index}`}
|
||||||
|
loading="lazy"
|
||||||
|
style={{ width: '100%', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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"}
|
|
||||||
<p>{matchedEvent?.desc}</p>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row gx-5">
|
{eventImages.length === 0 && (
|
||||||
<div className="col-lg-12">
|
<div className="col-12 text-center mt-5">
|
||||||
<div className="row mt-4">
|
<p className="text-muted">No images found for this event.</p>
|
||||||
{galleryImages.map((src: string, index: number) => (
|
</div>
|
||||||
<div
|
)}
|
||||||
key={index}
|
</div>
|
||||||
className="col-lg-3 col-md-6 mb-4"
|
</div>
|
||||||
data-aos="zoom-in"
|
</div>
|
||||||
data-aos-duration={1000}
|
</div>
|
||||||
>
|
</div>
|
||||||
<div className="blog4-boxarea">
|
|
||||||
<div
|
|
||||||
className="img1"
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
onClick={() => handleImageClick(index)}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={src}
|
|
||||||
alt={`gallery-${index}`}
|
|
||||||
loading="lazy"
|
|
||||||
style={{ width: '100%', height: 'auto' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{galleryImages.length === 0 && (
|
{/* Lightbox */}
|
||||||
<div className="col-12 text-center mt-5">
|
<Lightbox
|
||||||
<p className="text-muted">No images found for this event.</p>
|
open={open}
|
||||||
</div>
|
close={() => setOpen(false)}
|
||||||
)}
|
index={currentIndex}
|
||||||
</div>
|
slides={eventImages.map((img) => ({ src: img.src, title: img.title }))}
|
||||||
</div>
|
/>
|
||||||
</div>
|
</Layout>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
|
|
||||||
<Lightbox
|
|
||||||
open={open}
|
|
||||||
close={() => setOpen(false)}
|
|
||||||
index={currentIndex}
|
|
||||||
slides={galleryImages.map((src) => ({ src }))}
|
|
||||||
/>
|
|
||||||
</Layout>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user