From 4e979f3375a3bb276ca0b5569b932065fda0c4f0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Mar 2025 10:24:45 +0100
Subject: [PATCH] fix(i18n): use actually set language for dates

This fixes a bug where a translated string was used as the locale for dates, instead of the actually configured locale.

Resolves https://github.com/go-vikunja/vikunja/issues/391
---
 frontend/src/helpers/time/formatDate.ts   | 9 +++++++--
 frontend/src/i18n/lang/en.json            | 1 -
 frontend/src/i18n/useDayjsLanguageSync.ts | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/helpers/time/formatDate.ts b/frontend/src/helpers/time/formatDate.ts
index dbe73de85..271dc61fd 100644
--- a/frontend/src/helpers/time/formatDate.ts
+++ b/frontend/src/helpers/time/formatDate.ts
@@ -4,6 +4,7 @@ import dayjs from 'dayjs'
 import {i18n} from '@/i18n'
 import {createSharedComposable} from '@vueuse/core'
 import {computed, toValue, type MaybeRefOrGetter} from 'vue'
+import {DAYJS_LOCALE_MAPPING} from '@/i18n/useDayjsLanguageSync.ts'
 
 export function dateIsValid(date: Date | null) {
 	if (date === null) {
@@ -13,12 +14,14 @@ export function dateIsValid(date: Date | null) {
 	return date instanceof Date && !isNaN(date)
 }
 
-export const formatDate = (date: Date | string | null, f: string, locale = i18n.global.t('date.locale')) => {
+export const formatDate = (date: Date | string | null, f: string) => {
 	if (!dateIsValid(date)) {
 		return ''
 	}
 
 	date = createDateFromString(date)
+	
+	const locale = DAYJS_LOCALE_MAPPING[i18n.global.locale.value.toLowerCase()] ?? 'en'
 
 	return date 
 		? dayjs(date).locale(locale).format(f) 
@@ -33,13 +36,15 @@ export function formatDateShort(date) {
 	return formatDate(date, 'lll')
 }
 
-export const formatDateSince = (date: Date | string | null, locale = i18n.global.t('date.locale')) => {
+export const formatDateSince = (date: Date | string | null) => {
 	if (!dateIsValid(date)) {
 		return ''
 	}
 
 	date = createDateFromString(date)
 
+	const locale = DAYJS_LOCALE_MAPPING[i18n.global.locale.value.toLowerCase()] ?? 'en'
+
 	return date
 		? dayjs(date).locale(locale).fromNow()
 		: ''
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 3ffec1985..0b7d96be6 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -1130,7 +1130,6 @@
     }
   },
   "date": {
-    "locale": "en",
     "altFormatLong": "j M Y, H:i",
     "altFormatShort": "j M Y"
   },
diff --git a/frontend/src/i18n/useDayjsLanguageSync.ts b/frontend/src/i18n/useDayjsLanguageSync.ts
index 709a98676..2535a7d19 100644
--- a/frontend/src/i18n/useDayjsLanguageSync.ts
+++ b/frontend/src/i18n/useDayjsLanguageSync.ts
@@ -61,7 +61,7 @@ export async function loadDayJsLocale(language: SupportedLocale) {
 	if (language === 'en') {
 		return
 	}
-	
+
 	await DAYJS_LANGUAGE_IMPORTS[language.toLowerCase()]()
 }