Merge pull request #139 from codersforcauses/issue-108-add_workshop_URL_field_to_events

Issue 108 - Add Workshop URL Field

Author: laurenpudz

client/src/components/ui/EventDateDisplay.tsx

@@ -32,20 +32,31 @@ export function getEventDateParts(dateString: string): EventDateParts | null {
   }
 }
 
+const getOrdinal = (d: number) => {
+  if (d > 3 && d < 21) return `${d}th`;
+  switch (d % 10) {
+    case 1:
+      return `${d}st`;
+    case 2:
+      return `${d}nd`;
+    case 3:
+      return `${d}rd`;
+    default:
+      return `${d}th`;
+  }
+};
+
 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}
+    <div className="flex flex-wrap items-baseline gap-x-1 font-firaCode">
+      <span className="whitespace-nowrap text-primary">{parts.weekday},</span>
+      <span className="whitespace-nowrap font-medium text-primary">
+        {getOrdinal(parseInt(parts.day))} {parts.month}
         {"・"}
       </span>
       <span className="text-secondary">{parts.time}</span>

client/src/hooks/useEvent.ts

@@ -11,10 +11,11 @@ type ApiEvent = {
   date: string;
   startTime: string | null;
   location: string;
-  cover_image: string | null;
+  coverImage: string | null;
+  workshopLink: string;
 };
 
-type UiEvent = Omit<ApiEvent, "cover_image"> & {
+type UiEvent = Omit<ApiEvent, "coverImage"> & {
   coverImage: string;
 };
 
@@ -32,7 +33,7 @@ function normalizeEventId(
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
+    coverImage: data.coverImage ?? "/game_dev_club_logo.svg",
   };
 }
 

client/src/hooks/useEvents.ts

@@ -10,17 +10,19 @@ type ApiEvent = {
   publicationDate: string;
   date: string;
   location: string;
-  cover_image: string | null;
+  coverImage: string | null;
+  workshopLink: string;
 };
 
-export type UiEvent = Omit<ApiEvent, "cover_image"> & {
+export type UiEvent = Omit<ApiEvent, "coverImage"> & {
   coverImage: string;
+  workshopLink: string;
 };
 
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
+    coverImage: data.coverImage ?? "/game_dev_club_logo.svg",
   };
 }
 

client/src/pages/events/[id].tsx

@@ -58,10 +58,25 @@ export default function EventPage() {
           <p className="mt-6 text-lg">
             <EventDateDisplay date={event.date} />
           </p>
-          <div className="text-primary">{event.location} </div>
+          <div className="font-firaCode text-sm text-primary">
+            {event.location}{" "}
+          </div>
           <p className="mt-4 max-w-lg text-base leading-relaxed">
             {event.description}
           </p>
+          {event.workshopLink && (
+            <p className="mt-4 font-firaCode">
+              <span className="font-medium text-primary">Workshop link:</span>{" "}
+              <a
+                href={event.workshopLink}
+                target="_blank"
+                rel="noreferrer"
+                className="underline"
+              >
+                {event.workshopLink}
+              </a>
+            </p>
+          )}
         </div>
         <div className="lg:w-128 relative aspect-[4/3] w-full flex-shrink-0 overflow-hidden rounded-lg bg-gray-700 md:w-96">
           <Image

server/game_dev/migrations/0029_rename_cover_image_event_coverimage_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.15 on 2026-03-01 05:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0028_alter_game_hosturl'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='event',
+            old_name='cover_image',
+            new_name='coverImage',
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='workshopLink',
+            field=models.URLField(blank=True, max_length=2083),
+        ),
+    ]

server/game_dev/models.py

@@ -17,8 +17,9 @@ class Event(models.Model):
     date = models.DateTimeField()
     description = models.CharField(max_length=256, blank=True)
     publicationDate = models.DateField()
-    cover_image = models.ImageField(upload_to="events/", null=True)
+    coverImage = models.ImageField(upload_to="events/", null=True)
     location = models.CharField(max_length=256)
+    workshopLink = models.URLField(max_length=2083, blank=True)
 
     def __str__(self):
         return self.name

server/game_dev/serializers.py

@@ -11,8 +11,9 @@ class Meta:
             "date",
             "description",
             "publicationDate",
-            "cover_image",
+            "coverImage",
             "location",
+            "workshopLink",
         ]
 
 

server/game_dev/tests.py

@@ -44,8 +44,9 @@ def setUp(self):
             date=self.event_datetime,
             description="Yayayyayayay!",
             publicationDate=self.pub_date,
-            cover_image=image_file,
+            coverImage=image_file,
             location="Ezone",
+            workshopLink="https://example.com/workshop",
         )
 
     def test_publication_date_is_date(self):
@@ -57,10 +58,10 @@ def test_publication_date_matches(self):
         self.assertEqual(event.publicationDate, self.pub_date)
 
     def test_cover_image_not_empty(self):
-        self.assertIsNotNone(self.event.cover_image)
+        self.assertIsNotNone(self.event.coverImage)
 
     def test_cover_image_is_saved_in_correct_folder(self):
-        self.assertTrue(self.event.cover_image.name.startswith("events/"))
+        self.assertTrue(self.event.coverImage.name.startswith("events/"))
 
     def test_publication_date_not_empty(self):
         self.assertTrue(bool(self.event.publicationDate))
@@ -73,6 +74,10 @@ def test_event_datetime_matches(self):
         event = Event.objects.get(pk=self.event.pk)
         self.assertEqual(event.date, self.event_datetime)
 
+    def test_workshop_link_matches(self):
+        event = Event.objects.get(pk=self.event.pk)
+        self.assertEqual(event.workshopLink, "https://example.com/workshop")
+
 
 class CommitteeModelTest(TestCase):
     def setUp(self):