From e9ee43b9b457f60cbc5315e32eb74c2ac1505f28 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Tue, 21 May 2024 21:27:31 +0200 Subject: [PATCH] Use "DayJs" instead of "Date" --- src/lib/dayjs/Setup.ts | 20 +++++++++++++++++ src/screens/settings/About.tsx | 3 ++- src/util/date.ts | 39 +++++++++++----------------------- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/src/lib/dayjs/Setup.ts b/src/lib/dayjs/Setup.ts index 8189769e..0b2aa1c0 100644 --- a/src/lib/dayjs/Setup.ts +++ b/src/lib/dayjs/Setup.ts @@ -8,10 +8,30 @@ import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; +import calendar from 'dayjs/plugin/calendar'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import isToday from 'dayjs/plugin/isToday'; +import isYesterday from 'dayjs/plugin/isYesterday'; +// import localizedFormat from 'dayjs/plugin/localizedFormat'; +// import updateLocale from 'dayjs/plugin/updateLocale'; +// import { t } from 'i18next'; + import { loadDayJsLocale } from '@/util/language.tsx'; dayjs.extend(customParseFormat); +dayjs.extend(calendar); +dayjs.extend(relativeTime); +dayjs.extend(isToday); +dayjs.extend(isYesterday); +// dayjs.extend(localizedFormat); +// dayjs.extend(updateLocale); loadDayJsLocale(navigator.language).then(() => { dayjs.locale(navigator.language); + // dayjs.updateLocale(navigator.language, { + // calendar: { + // lastDay: `[${t('global.date.label.yesterday_at')}] LT`, + // sameDay: `[${t('global.date.label.today_at')}] LT`, + // }, + // }); }); diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx index 7cf6e74f..d5fea80b 100644 --- a/src/screens/settings/About.tsx +++ b/src/screens/settings/About.tsx @@ -29,6 +29,7 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder'; import { GetAboutQuery, UpdateState } from '@/lib/graphql/generated/graphql.ts'; import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx'; +import { epochToDate } from '@/util/date.ts'; type AboutServer = GetAboutQuery['aboutServer']; @@ -37,7 +38,7 @@ export const getVersion = (aboutServer: AboutServer) => { return `${aboutServer.version}-${aboutServer.revision}`; }; -const getBuildTime = (aboutServer: AboutServer) => new Date(Number(aboutServer.buildTime) * 1000).toUTCString(); +const getBuildTime = (aboutServer: AboutServer) => epochToDate(Number(aboutServer.buildTime)).toString(); const getUpdateCheckButtonIcon = ( isLoading: boolean, diff --git a/src/util/date.ts b/src/util/date.ts index 92c6a55c..949b100a 100644 --- a/src/util/date.ts +++ b/src/util/date.ts @@ -6,6 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ +import dayjs, { Dayjs } from 'dayjs'; import { t } from 'i18next'; export const timeFormatter = new Intl.DateTimeFormat(navigator.language, { hour: '2-digit', minute: '2-digit' }); @@ -22,16 +23,9 @@ export const dateTimeFormatter = new Intl.DateTimeFormat(navigator.language, { minute: '2-digit', }); -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 epochToDate = (epoch: number): Dayjs => dayjs.unix(epoch); -export const isTheSameDay = (first: Date, second: Date): boolean => - first.getDate() === second.getDate() && - first.getMonth() === second.getMonth() && - first.getFullYear() === second.getFullYear(); +export const isSameDay = (first: Dayjs, second: Dayjs): boolean => first.isSame(second, 'day'); /** * Returns a string in localized format for the passed date. @@ -41,9 +35,9 @@ export const isTheSameDay = (first: Date, second: Date): boolean => * 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 today = dayjs(); + * const yesterday = today.subtract(1, 'day'); + * const someDate = dayjs('1377-04-20'); * * const todayAsString = getDateString(today); // => "Today" * const yesterdayAsString = getDateString(yesterday, true) // => "Yesterday at 02:50 AM" @@ -53,20 +47,11 @@ export const isTheSameDay = (first: Date, second: Date): boolean => * @param date * @param withTime */ -export const getDateString = (date: Date | number, withTime: boolean = false) => { - const actualDate = date instanceof Date ? date : new Date(date); +export const getDateString = (date: Dayjs | number, withTime: boolean = false) => { + const actualDate = date instanceof dayjs ? date : dayjs(date); + const timeString = timeFormatter.format(actualDate.toDate()); - const today = new Date(); - const yesterday = new Date(); - yesterday.setDate(today.getDate() - 1); - - const wasUploadedToday = isTheSameDay(today, actualDate); - const wasUploadedYesterday = isTheSameDay(yesterday, actualDate); - - const addTimeString = wasUploadedToday || wasUploadedYesterday; - const timeString = addTimeString ? timeFormatter.format(actualDate) : ''; - - if (wasUploadedToday) { + if (actualDate.isToday()) { if (withTime) { return t('global.date.label.today_at', { timeString }); } @@ -74,7 +59,7 @@ export const getDateString = (date: Date | number, withTime: boolean = false) => return t('global.date.label.today'); } - if (wasUploadedYesterday) { + if (actualDate.isYesterday()) { if (withTime) { return t('global.date.label.yesterday_at', { timeString }); } @@ -82,5 +67,5 @@ export const getDateString = (date: Date | number, withTime: boolean = false) => return t('global.date.label.yesterday'); } - return dateFormatter.format(actualDate); + return dateFormatter.format(actualDate.toDate()); };