Extract "Date" functions into "date.ts" util

src/components/chapter/ChapterCard.tsx

@@ -22,7 +22,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useLongPress } from 'use-long-press';
-import { getUploadDateString } from '@/util/date.ts';
+import { getDateString } from '@/util/date.ts';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator.tsx';
 import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
@@ -121,7 +121,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                         </Typography>
                                         <Typography variant="caption">{chapter.scanlator}</Typography>
                                         <Typography variant="caption">
-                                            {getUploadDateString(Number(chapter.uploadDate ?? 0))}
+                                            {getDateString(Number(chapter.uploadDate ?? 0), true)}
                                             {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
                                         </Typography>
                                     </Stack>

src/screens/Updates.tsx

@@ -18,7 +18,6 @@ import Typography from '@mui/material/Typography';
 import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { t as translate } from 'i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
@@ -32,31 +31,7 @@ import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
 import { Mangas } from '@/lib/data/Mangas.ts';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
-import { dateFormatter, dateTimeFormatter } from '@/util/date.ts';
+import { dateTimeFormatter, epochToDate, getDateString } from '@/util/date.ts';
-
-function epochToDate(epoch: number) {
-    const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
-    date.setUTCSeconds(epoch);
-    return date;
-}
-
-function isTheSameDay(first: Date, second: Date) {
-    return (
-        first.getDate() === second.getDate() &&
-        first.getMonth() === second.getMonth() &&
-        first.getFullYear() === second.getFullYear()
-    );
-}
-
-function getDateString(date: Date) {
-    const today = new Date();
-    if (isTheSameDay(today, date)) return translate('global.date.label.today');
-    // calculate yesterday
-    const yesterday = new Date();
-    yesterday.setDate(today.getDate() - 1);
-    if (isTheSameDay(yesterday, date)) return translate('global.date.label.yesterday');
-    return dateFormatter.format(date);
-}
 
 const groupByDate = (updates: TChapter[]): [date: string, items: number][] => {
     if (!updates.length) {

src/util/date.ts

@@ -22,55 +22,65 @@ export const dateTimeFormatter = new Intl.DateTimeFormat(navigator.language, {
     minute: '2-digit',
 });
 
-export const isWithinLastXMillis = (date: Date, timeMS: number) => {
+export const epochToDate = (epoch: number): Date => {
-    const timeDifference = Date.now() - date.getTime();
+    const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
-    return timeDifference <= timeMS;
+    date.setUTCSeconds(epoch);
+    return date;
 };
 
-export const getElapsedTimeSinceStartOfDay = (date: Date) => {
+export const isTheSameDay = (first: Date, second: Date): boolean =>
-    const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    first.getDate() === second.getDate() &&
-    return date.getTime() - startOfDay.getTime();
+    first.getMonth() === second.getMonth() &&
-};
+    first.getFullYear() === second.getFullYear();
 
 /**
  * Returns a string in localized format for the passed date.
  *
  * In case the date is from today or yesterday a special string will be returned including "Today"
- * or "Yesterday" with the localized time of the passed date.
+ * or "Yesterday".
+ * Optionally this special string can include the localized time of the passed date ("Today/Yesterday at HH:mm").
  *
  * @example
  * const today = new Date();
  * const yesterday = new Date(today.getTime() - 1000 * 60 * 60 * 24);
  * const someDate = new Date(1337, 4, 20);
  *
- * const todayAsString = getDateString(today); // => "Today at 02:50 AM"
+ * const todayAsString = getDateString(today); // => "Today"
- * const yesterdayAsString = getDateString(yesterday) // => "Yesterday at 02:50 AM"
+ * const yesterdayAsString = getDateString(yesterday, true) // => "Yesterday at 02:50 AM"
  * const someDate = getDateString(someDate) // => "04/20/1337"
  *
  *
  * @param date
+ * @param withTime
  */
-export const getUploadDateString = (date: Date | number) => {
+export const getDateString = (date: Date | number, withTime: boolean = false) => {
-    const uploadDate = date instanceof Date ? date : new Date(date);
+    const actualDate = date instanceof Date ? date : new Date(date);
 
     const today = new Date();
-    const todayElapsedTime = getElapsedTimeSinceStartOfDay(today);
+    const yesterday = new Date();
-    const yesterday = new Date(today.getTime() - todayElapsedTime - 1000 * 60 * 60 * 24);
+    yesterday.setDate(today.getDate() - 1);
-    const elapsedTimeSinceYesterday = today.getTime() - yesterday.getTime();
 
-    const wasUploadedToday = isWithinLastXMillis(uploadDate, todayElapsedTime);
+    const wasUploadedToday = isTheSameDay(today, actualDate);
-    const wasUploadedYesterday = isWithinLastXMillis(uploadDate, elapsedTimeSinceYesterday);
+    const wasUploadedYesterday = isTheSameDay(yesterday, actualDate);
 
     const addTimeString = wasUploadedToday || wasUploadedYesterday;
-    const timeString = addTimeString ? timeFormatter.format(uploadDate) : '';
+    const timeString = addTimeString ? timeFormatter.format(actualDate) : '';
 
     if (wasUploadedToday) {
-        return t('global.date.label.today_at', { timeString });
+        if (withTime) {
+            return t('global.date.label.today_at', { timeString });
+        }
+
+        return t('global.date.label.today');
     }
 
     if (wasUploadedYesterday) {
-        return t('global.date.label.yesterday_at', { timeString });
+        if (withTime) {
+            return t('global.date.label.yesterday_at', { timeString });
+        }
+
+        return t('global.date.label.yesterday');
     }
 
-    return dateFormatter.format(uploadDate);
+    return dateFormatter.format(actualDate);
 };