From 8de44e89570244cf4b9d24551d117c65fb2b1445 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 22 May 2024 06:54:53 -0700
Subject: [PATCH] Fixed: Queue and Calendar not loading

---
 frontend/src/Activity/Queue/TimeleftCell.js   | 12 ++-
 frontend/src/Calendar/Day/DayOfWeek.js        |  2 +-
 .../Table/Cells/RelativeDateCell.js           |  2 +-
 .../Overview/SeriesIndexOverviewInfo.tsx      | 22 +++--
 .../Index/Posters/SeriesIndexPoster.tsx       |  5 +-
 .../Index/Posters/SeriesIndexPosterInfo.tsx   | 17 ++--
 .../src/Utilities/Date/getRelativeDate.js     | 49 -----------
 .../src/Utilities/Date/getRelativeDate.tsx    | 83 +++++++++++++++++++
 8 files changed, 121 insertions(+), 71 deletions(-)
 delete mode 100644 frontend/src/Utilities/Date/getRelativeDate.js
 create mode 100644 frontend/src/Utilities/Date/getRelativeDate.tsx

diff --git a/frontend/src/Activity/Queue/TimeleftCell.js b/frontend/src/Activity/Queue/TimeleftCell.js
index b280b5a06..0a39b7edc 100644
--- a/frontend/src/Activity/Queue/TimeleftCell.js
+++ b/frontend/src/Activity/Queue/TimeleftCell.js
@@ -24,7 +24,11 @@ function TimeleftCell(props) {
   } = props;
 
   if (status === 'delay') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
@@ -40,7 +44,11 @@ function TimeleftCell(props) {
   }
 
   if (status === 'downloadClientUnavailable') {
-    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates
+    });
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
diff --git a/frontend/src/Calendar/Day/DayOfWeek.js b/frontend/src/Calendar/Day/DayOfWeek.js
index 39e40fce8..0f1d38f0b 100644
--- a/frontend/src/Calendar/Day/DayOfWeek.js
+++ b/frontend/src/Calendar/Day/DayOfWeek.js
@@ -28,7 +28,7 @@ class DayOfWeek extends Component {
     if (view === calendarViews.WEEK) {
       formatedDate = momentDate.format(calendarWeekColumnHeader);
     } else if (view === calendarViews.FORECAST) {
-      formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates);
+      formatedDate = getRelativeDate({ date, shortDateFormat, showRelativeDates });
     }
 
     return (
diff --git a/frontend/src/Components/Table/Cells/RelativeDateCell.js b/frontend/src/Components/Table/Cells/RelativeDateCell.js
index ed95e3014..37d23e8f9 100644
--- a/frontend/src/Components/Table/Cells/RelativeDateCell.js
+++ b/frontend/src/Components/Table/Cells/RelativeDateCell.js
@@ -40,7 +40,7 @@ class RelativeDateCell extends PureComponent {
         title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
         {...otherProps}
       >
-        {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, includeTime, timeForToday: true })}
+        {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })}
       </Component>
     );
   }
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx b/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
index 4c3c85555..5bd4dd7c2 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
@@ -138,7 +138,10 @@ function getInfoRowProps(
       }),
       iconName: icons.CALENDAR,
       label:
-        getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
+        getRelativeDate({
+          date: previousAiring,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         }) ?? '',
@@ -156,7 +159,10 @@ function getInfoRowProps(
       }),
       iconName: icons.ADD,
       label:
-        getRelativeDate(added, shortDateFormat, showRelativeDates, {
+        getRelativeDate({
+          date: added,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         }) ?? '',
@@ -232,15 +238,13 @@ function SeriesIndexOverviewInfo(props: SeriesIndexOverviewInfoProps) {
         <SeriesIndexOverviewInfoRow
           title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
           iconName={icons.SCHEDULED}
-          label={getRelativeDate(
-            nextAiring,
+          label={getRelativeDate({
+            date: nextAiring,
             shortDateFormat,
             showRelativeDates,
-            {
-              timeFormat,
-              timeForToday: true,
-            }
-          )}
+            timeFormat,
+            timeForToday: true,
+          })}
         />
       )}
 
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
index 0a0a385eb..b2015eaf5 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
@@ -217,7 +217,10 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
             timeFormat
           )}`}
         >
-          {getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
+          {getRelativeDate({
+            date: nextAiring,
+            shortDateFormat,
+            showRelativeDates,
             timeFormat,
             timeForToday: true,
           })}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
index f1605cd05..9a4265324 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
@@ -80,7 +80,10 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
           timeFormat
         )}`}
       >
