From d3999123ab0668453a7039b3c94d35364b9a32c8 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 3 May 2024 16:19:20 +0200 Subject: [PATCH] Extract "Date" functions into "date.ts" util --- src/components/chapter/ChapterCard.tsx | 4 +- src/screens/Updates.tsx | 27 +------------ src/util/date.ts | 52 +++++++++++++++----------- 3 files changed, 34 insertions(+), 49 deletions(-) diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx index d5112bdfbc..319589a82f 100644 --- a/src/components/chapter/ChapterCard.tsx +++ b/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 = (props: IProps) => { {chapter.scanlator} - {getUploadDateString(Number(chapter.uploadDate ?? 0))} + {getDateString(Number(chapter.uploadDate ?? 0), true)} {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`} diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx index bcc3a6f33d..5dc33d76df 100644 --- a/src/screens/Updates.tsx +++ b/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'; - -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); -} +import { dateTimeFormatter, epochToDate, getDateString } from '@/util/date.ts'; const groupByDate = (updates: TChapter[]): [date: string, items: number][] => { if (!updates.length) { diff --git a/src/util/date.ts b/src/util/date.ts index 661040020d..92c6a55c7d 100644 --- a/src/util/date.ts +++ b/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) => { - const timeDifference = Date.now() - date.getTime(); - return timeDifference <= timeMS; +export const epochToDate = (epoch: number): Date => { + const date = new Date(0); // The 0 there is the key, which sets the date to the epoch + date.setUTCSeconds(epoch); + return date; }; -export const getElapsedTimeSinceStartOfDay = (date: Date) => { - const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate()); - return date.getTime() - startOfDay.getTime(); -}; +export const isTheSameDay = (first: Date, second: Date): boolean => + first.getDate() === second.getDate() && + 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 yesterdayAsString = getDateString(yesterday) // => "Yesterday at 02:50 AM" + * const todayAsString = getDateString(today); // => "Today" + * 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) => { - const uploadDate = date instanceof Date ? date : new Date(date); +export const getDateString = (date: Date | number, withTime: boolean = false) => { + const actualDate = date instanceof Date ? date : new Date(date); const today = new Date(); - const todayElapsedTime = getElapsedTimeSinceStartOfDay(today); - const yesterday = new Date(today.getTime() - todayElapsedTime - 1000 * 60 * 60 * 24); - const elapsedTimeSinceYesterday = today.getTime() - yesterday.getTime(); + const yesterday = new Date(); + yesterday.setDate(today.getDate() - 1); - const wasUploadedToday = isWithinLastXMillis(uploadDate, todayElapsedTime); - const wasUploadedYesterday = isWithinLastXMillis(uploadDate, elapsedTimeSinceYesterday); + const wasUploadedToday = isTheSameDay(today, actualDate); + 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); };