[UICAL-278] Fix rendering error for closed calendars (#499)

* Improve user fetching for metadata view

* Separate InfoPaneHours intl a separate component

* Additional cleanup

* Revert "Additional cleanup"

This reverts commit 1fec395.

* Fix render issue on end time column

* Update changelog

* Fix history version to be consistent with react-router-dom

* Fix tests

* Sonar nits

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-calendar
 
+## [10.0.1] IN PROGRESS
+
+* Use non-empty close times for closed calendars. Refs UICAL-278
+
 ## [10.0.0] (https://github.com/folio-org/ui-calendar/tree/v10.0.0) (2023-10-11)
 
 * *BREAKING* bump `react-intl` to `v6.4.4`. Refs UICAL-275

package.json

@@ -137,13 +137,13 @@
   },
   "dependencies": {
     "@types/memoizee": "^0.4.8",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-dom": "^5.2.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
     "fuzzysort": "^2.0.4",
-    "history": "^5.3.0",
+    "history": "^4.7.11",
     "ky": "^0.31.1",
     "memoizee": "^0.4.15",
     "react-final-form": "^6.5.9",

src/components/InfoPaneHours.tsx

@@ -0,0 +1,89 @@
+import { MultiColumnList } from '@folio/stripes/components';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Calendar } from '../types/types';
+import {
+  containsFullOvernightSpans,
+  containsNextDayOvernight,
+  generateDisplayRows,
+  get247Rows,
+  splitOpeningsIntoDays,
+} from '../utils/InfoPaneUtils';
+import { isOpen247 } from '../utils/CalendarUtils';
+import { useLocaleWeekdays } from '../utils/WeekdayUtils';
+import css from '../views/panes/InfoPane.css';
+
+export default function InfoPaneHours({
+  calendar,
+}: {
+  readonly calendar: Calendar;
+}) {
+  const intl = useIntl();
+  const localeWeekdays = useLocaleWeekdays(intl);
+
+  const hours = useMemo(
+    () => splitOpeningsIntoDays(calendar.normalHours),
+    [calendar],
+  );
+
+  const dataRows = useMemo(() => {
+    if (isOpen247(calendar.normalHours)) {
+      return get247Rows(intl, localeWeekdays);
+    } else {
+      return generateDisplayRows(intl, localeWeekdays, hours);
+    }
+  }, [hours, calendar, intl, localeWeekdays]);
+
+  return (
+    <>
+      <MultiColumnList
+        interactive={false}
+        getCellClass={(defaultClass, _rowData, column) => {
+          return classNames(defaultClass, {
+            [css.hoursCell]: column !== 'day',
+            [css.dayCell]: column === 'day',
+          });
+        }}
+        columnMapping={{
+          day: (
+            <FormattedMessage id="ui-calendar.infoPane.accordion.hours.day" />
+          ),
+          startTime: (
+            <FormattedMessage id="ui-calendar.infoPane.accordion.hours.open" />
+          ),
+          endTime: (
+            <FormattedMessage id="ui-calendar.infoPane.accordion.hours.close" />
+          ),
+        }}
+        columnWidths={{
+          day: 200,
+          startTime: { min: 100, max: 100 },
+          endTime: { min: 100, max: 100 },
+        }}
+        contentData={dataRows}
+      />
+      <p
+        className={
+          !isOpen247(calendar.normalHours) && containsNextDayOvernight(hours)
+            ? ''
+            : css.hidden
+        }
+      >
+        <FormattedMessage id="ui-calendar.infoPane.nextDayHelpText" />
+      </p>
+      <p
+        className={
+          !isOpen247(calendar.normalHours) && containsFullOvernightSpans(hours)
+            ? ''
+            : css.hidden
+        }
+      >
+        <FormattedMessage id="ui-calendar.infoPane.overnightHelpText" />
+      </p>
+      <p className={isOpen247(calendar.normalHours) ? '' : css.hidden}>
+        <FormattedMessage id="ui-calendar.infoPane.247HelpText" />
+      </p>
+    </>
+  );
+}

src/data/DataRepository.getters.test.ts

