From ae59c6d188bad05d9c979fbbc7beefa48ad3ea82 Mon Sep 17 00:00:00 2001
From: "Aman Kumar [SSW]" <71385247+amankumarrr@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:42:37 +1000
Subject: [PATCH] Revert "Fixing the rendering of upcoming events"

This reverts commit 58139bf1028bc413bc560dbf8d029a1cba0b444f.
---
 components/blocks-renderer.tsx       |  4 +-
 components/blocks/upcomingEvents.tsx | 59 ++++++++++++++++++----------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/components/blocks-renderer.tsx b/components/blocks-renderer.tsx
index 32e9a7b9c..950152d06 100644
--- a/components/blocks-renderer.tsx
+++ b/components/blocks-renderer.tsx
@@ -4,7 +4,9 @@ const BookingButton = dynamic(() =>
   import("./bookingButton/bookingButton").then((mod) => mod.BookingButton)
 );
 
-import { UpcomingEvents } from "./blocks/upcomingEvents";
+const UpcomingEvents = dynamic(() =>
+  import("./blocks/upcomingEvents").then((mod) => mod.UpcomingEvents)
+);
 
 const AboutUs = dynamic(() =>
   import("./blocks/aboutUs").then((mod) => mod.AboutUs)
diff --git a/components/blocks/upcomingEvents.tsx b/components/blocks/upcomingEvents.tsx
index aa708e9d8..12af88f70 100644
--- a/components/blocks/upcomingEvents.tsx
+++ b/components/blocks/upcomingEvents.tsx
@@ -1,31 +1,46 @@
+"use client";
+
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
 import { useFormatDates } from "../../hooks/useFormatDates";
+import client from "../../tina/__generated__/client";
 import { CustomLink } from "../customLink";
 import { EventsRelativeBox } from "../events/eventsRelativeBox";
 import { EventTrimmed } from "../filter/events";
 import { PresenterList } from "../presenters/presenterList";
 
-const fetchEvents = async (data) => {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const events = data.events;
+export const UpcomingEvents = ({ data }) => {
+  const [events, setEvents] = useState<EventTrimmed[]>([]);
+  const [loading, setLoading] = useState(false);
 
-  if (!events.data) return;
-  const mappedEvents = events.data.eventsCalendarConnection.edges.map(
-    (event) => ({
-      ...event.node,
-      startDateTime: new Date(event.node.startDateTime),
-      endDateTime: new Date(event.node.endDateTime),
-    })
-  );
-  return mappedEvents;
-};
+  useEffect(() => {
+    const fetchEvents = async () => {
+      setLoading(true);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      const events =
+        data.events ||
+        (await client.queries.getFutureEventsQuery({
+          fromDate: today.toISOString(),
+          top: data.numberOfEvents,
+        }));
+      setLoading(false);
 
-export const UpcomingEvents = async ({ data }) => {
-  const events = await fetchEvents(data);
+      if (!events.data) return;
+      const mappedEvents = events.data.eventsCalendarConnection.edges.map(
+        (event) => ({
+          ...event.node,
+          startDateTime: new Date(event.node.startDateTime),
+          endDateTime: new Date(event.node.endDateTime),
+        })
+      );
+      setEvents(mappedEvents);
+    };
+
+    fetchEvents();
+  }, [data.numberOfEvents, data.events]);
 
   return (
     <div className="prose mt-5 max-w-none sm:my-0">
@@ -37,9 +52,13 @@ export const UpcomingEvents = async ({ data }) => {
       </h2>
       <div className="not-prose">
         <div className="grow">
-          {events.map((event, index) => (
-            <UpcomingEvent event={event} key={index} />
-          ))}
+          {loading ? (
+            <p>Loading...</p>
+          ) : (
+            events.map((event, index) => (
+              <UpcomingEvent event={event} key={index} />
+            ))
+          )}
         </div>
         <div className="mt-3 flex flex-row-reverse justify-center sm:justify-start">
           <CustomLink