-        {getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
+        {getRelativeDate({
+          date: previousAiring,
+          shortDateFormat,
+          showRelativeDates,
           timeFormat,
           timeForToday: true,
         })}
@@ -89,15 +92,13 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
   }
 
   if (sortKey === 'added' && added) {
-    const addedDate = getRelativeDate(
-      added,
+    const addedDate = getRelativeDate({
+      date: added,
       shortDateFormat,
       showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false,
-      }
-    );
+      timeFormat,
+      timeForToday: false,
+    });
 
     return (
       <div
diff --git a/frontend/src/Utilities/Date/getRelativeDate.js b/frontend/src/Utilities/Date/getRelativeDate.js
deleted file mode 100644
index a606f8aed..000000000
--- a/frontend/src/Utilities/Date/getRelativeDate.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import moment from 'moment';
-import formatTime from 'Utilities/Date/formatTime';
-import isInNextWeek from 'Utilities/Date/isInNextWeek';
-import isToday from 'Utilities/Date/isToday';
-import isTomorrow from 'Utilities/Date/isTomorrow';
-import isYesterday from 'Utilities/Date/isYesterday';
-import translate from 'Utilities/String/translate';
-import formatDateTime from './formatDateTime';
-
-function getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds = false, timeForToday = false, includeTime = false } = {}) {
-  if (!date) {
-    return null;
-  }
-
-  const isTodayDate = isToday(date);
-  const time = formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds });
-
-  if (isTodayDate && timeForToday && timeFormat) {
-    return time;
-  }
-
-  if (!showRelativeDates) {
-    return moment(date).format(shortDateFormat);
-  }
-
-  if (isYesterday(date)) {
-    return includeTime ? translate('YesterdayAt', { time } ): translate('Yesterday');
-  }
-
-  if (isTodayDate) {
-    return includeTime ? translate('TodayAt', { time } ): translate('Today');
-  }
-
-  if (isTomorrow(date)) {
-    return includeTime ? translate('TomorrowAt', { time } ): translate('Tomorrow');
-  }
-
-  if (isInNextWeek(date)) {
-    const day = moment(date).format('dddd');
-
-    return includeTime ? translate('DayOfWeekAt', { day, time }) : day;
-  }
-
-  return includeTime ?
-    formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds }) :
-    moment(date).format(shortDateFormat);
-}
-
-export default getRelativeDate;
diff --git a/frontend/src/Utilities/Date/getRelativeDate.tsx b/frontend/src/Utilities/Date/getRelativeDate.tsx
new file mode 100644
index 000000000..cc0b76b72
--- /dev/null
+++ b/frontend/src/Utilities/Date/getRelativeDate.tsx
@@ -0,0 +1,83 @@
+import moment from 'moment';
+import formatTime from 'Utilities/Date/formatTime';
+import isInNextWeek from 'Utilities/Date/isInNextWeek';
+import isToday from 'Utilities/Date/isToday';
+import isTomorrow from 'Utilities/Date/isTomorrow';
+import isYesterday from 'Utilities/Date/isYesterday';
+import translate from 'Utilities/String/translate';
+import formatDateTime from './formatDateTime';
+
+interface GetRelativeDateOptions {
+  date?: string;
+  shortDateFormat: string;
+  showRelativeDates: boolean;
+  timeFormat?: string;
+  includeSeconds?: boolean;
+  timeForToday?: boolean;
+  includeTime?: boolean;
+}
+
+function getRelativeDate({
+  date,
+  shortDateFormat,
+  showRelativeDates,
+  timeFormat,
+  includeSeconds = false,
+  timeForToday = false,
+  includeTime = false,
+}: GetRelativeDateOptions) {
+  if (!date) {
+    return null;
+  }
+
+  if (includeTime && !timeFormat) {
+    throw new Error(
+      "getRelativeDate: 'timeFormat' is required when 'includeTime' is true"
+    );
+  }
+
+  const isTodayDate = isToday(date);
+  const time =
+    includeTime && timeFormat
+      ? formatTime(date, timeFormat, {
+          includeMinuteZero: true,
+          includeSeconds,
+        })
+      : '';
+
+  if (isTodayDate && timeForToday && timeFormat) {
+    return time;
+  }
+
+  if (!showRelativeDates) {
+    return moment(date).format(shortDateFormat);
+  }
+
+  if (isYesterday(date)) {
+    return includeTime
+      ? translate('YesterdayAt', { time })
+      : translate('Yesterday');
+  }
+
+  if (isTodayDate) {
+    return includeTime ? translate('TodayAt', { time }) : translate('Today');
+  }
+
+  if (isTomorrow(date)) {
+    return includeTime
+      ? translate('TomorrowAt', { time })
+      : translate('Tomorrow');
+  }
+
+  if (isInNextWeek(date)) {
+    const day = moment(date).format('dddd');
+
+    return includeTime ? translate('DayOfWeekAt', { day, time }) : day;
+  }
+
+  return includeTime
+    ? formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds })
+    : moment(date).format(shortDateFormat);
+}
+
+export default getRelativeDate;