Merge branch 'main' into issue-131-Upcoming_events_list_would_leak_unpublished_events

Author: laurenpudz

.github/workflows/ci-backend.yml

@@ -58,6 +58,7 @@ jobs:
         env:
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
+          API_ALLOWED_HOSTS: localhost
         run: poetry run python manage.py migrate
 
       - name: Run tests 🧪
@@ -66,6 +67,7 @@ jobs:
           JWT_SIGNING_KEY: NjMgNmYgNmQgNmQgNzUgNmUgNjkgNzQgNzkgNzMgNzAgNjkgNzIgNjkgNzQgNjYgNmYgNzUgNmUgNjQgNjEgNzQgNjkgNmYgNmU=
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
+          API_ALLOWED_HOSTS: localhost
         run: |
           poetry run python3 -m pip install coverage
           poetry run coverage run manage.py test

client/documentation/admin-dashboard/committee.md

@@ -0,0 +1,13 @@
+## Committee Members
+
+Profiles of the Committee Members of the club that are displayed on the about page.
+
+## Fields
+
+**Id:** Required and unique field for the club member that is on the committee. It is an integer field that corresponds to the raw integer id of a row in the Member table, as a Foreign Key if you know databases.
+
+**Role:** Required and unique field for the specific role in the committee that this member has. It is something known as an Enum (Enumeration), which has a discrete number of custom choices. You can choose from 'President', 'Vice President', 'Secretary', 'Treasurer', 'Marketing', 'Events OCM', 'Projects OCM', and 'Fresher Rep'. Since they must be unique, you can only have 8 objects in the Committee table at a time for now. This can definitely be changed in the future when the committee grows.
+
+## Other Notes
+
+Before making a Committee object in the Committee table, you must make a Member object for the person that's on the committee and then link it through the id (just to clarify)

client/documentation/admin-dashboard/games.md

@@ -0,0 +1,31 @@
+## Games
+
+Pages for games can be added and edited at the row 'Game' of the GAME_DEV section on the main admin page.
+
+### Fields
+
+**Name:** Required field for the game's name. A character field (includes letters, numbers and symbols) of maximum length 200 characters.
+
+**Descripiton:** Required field for the game's description. A text field.
+
+**Completion:** Required field for the game's completion. A multichoice option field with four options including:
+ - "Work in progress (Unplayable)"
+ - "Playable - In Development"
+ - "Beta - Stable but not Final"
+ - "Completed" 
+
+**Active:** Required field for if the game is continued to be being worked on. A boolean field.
+
+**Host URL:** Optional field for the game's host URL. A URL field with a maximum length 2083 characters
+
+**Itch Embed ID:** Optional field for game's embed. If the field is empty the game will display a custom embed ID at the bottom of the page. This value can be gotten from the itch.io page of the game, at the bottom of the page there is an embed button, clicking this will bring up a full embed, the only part needed is the 7 digit number after "https://itch.io/embed/".
+
+**Thumbnail:** Required field for the game's thumbnail. This image is displayed on the game page in place of a game embed or displayed within the game embed before the play button is pressed. Must be an image file.
+
+**Event:** Optional field for the event at which the game was created. Links the game to an event. Foreign key field for an event.
+
+**Itch Game Embed ID:** Optional field for the game's game embed. This ID allows the web version of a game to be played inside the site. This value can be acquired in two ways, either by the developer or through looking in the page source. A developer can get the value by going to the distribution tab of their game and going to the embed game section this will bring up a full embed for the game and the only part needed is the 8 digit number after "https://html-classic.itch.zone/html/". By looking through the page source that link can also be found either in a div or an iframe on the page depending on if the game has been played. **This value is not attainable if there is no web version of the game. hosted on itch.**
+
+**Itch Game Width:** Required field for the game's game embed. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "width=" and in the page source is found after "data-width=".
+
+**Itch Game Height:** Required field for the game's game embed. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "height=" and in the page source is found after "data-height=".

client/documentation/pages/about-committee.md

@@ -0,0 +1,11 @@
+## About/Committee Page
+
+Has a description of the club, it's aim's etc, along with a big feature photo, intended to be a group photo of the committee or a big event? Then below is a display of all the current committee members of the club, showing name, role and pronouns.
+
+## Hardcoded content to be modified by committee members
+
+The club description and feature photo are the only things hardcoded into the website's front-end. Starting from the root directory of this website's source, this code to modify can be found in /client/src/pages/about.tsx
+
+## Other Notes
+
+The Committee Members are always displayed in the same order on the about page, which is the order mentioned in admin-dashboard/committee.md. If a certain Committee object can't be retreived, a placeholder Committee Member portrait will be displayed to maintain the same order.

