refactor: Update infoscreen component structure

- Renamed `kanttiinit-combined` to just `kanttiinit`
- Combined kanttiinit helper functions to `kanttiinit/fetcher.ts`
- Moved locale handling to kanttiinit React component
- Combined `hsl-schedules-combined` and `hsl-schedule` to `hsl-schedules`
- Update event grouping week logic on infoscreen
- Revert the change to NEXT_PUBLIC_ILMOMASIINA_URL
- Revert moving of `globals.css`

.env.example

@@ -26,9 +26,6 @@ PUBLIC_PRODUCTION_URL="https://tietokilta.fi"
 PUBLIC_LEGACY_URL="https://old.tietokilta.fi"
 NEXT_PUBLIC_LASKUGENERAATTORI_URL="https://laskutus.tietokilta.fi"
 
-# New version, required by Infoscreen
-NEXT_PUBLIC_ILMOMASIINA_URL="https://ilmo.tietokilta.fi"
-
 MAILGUN_SENDER=""
 MAILGUN_RECEIVER=""
 MAILGUN_API_KEY=""

apps/web/src/app/[locale]/(infoscreen)/infoscreen/layout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 // eslint-disable-next-line camelcase -- Roboto_Mono name is set by next/font
 import { Inter, Roboto_Mono } from "next/font/google";
 import { cn } from "../../../../lib/utils.ts";
