Display upcoming events under calendar (#150)

prisma/migrations/20250128101452_cascading_news_event_deletions/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "Event" DROP CONSTRAINT "Event_newsPostId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "Event" ADD CONSTRAINT "Event_newsPostId_fkey" FOREIGN KEY ("newsPostId") REFERENCES "NewsPost"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -79,7 +79,7 @@ model Event {
   location      String?
   createdAt     DateTime  @default(now())
   updatedAt     DateTime  @updatedAt
-  NewsPost      NewsPost? @relation(fields: [newsPostId], references: [id])
+  NewsPost      NewsPost? @relation(fields: [newsPostId], references: [id], onDelete: Cascade)
   newsPostId    Int?
 }
 

src/components/Calendar/Calendar.module.scss

@@ -0,0 +1,33 @@
+.eventsList {
+  list-style-type: none;
+}
+
+.centered {
+  display: flex;
+  flex-direction: column;
+}
+
+.upcomingEventsTitle {
+  margin-top: 0.4rem;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+}
+
+.ongoingText,
+.ongoingBullet {
+  font-size: var(--text-small);
+  font-weight: normal;
+}
+
+.ongoingText {
+  color: var(--link-color);
+}
+
+.upcomingEventTitle {
+  margin-top: 0.3rem;
+  font-size: var(--text-normal);
+}
+
+.upcomingEventDetails {
+  font-size: var(--text-small);
+}

src/components/Calendar/Calendar.scss

@@ -55,8 +55,3 @@
   }
   padding-bottom: 0.5rem;
 }
-
-.centered {
-  display: flex;
-  flex-direction: column;
-}

src/components/Calendar/Calendar.tsx

@@ -4,13 +4,16 @@ import ActionLink from '../ActionButton/ActionLink';
 import CalendarClient from './CalendarClient';
 import i18nService from '@/services/i18nService';
 import { getAllEvents } from '@/actions/events';
+import styles from './Calendar.module.scss';
+import EventService from '@/services/eventService';
 
 const Calendar = async ({ locale }: { locale: string }) => {
   const l = i18nService.getLocale(locale);
   const events = await getAllEvents();
+  const nextEvents = await EventService.getUpcoming(3);
 
   return (
-    <ContentPane className="centered">
+    <ContentPane className={styles.centered}>
       <h1>{l.events.events}</h1>
       <Divider />
       <CalendarClient locale={locale} events={events} />
@@ -20,6 +23,33 @@ const Calendar = async ({ locale }: { locale: string }) => {
       >
         {l.events.subscribe}
       </ActionLink>
+      <h1 className={styles.upcomingEventsTitle}>{l.events.comingEvents}</h1>
+      <ul className={styles.eventsList}>
+        {nextEvents.map((event) => {
+          const ongoing = event.startTime < new Date();
+          return (
+            <li key={event.id}>
+              <h2 className={styles.upcomingEventTitle}>
+                {l.en ? event.titleEn : event.titleSv}
+                {ongoing && (
+                  <>
+                    <span className={styles.ongoingBullet}> &bull; </span>
+                    <span className={styles.ongoingText}>
+                      {l.events.ongoing}
+                    </span>
+                  </>
+                )}
+              </h2>
+              <p className={styles.upcomingEventDetails}>
+                {i18nService.formatDate(event.startTime, true)} -{' '}
+                {i18nService.formatTime(event.endTime)}
+                {event.location && ' • ' + event.location}
+              </p>
+            </li>
+          );
+        })}
+        {nextEvents.length === 0 && <p>{l.events.noEvents}</p>}
+      </ul>
     </ContentPane>
   );
 };

src/dictionaries/en.json

@@ -99,14 +99,17 @@
   },
   "events": {
     "events": "Events",
+    "noEvents": "No events to show",
     "start": "Start",
     "end": "End",
     "fullDay": "Full day",
     "location": "Location",
     "add": "Add event",
     "remove": "Remove event",
     "empty": "No events connected",
-    "subscribe": "Subscribe"
+    "subscribe": "Subscribe",
+    "comingEvents": "Coming Events",
+    "ongoing": "Ongoing"
   },
   "groups": {
     "members": "Current members",

src/dictionaries/sv.json

@@ -99,14 +99,17 @@
   },
   "events": {
     "events": "Evenemang",
+    "noEvents": "Inga evenemang att visa",
     "start": "Start",
     "end": "Slut",
     "fullDay": "Heldag",
     "location": "Plats",
     "add": "Lägg till evenemang",
     "remove": "Ta bort evenemang",
     "empty": "Inga evenemang kopplade",
-    "subscribe": "Prenumerera"
+    "subscribe": "Prenumerera",
+    "comingEvents": "Kommande evenemang",
+    "ongoing": "Pågående"
   },
   "groups": {
     "members": "Nuvarande medlemmar",

src/services/eventService.ts

@@ -5,6 +5,21 @@ export default class EventService {
     return new Date(d).setHours(0, 0, 0, 0) - d.getTimezoneOffset() * 60 * 1000;
   }
 
+  static async getUpcoming(max: number = 3) {
+    const now = new Date();
+    return await prisma.event.findMany({
+      where: {
+        endTime: {
+          gt: now
+        }
+      },
+      orderBy: {
+        startTime: 'asc'
+      },
+      take: max
+    });
+  }
+
   static async getAll() {
     return await prisma.event.findMany();
   }