Abstract out fetchEvents.ts from events page

app/events/page.tsx

@@ -6,6 +6,7 @@ import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
 import { ethers } from 'ethers';
 import { getContract } from '@/lib/ethers';
+import { fetchEvents } from '@/lib/fetchEvents';
 
 export const dynamic = 'force-dynamic';
 
@@ -40,32 +41,9 @@ const EventsPage: React.FC = () => {
   const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
 
   useEffect(() => {
-    const fetchEvents = async () => {
+    const getEvents = async () => {
       try {
-        const provider = new ethers.providers.Web3Provider(window.ethereum!);
-        const contract = getContract().connect(provider);
-        const eventCount = await contract.eventCounter();
-        const eventsData: Event[] = [];
-
-        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,
-          });
-        }
+        const eventsData: Event[] = (await fetchEvents())!;
 
         setEvents(eventsData);
         setFilteredEvents(eventsData);
@@ -87,7 +65,7 @@ const EventsPage: React.FC = () => {
       }
     };
 
-    fetchEvents();
+    getEvents();
   }, [initialQuery]);
 
   useEffect(() => {
@@ -172,7 +150,7 @@ const EventsPage: React.FC = () => {
         <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
 
         <div className="relative z-20 container mx-auto p-4 pt-16">
-          <Suspense fallback={<p>Loading...</p>}>
+          <Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}>
             <input
               type="text"
               placeholder="Search events..."
@@ -291,7 +269,7 @@ const EventsPage: React.FC = () => {
                       </p>
                       <p className="text-gray-600">{event.location}</p>
                       <p className="text-gray-800 font-semibold">
-                        ${event.ticketPrice} FLR
+                        ${event.ticketPrice}
                       </p>
                       <p className="text-gray-600">Host: {event.eventHost}</p>
                     </div>

contracts/EventManager.sol

@@ -24,9 +24,9 @@ contract EventManager {
         string name;
         string description;
         string location;
-        uint256 capacity;
-        uint256 ticketsSold;
-        uint256 ticketPrice; // in USD cents
+        uint64 capacity;
+        uint64 ticketsSold;
+        uint64 ticketPrice; // in USD cents
         uint256 eventStartDate;
         uint256 eventEndDate;
         string[] images; // array of image URLs
@@ -92,7 +92,7 @@ contract EventManager {
         return centsToFlare(events[_eventId].ticketPrice);
     }
 
-    function createEvent(string memory _name, string memory _description, string memory _location, uint256 _capacity, uint256 _ticketPrice, uint256 _eventStartDate, uint256 _eventEndDate, string[] memory _images) public returns (uint256 _eventId) {
+    function createEvent(string memory _name, string memory _description, string memory _location, uint64 _capacity, uint64 _ticketPrice, uint256 _eventStartDate, uint256 _eventEndDate, string[] memory _images) public returns (uint256 _eventId) {
         events[eventCounter] = Event(_name, _description, _location, _capacity, 0, _ticketPrice, _eventStartDate, _eventEndDate, _images, new uint256[](0), payable(msg.sender));
         eventCounter++;
         emit EventCreated(eventCounter - 1, _name, _eventStartDate);

lib/fetchEvents.ts

@@ -0,0 +1,53 @@
+import { ethers } from "ethers";
+import { getContract } from "./ethers";
+
+interface Event {
+    eventId: number;
+    name: string;
+    description: string;
+    location: string;
+    capacity: number;
+    ticketsSold: number;
+    ticketPrice: number;
+    eventStartDate: number;
+    eventEndDate: number;
+    images: string[];
+    eventHost: string;
+}
+
+export const fetchEvents: () => Promise<Event[] | undefined> = async () => {
+    try {
+        console.log('Starting events call');
+        if (typeof window.ethereum === 'undefined') {
+            console.error('Ethereum provider not found');
+            return;
+        }
+
+        console.log('Connecting to contract');
+        const contract = getContract();
+        const eventCount = await contract.eventCounter();
+        const eventsData: Event[] = [];
+
+        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: event.ticketPrice.toNumber() / 100,
+                eventStartDate: event.eventStartDate.toNumber(),
+                eventEndDate: event.eventEndDate.toNumber(),
+                images: images,
+                eventHost: event.eventHost,
+            });
+        }
+
+        return eventsData;
+    } catch (error) {
+      console.error('Failed to fetch events:', error);
+    }
+}