-import "../../../globals.css";
+import "../../globals.css";
 import { InfoScreenHeader } from "../../../../components/infoscreen/infoscreen-header/index.tsx";
 
 const inter = Inter({

apps/web/src/app/[locale]/(infoscreen)/infoscreen/page.tsx

@@ -1,5 +1,5 @@
-import { HSLcombinedSchedule } from "../../../../components/infoscreen/hsl-schedules-combined";
-import { KanttiinitCombined } from "../../../../components/infoscreen/kanttiinit-combined";
+import { HSLcombinedSchedule } from "../../../../components/infoscreen/hsl-schedules";
+import { KanttiinitCombined } from "../../../../components/infoscreen/kanttiinit";
 import InfoScreenSwitcher from "../../../../components/infoscreen/infoscreen-switcher/index";
 import EventListInfoscreen from "../../../../components/infoscreen/events-list";
 
@@ -8,8 +8,8 @@ export const dynamic = "force-dynamic";
 export default function InfoScreenContents() {
   return (
     <InfoScreenSwitcher>
-      <HSLcombinedSchedule />
-      <KanttiinitCombined />
+      {/* <HSLcombinedSchedule />
+      <KanttiinitCombined /> */}
       <EventListInfoscreen />
     </InfoScreenSwitcher>
   );

apps/web/src/app/[locale]/(main)/events/[...ilmomasiinaPath]/page.tsx

@@ -7,7 +7,7 @@ interface PageProps {
 }
 
 const ilmomasiinaBaseUrl =
-  process.env.NEXT_PUBLIC_ILMOMASIINA_URL ?? "https://ilmo.tietokilta.fi";
+  process.env.PUBLIC_ILMOMASIINA_URL ?? "https://ilmo.tietokilta.fi";
 
 /** workaround some ilmomasiina purkka */
 const languageMappings = {

apps/web/src/app/[locale]/(main)/layout.tsx

@@ -8,7 +8,7 @@ import { MobileNav } from "../../../components/mobile-nav";
 import { SkipLink } from "../../../components/skip-link";
 import { cn } from "../../../lib/utils";
 import "@tietokilta/ui/global.css";
-import "../../globals.css";
+import "../globals.css";
 import { type Locale } from "../../../locales/server";
 import { DigiCommitteeRecruitmentAlert } from "../../../components/digi-committee-recruitment-alert";
 

apps/web/src/components/infoscreen/events-list/index.tsx

@@ -1,54 +1,11 @@
+import { getISOWeek, getISOWeekYear } from "date-fns";
 import {
   fetchUpcomingEvents,
   type IlmomasiinaEvent,
 } from "../../../lib/api/external/ilmomasiina";
-import { getI18n, getScopedI18n } from "../../../locales/server.ts";
+import { getI18n } from "../../../locales/server.ts";
 import { EventCardCompact } from "../../event-card/index.tsx";
 
-function getWeek(date: Date) {
-  // First day of the year
-  const firstMondayOfYear = new Date(date.getFullYear(), 0, 1);
-  // Monday is 0, Sunday is 6
-  const weekday = (firstMondayOfYear.getDay() + 6) % 7;
-  // Find first monday of the year
-  if (weekday < 3) {
-    // If the first day of the year is a Monday, Tuesday or Wednesday
-    firstMondayOfYear.setDate(firstMondayOfYear.getDate() - weekday);
-  } else {
-    // If the first day of the year is a Thursday, Friday, Saturday or Sunday
-    firstMondayOfYear.setDate(firstMondayOfYear.getDate() + 7 - weekday);
-  }
-
-  // Calculate how many weeks have passed
-  const diff = date.getTime() - firstMondayOfYear.getTime();
-  const days = diff / (1000 * 60 * 60 * 24 * 7);
-  let weeknumber = Math.ceil(days);
-  weeknumber =
-    date.getFullYear() > new Date().getFullYear()
-      ? weeknumber + 52
-      : weeknumber;
-  return weeknumber;
-}
-
-function groupEventsByWeek(
-  events: IlmomasiinaEvent[],
-): Record<number, IlmomasiinaEvent[]> {
-  return events.reduce<Record<number, IlmomasiinaEvent[]>>((acc, event) => {
-    const eventDate = event.date
-      ? new Date(event.date)
-      : new Date(
-          event.registrationStartDate ? event.registrationStartDate : "",
-        );
-    const weekNumber = getWeek(eventDate);
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Removing this causes error
-    if (!acc[weekNumber]) {
-      acc[weekNumber] = [];
-    }
-    acc[weekNumber].push(event);
-    return acc;
-  }, {});
-}
-
 export default async function EventListInfoscreen({
   showIlmostatus = true,
 }: {
@@ -58,7 +15,14 @@ export default async function EventListInfoscreen({
   const eventsResponse = await fetchUpcomingEvents();
   const events = Array.isArray(eventsResponse.data) ? eventsResponse.data : [];
 
-  const upcomingEventsDataByWeek = groupEventsByWeek(events);
+  const upcomingEventsDataByWeek = Object.groupBy(
+    events,
+    ({ date, registrationStartDate, registrationEndDate }) => {
+      const dateToUse =
+        date ?? registrationStartDate ?? registrationEndDate ?? "";
+      return `${getISOWeekYear(dateToUse).toFixed()}-${getISOWeek(dateToUse).toFixed().padStart(2, "0")}`; // YYYY-VV
+    },
+  );
 
   return (
     <main id="main" className="flex flex-col align-top">
@@ -67,13 +31,17 @@ export default async function EventListInfoscreen({
       </h1>
       <ul className="flex flex-row flex-wrap">
         {Object.entries(upcomingEventsDataByWeek)
-          .slice(1, 4)
-          .map((entry) => {
-            const eventsInWeek = entry[1];
+          .filter(
+            (
+              e: [string, IlmomasiinaEvent[] | undefined],
+            ): e is [string, IlmomasiinaEvent[]] => !!e[1],
+          )
+          .sort((a, b) => a[0].localeCompare(b[0]))
+          .map(([weekYear, eventsInWeek]) => {
             return (
-              <div key={entry[0]} className="flex w-1/2 flex-col p-2 xl:w-1/3">
+              <div key={weekYear} className="flex w-1/2 flex-col p-2 xl:w-1/3">
                 <span className="text-pretty py-2 text-center text-3xl font-bold">
-                  {t("calendar.Week")} {entry[0]}
+                  {t("calendar.Week")} {Number(weekYear.split("-")[1])}
                 </span>
                 <div className="flex flex-col gap-3">
                   {eventsInWeek.map((event) => {

apps/web/src/components/infoscreen/hsl-schedules-combined/fetcher.ts → apps/web/src/components/infoscreen/hsl-schedules/fetcher.ts

@@ -37,9 +37,7 @@ const client = new ApolloClient({
       "digitransit-subscription-key":
         process.env.DIGITRANSIT_SUBSCRIPTION_KEY ?? "",
     },
-    // TODO: figure out how next cache works, the revalidate doesn't seem to be working
     fetchOptions: {
-      //cache: "force-cache",
       next: {
         revalidate: 30,
       },

apps/web/src/components/infoscreen/hsl-schedule/index.tsx → apps/web/src/components/infoscreen/hsl-schedules/index.tsx

@@ -1,5 +1,6 @@
 import { getScopedI18n } from "../../../locales/server.ts";
 import type { Stop, StopType } from "../types/hsl-helper-types.ts";
+import { HSLSchedules } from "./fetcher.ts";
 
 const getColor = (type: StopType): string => {
   switch (type) {
@@ -28,7 +29,7 @@ interface HSLScheduleProps {
   className: string;
 }
 
-export function HSLSchedule({ stop }: HSLScheduleProps) {
+function HSLSchedule({ stop }: HSLScheduleProps) {
   return (
     <div
       className="size-full items-center gap-4"
@@ -56,3 +57,29 @@ export function HSLSchedule({ stop }: HSLScheduleProps) {
     </div>
   );
 }
+
+export async function HSLcombinedSchedule() {
+  const stopData = await HSLSchedules();
+
+  if (stopData.length === 0) {
+    return null;
+  }
+  return (
+    <div className="w-full flex-row justify-center">
+      <div className="flex w-full justify-center">
+        <h1 className="flex justify-center pt-4 text-3xl font-bold">
+          Aalto-yliopisto (M)
+        </h1>
+      </div>
+      <div className="flex w-full justify-between gap-4 p-8 pt-0">
+        {stopData.map((stop) => (
+          <HSLSchedule
+            key={stop.name + stop.type}
+            stop={stop}
+            className="flex flex-col gap-4"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}