1st version

Author: pvkudr

client/public/game_event_poster.png

@@ -11,6 +11,32 @@ type EventCarouselProps = {
 
 const GAP = 40;
 
+function formatEventDateDisplay(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    const weekday = new Intl.DateTimeFormat("en-US", {
+      weekday: "long",
+    }).format(date);
+    const day = new Intl.DateTimeFormat("en-US", { day: "numeric" }).format(
+      date,
+    );
+    const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+      date,
+    );
+    const time = new Intl.DateTimeFormat("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    })
+      .format(date)
+      .replace("AM", "am")
+      .replace("PM", "pm");
+    return `${weekday} ${day} ${month} ${time}`;
+  } catch {
+    return "";
+  }
+}
+
 export default function EventCarousel({ items }: EventCarouselProps) {
   const viewportRef = useRef<HTMLDivElement>(null);
   const firstItemRef = useRef<HTMLDivElement>(null);
@@ -111,7 +137,7 @@ export default function EventCarousel({ items }: EventCarouselProps) {
 
                 {/* Needs proper processing and laying out */}
                 <p className="text-sm tracking-wide text-white/70">
-                  {event.startTime}
+                  {formatEventDateDisplay(event.date)}
                 </p>
 
                 <div className="mt-3 w-full border-b border-white/20" />

client/src/components/ui/eventCarousel.tsx

@@ -18,10 +18,11 @@ export type UiEvent = Omit<ApiEvent, "cover_image"> & {
   coverImage: string;
 };
 
+// TODO: replace "/game_event_poster.png" with "/game_dev_club_logo.svg" after tests
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
+    coverImage: data.cover_image ?? "/game_event_poster.png",
   };
 }
 

client/src/hooks/useEvents.ts

@@ -6,11 +6,21 @@ import {
   EventHighlightCard,
   eventHighlightCardType,
 } from "@/components/ui/eventHighlightCard";
-import { placeholderEvents, placeholderGames } from "@/placeholderData";
+import { UiEvent, useEvents } from "@/hooks/useEvents";
+import { placeholderGames } from "@/placeholderData";
 
 import { Button } from "../components/ui/button";
 
 export default function Landing() {
+  const { data, isPending, isError } = useEvents({
+    type: "upcoming",
+    pageSize: 100,
+  });
+  // TODO: remove this after testing
+  console.log("data =", data);
+
+  const events: UiEvent[] | undefined = data?.items;
+
   const gameLogoImages = [
     { url: "/godot.png", alt: "Godot Logo", position: "start" },
     { url: "/unity-logo.png", alt: "Unity Logo", position: "end" },
@@ -137,7 +147,7 @@ export default function Landing() {
       </section>
 
       <section className="bg-background px-10 py-20">
-        <EventCarousel items={placeholderEvents} />
+        {!isPending && !isError && <EventCarousel items={events ?? []} />}
       </section>
       {/* Leaving commented out until styling/design is confirmed. */}
       {/* <section className="bg-background px-4 py-10 md:px-10">
@@ -146,7 +156,7 @@ export default function Landing() {
             title="So... How do I get involved?"
             text="The easiest way to get involved is to come along to one of our events!"
           />
-        </div>
+        </div>1
       </section> */}
 
       <section className="relative w-full overflow-hidden bg-dark_3 px-6 py-20 lg:px-12">