show opening hours for today in footer

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -1,8 +1,6 @@
 import {
   getOpeningHours,
-  getOpeningHoursForFunction,
   getPrettyOpeningHoursForFunction,
-  groupOpeningHours,
   PrettyOpeningHours,
 } from "@/lib/openinghours";
 import styles from "./openingHoursSectionBlock.module.scss";

web/src/components/layout/Footer.tsx

@@ -2,8 +2,37 @@ import Link from "next/link";
 import styles from "./footer.module.scss";
 import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
 import { ToTop } from "./ToTop";
-import { LogoNeuf } from "../general/Logo";
 import Icon from "../general/Icon";
+import {
+  getOpeningHours,
+  getTodaysOpeningHoursForFunction,
+} from "@/lib/openinghours";
+
+async function OpeningHoursTable() {
+  const allOpeningHours = await getOpeningHours();
+  const subsections = [
+    ["glassbaren", "Glassbaren"],
+    ["bokcafeen", "Bokcaféen"],
+    ["ekspedisjonen", "Ekspedisjonen"],
+  ];
+
+  return (
+    <table className="openingHours">
+      <tbody>
+        {subsections.map((subsection) => {
+          const [slug, title] = subsection;
+          const hours = getTodaysOpeningHoursForFunction(allOpeningHours, slug);
+          return (
+            <tr key={slug}>
+              <td>{title}</td>
+              <td>{hours}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
 
 export const Footer = () => {
   return (
@@ -84,22 +113,7 @@ export const Footer = () => {
 
         <div className={styles.openingHoursWrapper}>
           <h2 className="suphead">Åpningstider i dag</h2>
-          <table className="openingHours">
+          <OpeningHoursTable />
-            <tbody>
-              <tr>
-                <td>Glassbaren</td>
-                <td>15:00—00:30</td>
-              </tr>
-              <tr>
-                <td>Bokcaféen</td>
-                <td>19:00—23:30</td>
-              </tr>
-              <tr>
-                <td>Ekspedisjonen</td>
-                <td>15:00—00:00</td>
-              </tr>
-            </tbody>
-          </table>
           <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
         </div>
       </div>

web/src/lib/openinghours.ts

@@ -89,9 +89,11 @@ type OpeningHoursGroup = {
   custom: string | null;
 };
 
-type OpeningHoursPerDay = Record<string, OpeningHoursRangeBlock>
+type OpeningHoursPerDay = Record<string, OpeningHoursRangeBlock>;
 
-export function groupOpeningHours(week: OpeningHoursPerDay): OpeningHoursGroup[] {
+export function groupOpeningHours(
+  week: OpeningHoursPerDay
+): OpeningHoursGroup[] {
   const grouped: OpeningHoursGroup[] = [];
   let previous: string | null = null;
 
@@ -184,11 +186,31 @@ export function getPrettyOpeningHoursForFunction(
     friday: week.friday as OpeningHoursRangeBlock,
     saturday: week.saturday as OpeningHoursRangeBlock,
     sunday: week.sunday as OpeningHoursRangeBlock,
-  }
+  };
   const grouped = groupOpeningHours(perDay);
   return formatGroupedHours(grouped);
 }
 
+export function getTodaysOpeningHoursForFunction(
+  openingHours: OpeningHoursSet,
+  name: string
+): string {
+  const week: any = getOpeningHoursForFunction(openingHours, name);
+  if (!week) {
+    return "?";
+  }
+  const weekdayIndex = startOfToday().getDay();
+  const weekday = WEEKDAYS[weekdayIndex];
+  const hours = week[weekday];
+  if (hours.timeFrom && hours.timeTo) {
+    return `${hours.timeFrom.slice(0, 5)}—${hours.timeTo.slice(0, 5)}`;
+  }
+  if (hours.custom && hours.custom.length) {
+    return hours.custom;
+  }
+  return "Stengt";
+}
+
 const OpeningHoursSetFragmentDefinition = graphql(`
   fragment OpeningHoursSetFragment on OpeningHoursSet {
     name