wip

danskernesdigitalebibliotek · Apr 5, 2024 · a912d9b · a912d9b
1 parent dbc65c9
commit a912d9b
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 79 deletions.
diff --git a/src/apps/opening-hours/OpeningHourWeekList.tsx b/src/apps/opening-hours/OpeningHourWeekList.tsx
@@ -2,7 +2,10 @@ import dayjs from "dayjs";
 import "dayjs/locale/da";
 import React from "react";
 import OpeningHoursDayEntry from "./OpeningHoursDayEntry";
-import { GroupedOpeningHours } from "./OpeningHoursHelpers";
+import {
+  GroupedOpeningHours,
+  formatDateToWeekday
+} from "./OpeningHoursHelpers";
 import OpeningHourWeekListSkeleton from "./OpeningHourWeekListSkeleton";
 
 interface OpeningHoursWeekListProps {
@@ -18,11 +21,13 @@ const OpeningHoursWeekList: React.FC<OpeningHoursWeekListProps> = ({
     <OpeningHourWeekListSkeleton />
   ) : (
     <ul className="opening-hours__content">
-      {data.map(({ day, date, openingHourEntries }) => {
-        const formattedDateForDisplay = dayjs(date).format("DD/MM");
+      {data.map(({ dateTime, openingHourEntries }) => {
+        const dateAsWeekday = formatDateToWeekday(dateTime);
+        const formattedDateForDisplay = dayjs(dateTime).format("DD/MM");
+
         return (
-          <li key={date} className="opening-hours__row">
-            <h3 className="opening-hours__individual-day">{`${day}: d. ${formattedDateForDisplay}`}</h3>
+          <li key={formattedDateForDisplay} className="opening-hours__row">
+            <h3 className="opening-hours__individual-day">{`${dateAsWeekday}: d. ${formattedDateForDisplay}`}</h3>
             {openingHourEntries.length > 0 ? (
               <ul>
                 {openingHourEntries.map((item, categoryIndex) => (

diff --git a/src/apps/opening-hours/OpeningHours.dev.tsx b/src/apps/opening-hours/OpeningHours.dev.tsx
@@ -15,14 +15,20 @@ export default {
       defaultValue: new Date("2024-03-21"),
       control: { type: "date" }
     },
-
     branchId: {
       defaultValue: 1,
       control: { type: "number" }
     },
-    etAlText: {
-      name: "Et al. Text",
-      defaultValue: "et al.",
+    showOpeningHoursForWeekText: {
+      defaultValue: "Show opening hours for week",
+      control: { type: "text" }
+    },
+    weekText: {
+      defaultValue: "Week",
+      control: { type: "text" }
+    },
+    openingHoursHeadingText: {
+      defaultValue: "Opening hours",
       control: { type: "text" }
     },
     ...globalConfigArgs,

diff --git a/src/apps/opening-hours/OpeningHours.entry.tsx b/src/apps/opening-hours/OpeningHours.entry.tsx
@@ -14,11 +14,7 @@ export interface OpeningHoursEntryProps {
 const OpeningHoursEntry: React.FC<
   OpeningHoursEntryProps & GlobalEntryTextProps
 > = ({ branchId, initialDate = new Date() }) => {
-  return (
-    <GuardedApp app="opening-hours">
-      <OpeningHours branchId={branchId} initialDate={initialDate} />
-    </GuardedApp>
-  );
+  return <OpeningHours branchId={branchId} initialDate={initialDate} />;
 };
 
 export default withConfig(withUrls(withText(OpeningHoursEntry)));
diff --git a/src/apps/opening-hours/OpeningHours.mount.ts b/src/apps/opening-hours/OpeningHours.mount.ts
@@ -1,4 +1,4 @@
 import addMount from "../../core/addMount";
-import OpeningHours from "./OpeningHours";
+import OpeningHours from "./OpeningHours.entry";
 
 addMount({ appName: "opening-hours", app: OpeningHours });
diff --git a/src/apps/opening-hours/OpeningHours.tsx b/src/apps/opening-hours/OpeningHours.tsx
@@ -1,11 +1,12 @@
 import ArrowLeft from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ArrowLeft.svg";
 import ArrowRight from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ArrowRight.svg";
 import * as React from "react";
+import { useText } from "../../core/utils/text";
 import OpeningHoursWeekList from "./OpeningHourWeekList";
 import {
+  formatWeekString,
   getNextWeek,
-  getPreviousWeek,
-  getWeekDisplay
+  getPreviousWeek
 } from "./OpeningHoursHelpers";
 import useOpeningHours from "./useOpeningHours";
 
@@ -19,50 +20,59 @@ const OpeningHours: React.FC<OpeningHoursProps> = ({
   initialDate
 }) => {
   const {
-    currentWeekDisplay,
     currentWeekRange,
     groupedOpeningHours,
     navigateToPreviousWeek,
     navigateToNextWeek,
     isLoading
   } = useOpeningHours(initialDate, branchId);
 
-  const nextWeek = getWeekDisplay(getNextWeek(currentWeekRange.start));
-  const previousWeek = getWeekDisplay(getPreviousWeek(currentWeekRange.start));
+  const t = useText();
+  const nextWeekDate = getNextWeek(currentWeekRange.start);
+  const previousWeekDate = getPreviousWeek(currentWeekRange.start);
+
+  const nextWeekString = formatWeekString(
+    t("showOpeningHoursForWeekText"),
+    nextWeekDate
+  );
+
+  const previousWeekString = formatWeekString(
+    t("showOpeningHoursForWeekText"),
+    previousWeekDate
+  );
+
+  const currentWeekString = formatWeekString(
+    t("weekText"),
+    currentWeekRange.start
+  );
 
   return (
     <div className="opening-hours">
-      <div className="opening-hours__wrapper">
-        <div className="opening-hours__header">
-          <h2 className="opening-hours__heading">Åbningstider</h2>
-          <div className="opening-hours__navigation-controls">
-            <button
-              className="opening-hours__navigation-control"
-              aria-label={`Vis åbningstider for ${previousWeek}`}
-              onClick={navigateToPreviousWeek}
-              type="button"
-            >
-              <img src={ArrowLeft} alt="" />
-            </button>
-            <div className="opening-hours__week-display">
-              {currentWeekDisplay}
-            </div>
-            <button
-              className="opening-hours__navigation-control opening-hours__navigation-control--next"
-              aria-label={`Vis åbningstider for ${nextWeek}`}
-              onClick={navigateToNextWeek}
-              type="button"
-            >
-              <img src={ArrowRight} alt="" />
-            </button>
-          </div>
+      <div className="opening-hours__header">
+        <h2 className="opening-hours__heading">
+          {t("openingHoursHeadingText")}
+        </h2>
+        <div className="opening-hours__navigation-controls">
+          <button
+            className="opening-hours__navigation-control"
+            aria-label={previousWeekString}
+            onClick={navigateToPreviousWeek}
+            type="button"
+          >
+            <img src={ArrowLeft} alt="" />
+          </button>
+          <div className="opening-hours__week-display">{currentWeekString}</div>
+          <button
+            className="opening-hours__navigation-control opening-hours__navigation-control--next"
+            aria-label={nextWeekString}
+            onClick={navigateToNextWeek}
+            type="button"
+          >
+            <img src={ArrowRight} alt="" />
+          </button>
         </div>
-
-        <OpeningHoursWeekList
-          data={groupedOpeningHours}
-          isLoading={isLoading}
-        />
       </div>
+      <OpeningHoursWeekList data={groupedOpeningHours} isLoading={isLoading} />
     </div>
   );
 };

diff --git a/src/apps/opening-hours/OpeningHoursHelpers.ts b/src/apps/opening-hours/OpeningHoursHelpers.ts
@@ -1,9 +1,12 @@
 import dayjs from "dayjs";
 import "dayjs/locale/da";
 import weekOfYear from "dayjs/plugin/weekOfYear";
+import lodash from "lodash";
 import { DplOpeningHoursListGET200Item as OpeningHoursItem } from "../../core/dpl-cms/model";
 
+dayjs.locale("da");
 dayjs.extend(weekOfYear);
+
 export const getNextWeek = (date: Date): Date => {
   return dayjs(date).add(1, "week").toDate();
 };
@@ -12,38 +15,48 @@ export const getPreviousWeek = (date: Date): Date => {
   return dayjs(date).subtract(1, "week").toDate();
 };
 
-export const getWeekDisplay = (date: Date): string => {
-  const week = dayjs(date).week();
-  const year = dayjs(date).year();
+export const getWeek = (date: Date): string => {
+  return dayjs(date).week().toString();
+};
 
-  return `Uge ${week}, ${year}`;
+export const getYear = (date: Date): string => {
+  return dayjs(date).year().toString();
+};
+
+export const formatWeekString = (
+  translationKey: string,
+  date: Date
+): string => {
+  const week = getWeek(date);
+  const year = getYear(date);
+
+  return `${translationKey} ${week}, ${year}`;
 };
 
 const capitalizeString = (string: string): string => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+  return lodash.upperFirst(string);
 };
 
 export const formatDateToWeekday = (date: Date): string => {
-  const formattedAsWeekday = dayjs(date).locale("da").format("dddd");
+  const formattedAsWeekday = dayjs(date).format("dddd");
   const capitalizedWeekday = capitalizeString(formattedAsWeekday);
 
   return capitalizedWeekday;
 };
 
-export const formatDate = (date: Date): string => {
-  return dayjs(date).locale("da").format("YYYY-MM-DD");
+export const formatDateForAPI = (date: Date): string => {
+  return dayjs(date).format("YYYY-MM-DD");
 };
 
 export const getWeekStartAndEndDate = (date = new Date()) => {
-  const start = dayjs(date).locale("da").startOf("week").toDate();
-  const end = dayjs(date).locale("da").endOf("week").toDate();
+  const start = dayjs(date).startOf("week").toDate();
+  const end = dayjs(date).endOf("week").toDate();
 
   return { start, end };
 };
 
 export type GroupedOpeningHours = Array<{
-  day: string;
-  date: string;
+  dateTime: Date;
   openingHourEntries: OpeningHoursItem[];
 }>;
 
@@ -58,20 +71,18 @@ export const groupOpeningHoursByWeekday = (
 
   // Generate array of days between start and end dates
   const allDays = [];
-  while (currentDay.isBefore(endDay) || currentDay.isSame(endDay, "day")) {
+
+  while (!currentDay.isAfter(endDay)) {
     allDays.push(currentDay.toDate());
     currentDay = currentDay.add(1, "day");
   }
 
   const daysWithOpeningHours: GroupedOpeningHours = allDays.map((day) => {
-    const formattedDate = formatDate(day);
-    const formattedDay = formatDateToWeekday(day);
-
     return {
-      day: formattedDay,
-      date: formattedDate,
-      openingHourEntries: openingHours.filter(
-        (individualOpeningHour) => individualOpeningHour.date === formattedDate
+      dateTime: day,
+      date: day,
+      openingHourEntries: openingHours.filter((individualOpeningHour) =>
+        dayjs(individualOpeningHour.date).isSame(day, "day")
       )
     };
   });

diff --git a/src/apps/opening-hours/useOpeningHours.ts b/src/apps/opening-hours/useOpeningHours.ts
@@ -2,16 +2,14 @@ import { useCallback, useEffect, useState } from "react";
 import { useDplOpeningHoursListGET } from "../../core/dpl-cms/dpl-cms";
 import {
   GroupedOpeningHours,
-  formatDate,
+  formatDateForAPI,
   getNextWeek,
   getPreviousWeek,
-  getWeekDisplay,
   getWeekStartAndEndDate,
   groupOpeningHoursByWeekday
 } from "./OpeningHoursHelpers";
 
 interface UseOpeningHoursReturn {
-  currentWeekDisplay: string;
   groupedOpeningHours: GroupedOpeningHours;
   currentWeekRange: { start: Date; end: Date };
   navigateToPreviousWeek: () => void;
@@ -34,8 +32,8 @@ function useOpeningHours(
     isLoading
   } = useDplOpeningHoursListGET({
     branch_id: branchId,
-    from_date: formatDate(currentWeekRange.start),
-    to_date: formatDate(currentWeekRange.end)
+    from_date: formatDateForAPI(currentWeekRange.start),
+    to_date: formatDateForAPI(currentWeekRange.end)
   });
 
   useEffect(() => {
@@ -63,10 +61,7 @@ function useOpeningHours(
     });
   }, []);
 
-  const currentWeekDisplay = getWeekDisplay(currentWeekRange.start);
-
   return {
-    currentWeekDisplay,
     groupedOpeningHours,
     currentWeekRange,
     navigateToPreviousWeek,

diff --git a/src/core/utils/types/ids.ts b/src/core/utils/types/ids.ts
@@ -14,7 +14,6 @@ export type GuardedAppId =
   | "recommended-material"
   | "recommendation"
   | "material-grid-automatic"
-  | "material-grid-manual"
-  | "opening-hours";
+  | "material-grid-manual";
 export type IssnId = DigitalArticleService["issn"];
 export type LoanId = number;