From 66364bb9bcaf439818d6a2361f0a810d8a7eddd1 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 23 Jan 2025 20:14:50 +0100
Subject: [PATCH] refactor, format resubmission date based on user locale

---
 .../ContributionMessagesFormular.spec.js              |  1 +
 .../ContributionMessagesFormular.vue                  | 11 +++++++++--
 .../components/Federation/CommunityVisualizeItem.vue  | 10 ++++------
 .../components/Federation/FederationVisualizeItem.vue |  6 ++----
 admin/src/composables/useDateLocale.js                | 10 ++++++++++
 5 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 admin/src/composables/useDateLocale.js

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index a64a7dfe9..fdf562a80 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -21,6 +21,7 @@ vi.mock('@vue/apollo-composable', () => ({
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
+    locale: { value: 'en' },
     t: (key) => key,
   }),
 }))
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 8713f5f27..0ae31c905 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -9,7 +9,13 @@
         </BFormGroup>
         <BFormGroup v-if="showResubmissionDate">
           <div class="d-flex my-2">
-            <Datepicker v-model="resubmissionDate" :lower-limit="now" class="form-control" />
+            <Datepicker
+              v-model="resubmissionDate"
+              :locale="dateLocale"
+              input-format="P"
+              :lower-limit="now"
+              class="form-control"
+            />
             <time-picker v-model="resubmissionTime" class="ms-2" />
           </div>
         </BFormGroup>
@@ -80,9 +86,9 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useDateLocale } from '@/composables/useDateLocale'
 import { useMutation } from '@vue/apollo-composable'
 import { useI18n } from 'vue-i18n'
-
 import Datepicker from 'vue3-datepicker'
 import TimePicker from '@/components/input/TimePicker'
 import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
@@ -117,6 +123,7 @@ const emit = defineEmits([
 ])
 
 const { t } = useI18n()
+const dateLocale = useDateLocale()
 const { toastError, toastSuccess } = useAppToast()
 const form = ref({
   text: '',
diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index ed7df4f9b..ecb4b79a0 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -89,9 +89,9 @@
 <script setup>
 import { ref, computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDateLocale } from '@/composables/useDateLocale'
 import { useMutation } from '@vue/apollo-composable'
 import { formatDistanceToNow } from 'date-fns'
-import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
 import EditableGroup from '@/components/input/EditableGroup.vue'
 import FederationVisualizeItem from './FederationVisualizeItem.vue'
 import { updateHomeCommunity } from '@/graphql/updateHomeCommunity'
@@ -99,15 +99,13 @@ import Coordinates from '../input/Coordinates.vue'
 import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'
 import { useAppToast } from '@/composables/useToast'
 
-const locales = { en, de, es, fr, nl }
-
 const props = defineProps({
   item: { type: Object, required: true },
 })
 
 const { item } = toRefs(props)
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 
 const { toastSuccess, toastError } = useAppToast()
 
@@ -147,7 +145,7 @@ const lastAnnouncedAt = computed(() => {
     return formatDistanceToNow(lastAnnouncedAt, {
       includeSecond: true,
       addSuffix: true,
-      locale: locales[locale.value],
+      locale: useDateLocale(),
     })
   }
   return ''
@@ -158,7 +156,7 @@ const createdAt = computed(() => {
     return formatDistanceToNow(new Date(item.value.createdAt), {
       includeSecond: true,
       addSuffix: true,
-      locale: locales[locale.value],
+      locale: useDateLocale(),
     })
   }
   return ''
diff --git a/admin/src/components/Federation/FederationVisualizeItem.vue b/admin/src/components/Federation/FederationVisualizeItem.vue
index 5f8ce3170..ea8a6196f 100644
--- a/admin/src/components/Federation/FederationVisualizeItem.vue
+++ b/admin/src/components/Federation/FederationVisualizeItem.vue
@@ -30,11 +30,9 @@
 </template>
 <script>
 import { formatDistanceToNow } from 'date-fns'
-import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+import { useDateLocale } from '@/composables/useDateLocale'
 import VariantIcon from '@/components/VariantIcon.vue'
 
-const locales = { en, de, es, fr, nl }
-
 export default {
   name: 'FederationVisualizeItem',
   components: { VariantIcon },
@@ -58,7 +56,7 @@ export default {
         ? formatDistanceToNow(new Date(dateString), {
             includeSecond: true,
             addSuffix: true,
-            locale: locales[this.$i18n.locale],
+            locale: useDateLocale,
           })
         : ''
     },
diff --git a/admin/src/composables/useDateLocale.js b/admin/src/composables/useDateLocale.js
new file mode 100644
index 000000000..ccd8fc953
--- /dev/null
+++ b/admin/src/composables/useDateLocale.js
@@ -0,0 +1,10 @@
+import { useI18n } from 'vue-i18n'
+import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+
+const locales = { en, de, es, fr, nl }
+
+export function useDateLocale() {
+  const { locale } = useI18n()
+  const dateLocale = locales[locale.value] || en
+  return dateLocale
+}