From 178e991203629ab7150e87742ed251a506d3fd4d Mon Sep 17 00:00:00 2001 From: Ayush Acharjya Date: Sun, 27 Oct 2024 04:01:54 +0000 Subject: [PATCH] fetch data from the smart contract --- app/events/page.tsx | 161 +++++++++++++++++++++----------------------- 1 file changed, 78 insertions(+), 83 deletions(-) diff --git a/app/events/page.tsx b/app/events/page.tsx index 882a92b..ea1643c 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -1,65 +1,28 @@ 'use client'; + import React, { Suspense, useEffect, useState } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import Header from '../../components/custom/header'; import Footer from '../../components/custom/footer'; +import { ethers } from 'ethers'; +import { getContract } from '@/lib/ethers'; export const dynamic = 'force-dynamic'; interface Event { - EventID: number; + eventId: number; name: string; - date: string; - location: string; - ticketPrice: number; description: string; + location: string; capacity: number; ticketsSold: number; - imageUrl: string; - host: string; + ticketPrice: number; + eventStartDate: number; + eventEndDate: number; + images: string[]; + eventHost: string; } -const fetchEvents = (): Event[] => { - return [ - { - EventID: 1, - name: 'Rock Concert', - date: '2023-12-01', - location: 'New York City', - ticketPrice: 99, - description: 'An exhilarating rock concert featuring famous bands.', - capacity: 5000, - ticketsSold: 4500, - imageUrl: 'https://via.placeholder.com/150', - host: 'Music Mania', - }, - { - EventID: 2, - name: 'Art Expo', - date: '2023-11-15', - location: 'San Francisco', - ticketPrice: 55, - description: 'A showcase of modern art from around the world.', - capacity: 300, - ticketsSold: 260, - imageUrl: 'https://via.placeholder.com/150', - host: 'Art Lovers', - }, - { - EventID: 3, - name: 'Tech Summit 2023', - date: '2023-12-10', - location: 'Chicago', - ticketPrice: 250, - description: 'The leading tech summit with top industry speakers.', - capacity: 2000, - ticketsSold: 1800, - imageUrl: 'https://via.placeholder.com/150', - host: 'Tech Alliance', - }, - ]; -}; - const EventsPage: React.FC = () => { const router = useRouter(); const searchParams = useSearchParams(); @@ -77,27 +40,59 @@ const EventsPage: React.FC = () => { const [showFilterMenu, setShowFilterMenu] = useState(false); useEffect(() => { - const eventsData = fetchEvents(); - setEvents(eventsData); - setFilteredEvents(eventsData); + const fetchEvents = async () => { + try { + const provider = new ethers.providers.Web3Provider(window.ethereum!); + const contract = getContract().connect(provider); + const eventCount = await contract.eventCounter(); + const eventsData: Event[] = []; - if (initialQuery) { - setFilteredEvents( - eventsData.filter((event) => - ['name', 'date', 'location', 'description', 'host'].some((key) => - event[key as keyof Event] - .toString() - .toLowerCase() - .includes(initialQuery.toLowerCase()) - ) - ) - ); - } + for (let i = 0; i < eventCount; i++) { + const event = await contract.events(i); + const images = await contract.getEventImages(i); + eventsData.push({ + eventId: i, + name: event.name, + description: event.description, + location: event.location, + capacity: event.capacity.toNumber(), + ticketsSold: event.ticketsSold.toNumber(), + ticketPrice: parseFloat( + ethers.utils.formatEther(event.ticketPrice) + ), + eventStartDate: event.eventStartDate.toNumber(), + eventEndDate: event.eventEndDate.toNumber(), + images: images, + eventHost: event.eventHost, + }); + } + + setEvents(eventsData); + setFilteredEvents(eventsData); + + if (initialQuery) { + setFilteredEvents( + eventsData.filter((event) => + ['name', 'description', 'location', 'eventHost'].some((key) => + event[key as keyof Event] + .toString() + .toLowerCase() + .includes(initialQuery.toLowerCase()) + ) + ) + ); + } + } catch (error) { + console.error('Failed to fetch events:', error); + } + }; + + fetchEvents(); }, [initialQuery]); useEffect(() => { let filtered = events.filter((event) => - ['name', 'date', 'location', 'description', 'host'].some((key) => + ['name', 'description', 'location', 'eventHost'].some((key) => event[key as keyof Event] .toString() .toLowerCase() @@ -112,17 +107,17 @@ const EventsPage: React.FC = () => { } if (filterOptions.includes('future')) { - const now = new Date(); - filtered = filtered.filter((event) => new Date(event.date) > now); + const now = Math.floor(Date.now() / 1000); + filtered = filtered.filter((event) => event.eventStartDate > now); } if (filterOptions.includes('past')) { - const now = new Date(); - filtered = filtered.filter((event) => new Date(event.date) < now); + const now = Math.floor(Date.now() / 1000); + filtered = filtered.filter((event) => event.eventEndDate < now); } if (selectedHost) { - filtered = filtered.filter((event) => event.host === selectedHost); + filtered = filtered.filter((event) => event.eventHost === selectedHost); } if (sortOption === 'price-asc') { @@ -130,13 +125,9 @@ const EventsPage: React.FC = () => { } else if (sortOption === 'price-desc') { filtered = filtered.sort((a, b) => b.ticketPrice - a.ticketPrice); } else if (sortOption === 'date-asc') { - filtered = filtered.sort( - (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime() - ); + filtered = filtered.sort((a, b) => a.eventStartDate - b.eventStartDate); } else if (sortOption === 'date-desc') { - filtered = filtered.sort( - (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() - ); + filtered = filtered.sort((a, b) => b.eventStartDate - a.eventStartDate); } setFilteredEvents(filtered); @@ -161,8 +152,8 @@ const EventsPage: React.FC = () => { }; }, []); - const handleEventClick = (eventID: number) => { - router.push(`/events/${eventID}`); + const handleEventClick = (eventId: number) => { + router.push(`/events/${eventId}`); }; return ( @@ -280,25 +271,29 @@ const EventsPage: React.FC = () => {
{filteredEvents.map((event) => ( ))}