@@ -7,7 +7,6 @@ const mutators = {
   update: jest.fn(),
   delete: jest.fn(),
   dates: jest.fn(),
-  getUser: jest.fn()
 };
 
 test('Getters work as expected with undefined objects', () => {
@@ -23,19 +22,19 @@ test('Get Calendar works with calendar that does not exist, isLoaded with only C
   const repository = new DataRepository(
     [Calendars.SPRING_SP_1_2, Calendars.SPRING_SP_3_4, Calendars.SUMMER_SP_3],
     [],
-    mutators
+    mutators,
   );
   expect(repository.isLoaded()).toBe(true);
   expect(
-    repository.getCalendar('d3f3354c-2986-5d30-a84c-1eflfd613ac6')
+    repository.getCalendar('d3f3354c-2986-5d30-a84c-1eflfd613ac6'),
   ).toStrictEqual(undefined);
 });
 
 test('Get Calendar works with null and undefined', () => {
   const repository = new DataRepository(
     [Calendars.SPRING_SP_1_2, Calendars.SPRING_SP_3_4, Calendars.SUMMER_SP_3],
     [],
-    mutators
+    mutators,
   );
   expect(repository.isLoaded()).toBe(true);
   expect(repository.getCalendar(null)).toStrictEqual(undefined);
@@ -46,15 +45,13 @@ test('getServicePointFromID works with service point that does not exist, isLoad
   const repository = new DataRepository(
     [],
     [ServicePoints.SERVICE_POINT_1_DTO],
-    mutators
+    mutators,
   );
   expect(repository.isLoaded()).toBe(true);
   expect(
-    repository.getServicePointFromId('a3f3354c-2986-5d33-a84c-1eflfd613ac6')
-  ).toStrictEqual(undefined);
-  expect(
-    repository.getServicePointFromId(undefined)
+    repository.getServicePointFromId('a3f3354c-2986-5d33-a84c-1eflfd613ac6'),
   ).toStrictEqual(undefined);
+  expect(repository.getServicePointFromId(undefined)).toStrictEqual(undefined);
 });
 
 test('Getters work as expected with empty objects', () => {
@@ -68,7 +65,7 @@ test('Getters work as expected (1 Calendar, 2 Service Points)', () => {
   const repository1 = new DataRepository(
     [Calendars.SPRING_SP_1_2],
     [ServicePoints.SERVICE_POINT_1_DTO, ServicePoints.SERVICE_POINT_2_DTO],
-    mutators
+    mutators,
   );
 
   expect(repository1.isLoaded()).toBe(true);
@@ -77,42 +74,42 @@ test('Getters work as expected (1 Calendar, 2 Service Points)', () => {
   expect(repository1.getCalendars()).toStrictEqual([Calendars.SPRING_SP_1_2]);
   expect(repository1.getServicePoints()).toStrictEqual([
     ServicePoints.SERVICE_POINT_1,
-    ServicePoints.SERVICE_POINT_2
+    ServicePoints.SERVICE_POINT_2,
   ]);
 
   expect(
     repository1.getServicePointsFromIds([
       '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
-      '3b071ddf-14ad-58a1-9fb5-b3737da888de'
-    ])
+      '3b071ddf-14ad-58a1-9fb5-b3737da888de',
+    ]),
   ).toStrictEqual([
     ServicePoints.SERVICE_POINT_1,
-    ServicePoints.SERVICE_POINT_2
+    ServicePoints.SERVICE_POINT_2,
   ]);
 
   expect(
-    repository1.getServicePointFromId('3a40852d-49fd-4df2-a1f9-6e2641a6e91f')
+    repository1.getServicePointFromId('3a40852d-49fd-4df2-a1f9-6e2641a6e91f'),
   ).toStrictEqual(ServicePoints.SERVICE_POINT_1);
   expect(
     repository1.getServicePointNamesFromIds([
       '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
-      '3b071ddf-14ad-58a1-9fb5-b3737da888de'
-    ])
+      '3b071ddf-14ad-58a1-9fb5-b3737da888de',
+    ]),
   ).toStrictEqual([
     ServicePoints.SERVICE_POINT_1.name,
-    ServicePoints.SERVICE_POINT_2.name
+    ServicePoints.SERVICE_POINT_2.name,
   ]);
 
   expect(
-    repository1.getCalendar('d3f3354c-2986-5d31-a84c-1ef3fd613ac6')
+    repository1.getCalendar('d3f3354c-2986-5d31-a84c-1ef3fd613ac6'),
   ).toStrictEqual(Calendars.SPRING_SP_1_2);
 });
 
 test('Getters work as expected (multiple calendars)', () => {
   const repository1 = new DataRepository(
     [Calendars.SPRING_SP_1_2, Calendars.SPRING_SP_3_4, Calendars.SUMMER_SP_3],
     [],
-    mutators
+    mutators,
   );
 
   expect(repository1.isLoaded()).toBe(true);
@@ -121,9 +118,9 @@ test('Getters work as expected (multiple calendars)', () => {
   expect(repository1.getCalendars()).toStrictEqual([
     Calendars.SPRING_SP_1_2,
     Calendars.SPRING_SP_3_4,
-    Calendars.SUMMER_SP_3
+    Calendars.SUMMER_SP_3,
   ]);
   expect(
-    repository1.getCalendar('4047ecea-bb24-5f76-9403-d44144c57b66')
+    repository1.getCalendar('4047ecea-bb24-5f76-9403-d44144c57b66'),
   ).toStrictEqual(Calendars.SUMMER_SP_3);
 });