client/src/components/main/MemberProfile.tsx

@@ -1,15 +1,10 @@
 "use client";
 
+import { Palette, Sparkles } from "lucide-react";
 import Image from "next/image";
 import { SocialIcon } from "react-social-icons";
 
-// unused atm, as the member isnt linked a project on the backend
-/* export type MemberProfileProject = {
-  id: string;
-  name: string;
-  description?: string;
-  href?: string;
-}; */
+import MemberProjectSection from "../ui/MemberProjectSection";
 
 export type MemberProfileData = {
   name: string;
@@ -25,7 +20,6 @@ export type MemberProfileData = {
 
 type MemberProfileProps = {
   member: MemberProfileData;
-  //projects?: MemberProfileProject[];
 };
 
 function initialsFromName(name: string) {
@@ -55,7 +49,7 @@ export function MemberProfile({ member }: MemberProfileProps) {
                 />
               ) : (
                 <div className="flex h-full w-full items-center justify-center font-jersey10 text-5xl text-muted-foreground">
-                  {initials}
+                  <p className="mb-2"> {initials} </p>
                 </div>
               )}
             </div>
@@ -107,23 +101,16 @@ export function MemberProfile({ member }: MemberProfileProps) {
           </div>
         </div>
       </div>
-      {/* Template for Projects section */}
-      <div className="m-auto min-h-80 w-11/12">
-        <h2 className="mt-7 text-center font-jersey10 text-5xl">Projects</h2>
-        <div className="m-auto my-5 flex flex-wrap justify-center gap-8">
-          {/* Div below is a single project card */}
-          <div className="w-fit rounded-md p-5">
-            <div className="mb-2 h-44 w-96 overflow-clip rounded-md p-5 text-neutral_1">
-              {/* Image and/or Link to Project */}
-            </div>
-            <p className="max-w-96 font-firaCode text-xl font-semibold">
-              {/* Project Title */}
-            </p>
-            <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
-              {/* Project description */}
-            </p>
-          </div>
-        </div>
+      <div className="m-auto mb-10 min-h-80 w-11/12">
+        <h2 className="mt-7 flex justify-center text-center font-jersey10 text-5xl">
+          Games
+          <Sparkles size={32} className="ml-2 self-center text-yellow-300" />
+        </h2>
+        <MemberProjectSection id={window.location.pathname.slice(9)} />
+        <h2 className="mt-7 flex justify-center text-center font-jersey10 text-5xl">
+          Artwork
+          <Palette size={32} className="ml-2 self-center text-yellow-300" />
+        </h2>
       </div>
     </>
   );

client/src/components/ui/EventDateDisplay.tsx

@@ -0,0 +1,54 @@
+export type EventDateParts = {
+  weekday: string;
+  day: string;
+  month: string;
+  time: string;
+};
+
+/** Parses a date string and returns parts for separate styling. Returns null on invalid input. */
+export function getEventDateParts(dateString: string): EventDateParts | null {
+  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 null;
+  }
+}
+
+type EventDateDisplayProps = { date: string };
+
+/** Renders event date as: weekday・ day month・ time.  */
+export function EventDateDisplay({ date }: EventDateDisplayProps) {
+  const parts = getEventDateParts(date);
+  if (!parts) return null;
+  return (
+    <div className="flex flex-wrap items-baseline gap-x-1">
+      <span className="whitespace-nowrap text-primary">
+        {parts.weekday}
+        {"・"}
+      </span>
+      <span className="whitespace-nowrap text-primary">
+        {parts.day} {parts.month}
+        {"・"}
+      </span>
+      <span className="text-secondary">{parts.time}</span>
+    </div>
+  );
+}

client/src/components/ui/MemberProjectSection.tsx

@@ -0,0 +1,75 @@
+import { ArrowUpRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+import { useContributor } from "@/hooks/useContributor";
+
+type MemberProjectSectionProps = {
+  id: string;
+};
+
+export default function MemberProjectSection(props: MemberProjectSectionProps) {
+  const { data: games, isError, error } = useContributor(props.id);
+
+  {
+    /* Error handling from Games Showcase page */
+  }
+  if (isError) {
+    const errorMessage =
+      error?.response?.status === 404
+        ? "Games not found."
+        : "Failed to Load Games";
+    return (
+      <div className="mx-auto min-h-screen max-w-7xl px-6 py-16">
+        <p
+          className="my-10 text-center font-firaCode text-lg text-red-500"
+          role="alert"
+        >
+          {errorMessage}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-12">
+      {!games || games.length === 0 ? (
+        <p className="my-10 text-center font-firaCode text-lg text-[--light-3]">
+          No games available.
+        </p>
+      ) : (
+        <div className="m-auto my-5 flex flex-wrap justify-center gap-8">
+          {games.map((game) => (
+            <React.Fragment key={game.game_id}>
+              <div className="w-fit rounded-md p-5">
+                <div className="group mb-2 grid h-44 w-96 grid-cols-1 grid-rows-1 overflow-clip rounded-md">
+                  <Image
+                    src={game.game_data.thumbnail}
+                    alt={`${game.game_data.name} cover image`}
+                    width={384}
+                    height={176}
+                    className="group-hover:brightness-75 group-hover:duration-200"
+                  />
+                  <Link
+                    className="mb-16 hidden justify-self-center rounded-md bg-accent p-3 font-firaCode text-light_1 drop-shadow-md hover:underline group-hover:flex group-hover:blur-0 group-hover:duration-200"
+                    href="#"
+                    onClick={() => window.open(`/games/${game.game_id}`)}
+                  >
+                    Visit Game <ArrowUpRight className="ml-1" />
+                  </Link>
+                </div>
+                <p className="max-w-96 font-firaCode text-xl font-semibold">
+                  {game.game_data.name}
+                </p>
+                <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
+                  {game.game_data.description}
+                </p>
+              </div>
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/ui/eventCarousel.tsx

@@ -6,39 +6,14 @@ import { useEffect, useRef, useState } from "react";
 import { UiEvent as EventType } from "@/hooks/useEvents";
 
 import { Button } from "./button";
+import { EventDateDisplay } from "./EventDateDisplay";
 
 type EventCarouselProps = {
   items: EventType[];
 };
 
 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<HTMLAnchorElement>(null);
@@ -76,16 +51,15 @@ export default function EventCarousel({ items }: EventCarouselProps) {
 
   useEffect(() => {
     const updateVisibleCount = () => {
-      if (window.innerWidth < 768) {
-        setVisibleCount(1);
-      } else {
-        setVisibleCount(3);
-      }
+      const newVisibleCount = window.innerWidth < 768 ? 1 : 3;
+      const newMaxIndex = Math.max(0, items.length - newVisibleCount);
+      setVisibleCount(newVisibleCount);
+      setCurrentIndex((prev) => Math.min(prev, newMaxIndex));
     };
     updateVisibleCount();
     window.addEventListener("resize", updateVisibleCount);
     return () => window.removeEventListener("resize", updateVisibleCount);
-  }, []);
+  }, [items.length]);
 
   return (
     <div className="container mx-auto rounded-lg bg-primary-foreground px-4 py-8 lg:px-12">
@@ -124,7 +98,7 @@ export default function EventCarousel({ items }: EventCarouselProps) {
       )}
 
       <div className="mt-10 px-10">
-        <div ref={viewportRef} className="overflow-hidden">
+        <div ref={viewportRef} className="overflow-hidden px-2 md:px-4">
           <div
             className="flex transition-transform duration-300 ease-out"
             style={{
@@ -137,7 +111,7 @@ export default function EventCarousel({ items }: EventCarouselProps) {
                 href={`/events/${event.id}`}
                 key={event.id}
                 ref={index === 0 ? firstItemRef : undefined}
-                className={`block w-full flex-shrink-0 rounded-xl transition-transform duration-200 ease-in-out hover:scale-110 md:w-[calc((100%-80px)/3)] ${index === 0 ? "origin-left" : ""}`}
+                className={`block w-full flex-shrink-0 rounded-xl transition-transform duration-200 ease-in-out hover:scale-110 md:w-[calc((100%-80px)/3)] ${index === currentIndex ? "origin-left" : ""}`}
               >
                 <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
                   <Image
@@ -152,8 +126,8 @@ export default function EventCarousel({ items }: EventCarouselProps) {
                   {event.name}
                 </h3>
 
-                <p className="mb-4 text-sm text-primary">
-                  {formatEventDateDisplay(event.date)}
+                <p className="mb-4 text-base text-primary">
+                  <EventDateDisplay date={event.date} />
                 </p>
 
                 <div className="mt-3 w-full border-b border-white/20" />

client/src/hooks/useContributor.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+type ApiContributorGameData = {
+  name: string;
+  thumbnail: string;
+  description: string;
+};
+
+type ApiContributorGamesList = {
+  game_id: number;
+  role: string;
+  game_data: ApiContributorGameData;
+};
+
+export const useContributor = (member: string | string[] | undefined) => {
+  return useQuery<ApiContributorGamesList[], AxiosError>({
+    queryKey: ["contributor", member],
+    queryFn: async () => {
+      const response = await api.get(`/games/contributor/${member}/`);
+      return response.data;
+    },
+    enabled: !!member,
+  });
+};