Use "Intl.DateTimeFormat" instead of Date locale functions

It's recommended to use "Intl.DateTimeFormat" instead of using Date locale functions which get called often with the same options (e.g. https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/date/tolocaletimestring)

src/components/library/UpdateChecker.tsx

@@ -16,6 +16,7 @@ import { makeToast } from '@/components/util/Toast';
 import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
 import { Progress } from '@/components/util/Progress';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { dateTimeFormatter } from '@/util/date.ts';
 
 const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undefined) => {
     if (!status) {
@@ -82,7 +83,7 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate?:
     return (
         <Tooltip
             title={t('library.settings.global_update.label.last_update_tooltip', {
-                date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
+                date: lastUpdateTimestamp ? dateTimeFormatter.format(+lastUpdateTimestamp) : '-',
             })}
         >
             <IconButton onClick={onClick} disabled={loading}>

src/screens/Updates.tsx

@@ -32,6 +32,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
@@ -54,7 +55,7 @@ function getDateString(date: Date) {
     const yesterday = new Date();
     yesterday.setDate(today.getDate() - 1);
     if (isTheSameDay(yesterday, date)) return translate('global.date.label.yesterday');
-    return date.toLocaleDateString();
+    return dateFormatter.format(date);
 }
 
 const groupByDate = (updates: TChapter[]): [date: string, items: number][] => {
@@ -150,7 +151,7 @@ export const Updates: React.FC = () => {
                 }}
             >
                 {t('library.settings.global_update.label.last_update', {
-                    date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
+                    date: lastUpdateTimestamp ? dateTimeFormatter.format(+lastUpdateTimestamp) : '-',
                 })}
             </Typography>
             <StyledGroupedVirtuoso

src/util/date.ts

@@ -8,6 +8,20 @@
 
 import { t } from 'i18next';
 
+export const timeFormatter = new Intl.DateTimeFormat(navigator.language, { hour: '2-digit', minute: '2-digit' });
+export const dateFormatter = new Intl.DateTimeFormat(navigator.language, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+});
+export const dateTimeFormatter = new Intl.DateTimeFormat(navigator.language, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+});
+
 export const isWithinLastXMillis = (date: Date, timeMS: number) => {
     const timeDifference = Date.now() - date.getTime();
     return timeDifference <= timeMS;
@@ -48,12 +62,7 @@ export const getUploadDateString = (date: Date | number) => {
     const wasUploadedYesterday = isWithinLastXMillis(uploadDate, elapsedTimeSinceYesterday);
 
     const addTimeString = wasUploadedToday || wasUploadedYesterday;
-    const timeString = addTimeString
-        ? uploadDate.toLocaleTimeString(undefined, {
-              hour: '2-digit',
-              minute: '2-digit',
-          })
-        : '';
+    const timeString = addTimeString ? timeFormatter.format(uploadDate) : '';
 
     if (wasUploadedToday) {
         return t('global.date.label.today_at', { timeString });
@@ -63,9 +72,5 @@ export const getUploadDateString = (date: Date | number) => {
         return t('global.date.label.yesterday_at', { timeString });
     }
 
-    return uploadDate.toLocaleDateString(undefined, {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-    });
+    return dateFormatter.format(uploadDate);
 };