From 7b36317e56b9e0c383f8112d727d3e8dadb80b9a Mon Sep 17 00:00:00 2001
From: Petr Kudryavtsev <pvkudr@gmail.com>
Date: Sat, 13 Dec 2025 07:37:48 +0000
Subject: [PATCH 1/5] initial changes: hook, backend and events page 1st
 version

---
 client/src/hooks/useEvents.ts     | 37 +++++++++++++
 client/src/pages/events/index.tsx | 88 +++++++++++++++++++++++++++++++
 server/game_dev/urls.py           |  3 +-
 server/game_dev/views.py          |  9 ++++
 4 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 client/src/hooks/useEvents.ts
 create mode 100644 client/src/pages/events/index.tsx

diff --git a/client/src/hooks/useEvents.ts b/client/src/hooks/useEvents.ts
new file mode 100644
index 0000000..2b1ab9d
--- /dev/null
+++ b/client/src/hooks/useEvents.ts
@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+type ApiEvent = {
+  id: number;
+  name: string;
+  description: string;
+  publicationDate: string;
+  date: string;
+  startTime: string | null;
+  location: string;
+  cover_image: string | null;
+};
+
+type UiEvent = Omit<ApiEvent, "cover_image"> & {
+  coverImage: string;
+};
+
+function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
+  return {
+    ...data,
+    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
+  };
+}
+
+export function useEvents() {
+  return useQuery<ApiEvent[], AxiosError, UiEvent[]>({
+    queryKey: ["events"],
+    queryFn: async () => {
+      const response = await api.get<ApiEvent[]>("/events/");
+      return response.data;
+    },
+    select: (data) => data.map(transformApiEventToUiEvent),
+  });
+}
diff --git a/client/src/pages/events/index.tsx b/client/src/pages/events/index.tsx
new file mode 100644
index 0000000..0a06cc1
--- /dev/null
+++ b/client/src/pages/events/index.tsx
@@ -0,0 +1,88 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { useEvents } from "@/hooks/useEvents";
+
+function formatDateTime(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-AU", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(date);
+  } catch {
+    return dateString;
+  }
+}
+
+export default function EventsPage() {
+  const { data: events, isPending, isError } = useEvents();
+
+  if (isPending) {
+    return (
+      <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
+        <p>Loading events...</p>
+      </main>
+    );
+  }
+
+  if (isError) {
+    return (
+      <main className="md:20 mx-auto min-h-dvh max-w-6xl px-6 py-16">
+        <p className="text-red-500" role="alert">
+          Failed to load events.
+        </p>
+      </main>
+    );
+  }
+
+  if (!events || events.length === 0) {
+    return (
+      <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
+        <h1 className="mb-8 font-jersey10 text-4xl text-primary">Events</h1>
+        <p>No events available.</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
+      <h1 className="mb-8 font-jersey10 text-4xl text-primary">Events</h1>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {events.map((event) => (
+          <Link
+            key={event.id}
+            href={`/events/${event.id}`}
+            className="group overflow-hidden rounded-lg bg-gray-800 transition-colors hover:bg-gray-700"
+          >
+            <div className="relative aspect-[4/3] w-full overflow-hidden bg-gray-700">
+              <Image
+                src={event.coverImage}
+                alt={`Cover image for ${event.name}`}
+                fill
+                className="object-cover transition-transform group-hover:scale-105"
+                onError={(e) => {
+                  e.currentTarget.src = "/game_dev_club_logo.svg";
+                }}
+              />
+            </div>
+            <div className="p-4">
+              <h2 className="mb-2 font-jersey10 text-2xl text-primary">
+                {event.name}
+              </h2>
+              <p className="mb-2 text-sm text-gray-400">
+                {formatDateTime(event.date)} · {event.location}
+              </p>
+              <p className="line-clamp-2 text-sm text-gray-300">
+                {event.description}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/server/game_dev/urls.py b/server/game_dev/urls.py
index e387e58..65b8180 100644
--- a/server/game_dev/urls.py
+++ b/server/game_dev/urls.py
@@ -1,6 +1,7 @@
 from django.urls import path
-from .views import EventDetailAPIView
+from .views import EventListAPIView, EventDetailAPIView
 
 urlpatterns = [
+    path("events/", EventListAPIView.as_view()),
     path("events/<int:id>/", EventDetailAPIView.as_view()),
 ]
diff --git a/server/game_dev/views.py b/server/game_dev/views.py
index 71a747c..9c717b0 100644
--- a/server/game_dev/views.py
+++ b/server/game_dev/views.py
@@ -6,6 +6,15 @@
 from .serializers import EventSerializer
 
 
+class EventListAPIView(generics.ListAPIView):
+    """
+    GET /api/events/
+    Returns a list of all events
+    """
+    queryset = Event.objects.all()
+    serializer_class = EventSerializer
+
+
 class EventDetailAPIView(generics.RetrieveAPIView):
     """
     GET /api/events/<id>/

From 90004317c6d246d63158832d15ff177bd3f8b7a7 Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <24513446@student.uwa.edu.au>
Date: Wed, 7 Jan 2026 08:00:08 +0000
Subject: [PATCH 2/5] Fix event fetch API to support filtering by type
 (past/upcoming)

---
 client/src/hooks/useEvents.ts     | 10 +++++++---
 client/src/pages/events/index.tsx | 19 +++++++++++++++++--
 server/game_dev/views.py          | 23 +++++++++++++++++++++--
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/client/src/hooks/useEvents.ts b/client/src/hooks/useEvents.ts
index 2b1ab9d..2cff78b 100644
--- a/client/src/hooks/useEvents.ts
+++ b/client/src/hooks/useEvents.ts
@@ -25,11 +25,15 @@ function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   };
 }
 
-export function useEvents() {
+export type EventTypeFilter = "past" | "upcoming";
+
+export function useEvents(type?: EventTypeFilter) {
   return useQuery<ApiEvent[], AxiosError, UiEvent[]>({
-    queryKey: ["events"],
+    queryKey: ["events", type ?? "all"],
     queryFn: async () => {
-      const response = await api.get<ApiEvent[]>("/events/");
+      const response = await api.get<ApiEvent[]>("/events/", {
+        params: type ? { type } : {},
+      });
       return response.data;
     },
     select: (data) => data.map(transformApiEventToUiEvent),
diff --git a/client/src/pages/events/index.tsx b/client/src/pages/events/index.tsx
index 0a06cc1..c22a66c 100644
--- a/client/src/pages/events/index.tsx
+++ b/client/src/pages/events/index.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
-import { useEvents } from "@/hooks/useEvents";
+import { EventTypeFilter,useEvents } from "@/hooks/useEvents";
 
 function formatDateTime(dateString: string): string {
   try {
@@ -19,7 +20,20 @@ function formatDateTime(dateString: string): string {
 }
 
 export default function EventsPage() {
-  const { data: events, isPending, isError } = useEvents();
+  const router = useRouter();
+
+  const typeParam = router.query.type;
+  const type =
+    typeof typeParam === "string" &&
+    (typeParam === "past" || typeParam === "upcoming")
+      ? (typeParam as EventTypeFilter)
+      : undefined;
+
+  const {
+    data: events,
+    isPending,
+    isError,
+  } = useEvents(router.isReady ? type : undefined);
 
   if (isPending) {
     return (
@@ -51,6 +65,7 @@ export default function EventsPage() {
   return (
     <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
       <h1 className="mb-8 font-jersey10 text-4xl text-primary">Events</h1>
+
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         {events.map((event) => (
           <Link
diff --git a/server/game_dev/views.py b/server/game_dev/views.py
index 9c717b0..c79e61a 100644
--- a/server/game_dev/views.py
+++ b/server/game_dev/views.py
@@ -4,16 +4,35 @@
 from rest_framework import generics
 from .models import Event
 from .serializers import EventSerializer
+from django.utils import timezone
+from rest_framework.exceptions import ValidationError
 
 
 class EventListAPIView(generics.ListAPIView):
     """
     GET /api/events/
-    Returns a list of all events
+    Returns a list of events (optionally filtered by time)
     """
-    queryset = Event.objects.all()
     serializer_class = EventSerializer
 
+    def get_queryset(self):
+        qs = Event.objects.all()
+        type_param = self.request.query_params.get("type")
+
+        now = timezone.now()
+
+        if type_param is None or type_param == "":
+            return qs.order_by("date")
+
+        if type_param == "past":
+            return qs.filter(date__lt=now).order_by("-date")
+
+        if type_param == "upcoming":
+            return qs.filter(date__gte=now).order_by("date")
+
+        raise ValidationError(
+            {"type": "Invalid value. Use 'past' or 'upcoming'."})
+
 
 class EventDetailAPIView(generics.RetrieveAPIView):
     """

From 44b8482e36f0dc76181c298abb52bc669fed16ff Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <24513446@student.uwa.edu.au>
Date: Fri, 9 Jan 2026 05:15:52 +0000
Subject: [PATCH 3/5] Creating a toggle that can be used to switch between
 viewing past and future events

---
 client/src/pages/events/index.tsx | 176 +++++++++++++++++++++++-------
 1 file changed, 138 insertions(+), 38 deletions(-)

diff --git a/client/src/pages/events/index.tsx b/client/src/pages/events/index.tsx
index c22a66c..47987f7 100644
--- a/client/src/pages/events/index.tsx
+++ b/client/src/pages/events/index.tsx
@@ -2,23 +2,60 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { EventTypeFilter,useEvents } from "@/hooks/useEvents";
+import { EventTypeFilter, useEvents } from "@/hooks/useEvents";
 
-function formatDateTime(dateString: string): string {
+function formatTimeOnly(dateString: string): string {
   try {
     const date = new Date(dateString);
     return new Intl.DateTimeFormat("en-AU", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "2-digit",
+      hour: "numeric",
       minute: "2-digit",
     }).format(date);
   } catch {
-    return dateString;
+    return "";
   }
 }
 
+function formatMonthShort(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-AU", { month: "short" }).format(date);
+  } catch {
+    return "";
+  }
+}
+
+function formatDay2(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return String(date.getDate()).padStart(2, "0");
+  } catch {
+    return "";
+  }
+}
+
+function formatYear(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return String(date.getFullYear());
+  } catch {
+    return "";
+  }
+}
+
+type EventsByYear<T> = Record<number, T[]>;
+
+function groupEventsByYear<T extends { date: string }>(
+  events: T[],
+): EventsByYear<T> {
+  return events.reduce((acc, event) => {
+    const year = new Date(event.date).getFullYear();
+    if (!acc[year]) acc[year] = [];
+    acc[year].push(event);
+    return acc;
+  }, {} as EventsByYear<T>);
+}
+
 export default function EventsPage() {
   const router = useRouter();
 
@@ -62,42 +99,105 @@ export default function EventsPage() {
     );
   }
 
+  const eventsByYear = groupEventsByYear(events);
+  const sortedYears = Object.keys(eventsByYear)
+    .map(Number)
+    .sort((a, b) => b - a);
+
   return (
     <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
       <h1 className="mb-8 font-jersey10 text-4xl text-primary">Events</h1>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {events.map((event) => (
-          <Link
-            key={event.id}
-            href={`/events/${event.id}`}
-            className="group overflow-hidden rounded-lg bg-gray-800 transition-colors hover:bg-gray-700"
-          >
-            <div className="relative aspect-[4/3] w-full overflow-hidden bg-gray-700">
-              <Image
-                src={event.coverImage}
-                alt={`Cover image for ${event.name}`}
-                fill
-                className="object-cover transition-transform group-hover:scale-105"
-                onError={(e) => {
-                  e.currentTarget.src = "/game_dev_club_logo.svg";
-                }}
-              />
-            </div>
-            <div className="p-4">
-              <h2 className="mb-2 font-jersey10 text-2xl text-primary">
-                {event.name}
-              </h2>
-              <p className="mb-2 text-sm text-gray-400">
-                {formatDateTime(event.date)} · {event.location}
-              </p>
-              <p className="line-clamp-2 text-sm text-gray-300">
-                {event.description}
-              </p>
-            </div>
-          </Link>
-        ))}
+      <div className="mb-10 flex w-fit overflow-hidden rounded-md border border-gray-600">
+        <button
+          type="button"
+          onClick={() => router.push("/events?type=past")}
+          className={`px-6 py-2 text-sm font-medium transition-colors ${
+            type === "past"
+              ? "bg-white text-black"
+              : "bg-transparent text-gray-300 hover:bg-gray-700"
+          }`}
+        >
+          Past
+        </button>
+        <button
+          type="button"
+          onClick={() => router.push("/events?type=upcoming")}
+          className={`px-6 py-2 text-sm font-medium transition-colors ${
+            type === "upcoming"
+              ? "bg-white text-black"
+              : "bg-transparent text-gray-300 hover:bg-gray-700"
+          }`}
+        >
+          Upcoming
+        </button>
       </div>
+
+      {sortedYears.map((year) => (
+        <section key={year} className="mb-14">
+          <h2 className="mb-6 text-2xl tracking-wide text-gray-200">{year}</h2>
+
+          <div className="flex flex-col gap-6">
+            {eventsByYear[year].map((event) => (
+              <Link
+                key={event.id}
+                href={`/events/${event.id}`}
+                className="group block overflow-hidden rounded-lg border border-gray-700 bg-gray-800 transition-colors hover:bg-gray-700"
+              >
+                <div className="flex flex-col md:flex-row">
+                  <div className="flex items-stretch md:w-28 md:flex-col md:justify-center md:border-r md:border-gray-700">
+                    <div className="flex w-full items-center justify-between px-4 py-3 md:flex-col md:gap-1 md:py-6">
+                      <span className="text-sm text-gray-400">
+                        {formatMonthShort(event.date)}
+                      </span>
+                      <span className="font-jersey10 text-3xl text-primary">
+                        {formatDay2(event.date)}
+                      </span>
+                      <span className="text-sm text-gray-400">
+                        {formatYear(event.date)}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="relative h-56 w-full overflow-hidden bg-gray-700 md:h-auto md:w-[360px] md:flex-shrink-0">
+                    <Image
+                      src={event.coverImage}
+                      alt={`Cover image for ${event.name}`}
+                      fill
+                      className="object-cover transition-transform duration-300 group-hover:scale-105"
+                      onError={(e) => {
+                        e.currentTarget.src = "/game_dev_club_logo.svg";
+                      }}
+                    />
+                  </div>
+
+                  <div className="flex flex-1 flex-col gap-2 p-5">
+                    <h3 className="font-jersey10 text-3xl text-primary">
+                      {event.name}
+                    </h3>
+
+                    <p className="text-sm text-gray-300">
+                      <span className="font-semibold text-gray-200">Time:</span>{" "}
+                      {formatTimeOnly(event.date)}
+                    </p>
+
+                    <p className="text-sm text-gray-300">
+                      <span className="font-semibold text-gray-200">
+                        Location:
+                      </span>{" "}
+                      {event.location}
+                    </p>
+
+                    <p className="mt-2 max-w-2xl text-sm leading-relaxed text-gray-200">
+                      {event.description}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      ))}
     </main>
   );
 }

From 7b13adde3b00640de6e9e3be8f43230100c8678e Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <24513446@student.uwa.edu.au>
Date: Fri, 9 Jan 2026 13:52:37 +0000
Subject: [PATCH 4/5] Layout Adjustment

---
 client/src/components/main/Navbar.tsx |   2 +-
 client/src/pages/events/index.tsx     | 165 +++++++++++---------------
 2 files changed, 73 insertions(+), 94 deletions(-)

diff --git a/client/src/components/main/Navbar.tsx b/client/src/components/main/Navbar.tsx
index b25a62b..faf8bfe 100644
--- a/client/src/components/main/Navbar.tsx
+++ b/client/src/components/main/Navbar.tsx
@@ -18,7 +18,7 @@ export default function Navbar() {
 
   return (
     <>
-      <header className="sticky top-0 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
+      <header className="sticky top-0 z-50 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
         <Link
           href="/"
           className="flex flex-none items-center gap-3 text-2xl md:mr-5"
diff --git a/client/src/pages/events/index.tsx b/client/src/pages/events/index.tsx
index 47987f7..3adc401 100644
--- a/client/src/pages/events/index.tsx
+++ b/client/src/pages/events/index.tsx
@@ -4,40 +4,26 @@ import { useRouter } from "next/router";
 
 import { EventTypeFilter, useEvents } from "@/hooks/useEvents";
 
-function formatTimeOnly(dateString: string): string {
+function formatDateTimeLine(dateString: string): string {
   try {
     const date = new Date(dateString);
-    return new Intl.DateTimeFormat("en-AU", {
-      hour: "numeric",
-      minute: "2-digit",
-    }).format(date);
-  } catch {
-    return "";
-  }
-}
 
-function formatMonthShort(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return new Intl.DateTimeFormat("en-AU", { month: "short" }).format(date);
-  } catch {
-    return "";
-  }
-}
+    const d = new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    }).format(date);
 
-function formatDay2(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return String(date.getDate()).padStart(2, "0");
-  } catch {
-    return "";
-  }
-}
+    const t = new Intl.DateTimeFormat("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    })
+      .format(date)
+      .replace("AM", "am")
+      .replace("PM", "pm");
 
-function formatYear(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return String(date.getFullYear());
+    return `${d} ・ ${t}`;
   } catch {
     return "";
   }
@@ -133,71 +119,64 @@ export default function EventsPage() {
         </button>
       </div>
 
-      {sortedYears.map((year) => (
-        <section key={year} className="mb-14">
-          <h2 className="mb-6 text-2xl tracking-wide text-gray-200">{year}</h2>
-
-          <div className="flex flex-col gap-6">
-            {eventsByYear[year].map((event) => (
-              <Link
-                key={event.id}
-                href={`/events/${event.id}`}
-                className="group block overflow-hidden rounded-lg border border-gray-700 bg-gray-800 transition-colors hover:bg-gray-700"
-              >
-                <div className="flex flex-col md:flex-row">
-                  <div className="flex items-stretch md:w-28 md:flex-col md:justify-center md:border-r md:border-gray-700">
-                    <div className="flex w-full items-center justify-between px-4 py-3 md:flex-col md:gap-1 md:py-6">
-                      <span className="text-sm text-gray-400">
-                        {formatMonthShort(event.date)}
-                      </span>
-                      <span className="font-jersey10 text-3xl text-primary">
-                        {formatDay2(event.date)}
-                      </span>
-                      <span className="text-sm text-gray-400">
-                        {formatYear(event.date)}
-                      </span>
-                    </div>
-                  </div>
-
-                  <div className="relative h-56 w-full overflow-hidden bg-gray-700 md:h-auto md:w-[360px] md:flex-shrink-0">
-                    <Image
-                      src={event.coverImage}
-                      alt={`Cover image for ${event.name}`}
-                      fill
-                      className="object-cover transition-transform duration-300 group-hover:scale-105"
-                      onError={(e) => {
-                        e.currentTarget.src = "/game_dev_club_logo.svg";
-                      }}
-                    />
-                  </div>
-
-                  <div className="flex flex-1 flex-col gap-2 p-5">
-                    <h3 className="font-jersey10 text-3xl text-primary">
-                      {event.name}
-                    </h3>
-
-                    <p className="text-sm text-gray-300">
-                      <span className="font-semibold text-gray-200">Time:</span>{" "}
-                      {formatTimeOnly(event.date)}
-                    </p>
-
-                    <p className="text-sm text-gray-300">
-                      <span className="font-semibold text-gray-200">
-                        Location:
-                      </span>{" "}
-                      {event.location}
-                    </p>
-
-                    <p className="mt-2 max-w-2xl text-sm leading-relaxed text-gray-200">
-                      {event.description}
-                    </p>
-                  </div>
+      <div className="flex flex-col gap-14">
+        {sortedYears.map((year) => (
+          <section key={year}>
+            <div className="flex gap-6 md:gap-10">
+              <div className="relative w-14 flex-shrink-0 md:w-20">
+                <div className="text-2xl font-semibold text-gray-200 md:text-3xl">
+                  {year}
                 </div>
-              </Link>
-            ))}
-          </div>
-        </section>
-      ))}
+                <div
+                  aria-hidden="true"
+                  className="absolute bottom-0 left-2 top-12 w-px bg-gray-600/60 md:left-4"
+                />
+              </div>
+
+              <div className="flex min-w-0 flex-1 flex-col gap-6">
+                {eventsByYear[year].map((event) => (
+                  <Link
+                    key={event.id}
+                    href={`/events/${event.id}`}
+                    className="group block overflow-hidden rounded-xl border border-indigo-300/30 bg-gray-950/30 shadow-[0_0_0_1px_rgba(99,102,241,0.10)] transition-colors hover:bg-gray-950/45"
+                  >
+                    <div className="flex flex-col md:flex-row">
+                      <div className="flex min-w-0 flex-1 flex-col gap-4 px-8 py-7">
+                        <h3 className="min-w-0 font-jersey10 text-4xl text-white md:text-5xl">
+                          <span className="block truncate">{event.name}</span>
+                        </h3>
+
+                        <div className="space-y-1 text-sm md:text-base">
+                          <div className="text-primary">
+                            {formatDateTimeLine(event.date)}
+                          </div>
+                          <div className="text-primary">{event.location}</div>
+                        </div>
+
+                        <p className="max-w-3xl text-sm leading-relaxed text-gray-200/90 md:text-base">
+                          {event.description}
+                        </p>
+                      </div>
+
+                      <div className="relative h-56 w-full flex-shrink-0 border-t border-indigo-300/20 md:h-auto md:w-80 md:border-l md:border-t-0">
+                        <Image
+                          src={event.coverImage}
+                          alt={`Cover image for ${event.name}`}
+                          fill
+                          className="object-cover transition-transform duration-300 group-hover:scale-105"
+                          onError={(e) => {
+                            e.currentTarget.src = "/game_dev_club_logo.svg";
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </section>
+        ))}
+      </div>
     </main>
   );
 }

From 38d492795a314d71d85814968325c4c49bfc85b0 Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <24513446@student.uwa.edu.au>
Date: Wed, 14 Jan 2026 09:33:43 +0000
Subject: [PATCH 5/5] Added test code for event list  API

---
 server/game_dev/tests.py | 60 ++++++++++++++++++++++++++++++++++++++++
 server/game_dev/urls.py  |  2 +-
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/server/game_dev/tests.py b/server/game_dev/tests.py
index 411a639..7bcdefe 100644
--- a/server/game_dev/tests.py
+++ b/server/game_dev/tests.py
@@ -3,6 +3,7 @@
 import datetime
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.utils import timezone
+from django.urls import reverse
 
 
 class MemberModelTest(TestCase):
@@ -70,3 +71,62 @@ def test_event_date_is_datetime(self):
     def test_event_datetime_matches(self):
         event = Event.objects.get(pk=self.event.pk)
         self.assertEqual(event.date, self.event_datetime)
+
+
+class EventListAPITest(TestCase):
+    def setUp(self):
+        self.url = reverse("events-list")
+
+        now = timezone.now()
+
+        self.past_old = Event.objects.create(
+            name="Past Old Event",
+            date=now - datetime.timedelta(days=30),
+            description="past old",
+            publicationDate=now.date(),
+            location="Perth",
+        )
+        self.past_new = Event.objects.create(
+            name="Old Event2",
+            date=now - datetime.timedelta(days=1),
+            description="past new",
+            publicationDate=now.date(),
+            location="Perth",
+        )
+        self.up_soon = Event.objects.create(
+            name="Upcoming Soon",
+            date=now + datetime.timedelta(days=1),
+            description="up soon 1 day",
+            publicationDate=now.date(),
+            location="Perth",
+        )
+        self.up_later = Event.objects.create(
+            name="Upcoming Later",
+            date=now + datetime.timedelta(days=30),
+            description="up later",
+            publicationDate=now.date(),
+            location="Perth",
+        )
+
+    def _ids(self, resp_json):
+        return [item["id"] for item in resp_json]
+
+    def test_past(self):
+        res = self.client.get(self.url, {"type": "past"})
+        self.assertEqual(res.status_code, 200)
+
+        ids = self._ids(res.json())
+
+        self.assertEqual(ids, [self.past_new.id, self.past_old.id])
+
+    def test_upcoming(self):
+        res = self.client.get(self.url, {"type": "upcoming"})
+        self.assertEqual(res.status_code, 200)
+
+        ids = self._ids(res.json())
+
+        self.assertEqual(ids, [self.up_soon.id, self.up_later.id])
+
+    def test_invalid_type(self):
+        res = self.client.get(self.url, {"type": "invalid"})
+        self.assertEqual(res.status_code, 400)
diff --git a/server/game_dev/urls.py b/server/game_dev/urls.py
index 65b8180..d42d6a8 100644
--- a/server/game_dev/urls.py
+++ b/server/game_dev/urls.py
@@ -2,6 +2,6 @@
 from .views import EventListAPIView, EventDetailAPIView
 
 urlpatterns = [
-    path("events/", EventListAPIView.as_view()),
+    path("events/", EventListAPIView.as_view(), name="events-list"),
     path("events/<int:id>/", EventDetailAPIView.as_view()),
 ]