From df985a8ae6cbcf1ffa9d5543b1cc26c6c12f08a4 Mon Sep 17 00:00:00 2001
From: Gavin <gavinfreeborn@gmail.com>
Date: Tue, 20 Jun 2023 12:39:47 -0700
Subject: [PATCH 1/2] Auto translate date formate based on current I18n Locale

Signed-off-by: Gavin <gavinfreeborn@gmail.com>
---
 .../src/components/common/LocaleSwitcher.vue  |  3 ++-
 .../tenant-ui/frontend/src/helpers/index.ts   | 25 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue b/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
index a08d14ab3..4f2e9b634 100644
--- a/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
+++ b/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
@@ -5,10 +5,11 @@
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
 import { useI18n } from 'vue-i18n';
+import { i18nLocale } from '@/helpers';
 
 const { locale } = useI18n({ useScope: 'global' });
 
-const localeList = ['en', 'fr', 'jp'];
+const localeList: Array<i18nLocale> = ['en', 'fr', 'jp'];
 </script>
 
 <style lang="scss" scoped>
diff --git a/services/tenant-ui/frontend/src/helpers/index.ts b/services/tenant-ui/frontend/src/helpers/index.ts
index 46a552d80..fbc24e86e 100644
--- a/services/tenant-ui/frontend/src/helpers/index.ts
+++ b/services/tenant-ui/frontend/src/helpers/index.ts
@@ -1,10 +1,33 @@
 import { format, fromUnixTime, parseJSON } from 'date-fns';
+import { enCA, fr, ja } from 'date-fns/locale';
+import { useI18n } from 'vue-i18n';
+
+export type i18nLocale = 'en' | 'fr' | 'jp';
+
+function i18n2DateLocale(i18nLocal: i18nLocale) {
+  switch (i18nLocal) {
+    case 'en':
+      return enCA;
+    case 'fr':
+      return fr;
+    case 'jp':
+      return ja;
+    default:
+      console.log(
+        `No valid translation found for ${i18nLocal} defaulting to enCA`
+      );
+      return enCA;
+  }
+}
 
 function _dateFnsFormat(value: string, formatter: string) {
+  const { locale } = useI18n();
   const formatted = '';
   try {
     if (value) {
-      return format(parseJSON(value), formatter);
+      return format(parseJSON(value), formatter, {
+        locale: i18n2DateLocale(locale.value as i18nLocale),
+      });
     }
   } catch (error) {
     console.error(`_dateFnsFormat: Error parsing ${value} to ${error}`);

From e7cbb7e6a347672bdd891d45c212a7344b4bdf77 Mon Sep 17 00:00:00 2001
From: Gavin <gavinfreeborn@gmail.com>
Date: Tue, 20 Jun 2023 13:06:15 -0700
Subject: [PATCH 2/2] Drop default translation and use exception to enforce
 type safety

Signed-off-by: Gavin <gavinfreeborn@gmail.com>
---
 .../src/components/common/LocaleSwitcher.vue  |  4 +--
 .../tenant-ui/frontend/src/helpers/index.ts   | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue b/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
index 4f2e9b634..be374ccfa 100644
--- a/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
+++ b/services/tenant-ui/frontend/src/components/common/LocaleSwitcher.vue
@@ -5,11 +5,11 @@
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
 import { useI18n } from 'vue-i18n';
-import { i18nLocale } from '@/helpers';
+import { I18nLocale } from '@/helpers';
 
 const { locale } = useI18n({ useScope: 'global' });
 
-const localeList: Array<i18nLocale> = ['en', 'fr', 'jp'];
+const localeList: Array<I18nLocale> = ['en', 'fr', 'jp'];
 </script>
 
 <style lang="scss" scoped>
diff --git a/services/tenant-ui/frontend/src/helpers/index.ts b/services/tenant-ui/frontend/src/helpers/index.ts
index fbc24e86e..67bcb2452 100644
--- a/services/tenant-ui/frontend/src/helpers/index.ts
+++ b/services/tenant-ui/frontend/src/helpers/index.ts
@@ -2,22 +2,22 @@ import { format, fromUnixTime, parseJSON } from 'date-fns';
 import { enCA, fr, ja } from 'date-fns/locale';
 import { useI18n } from 'vue-i18n';
 
-export type i18nLocale = 'en' | 'fr' | 'jp';
+export type I18nLocale = 'en' | 'fr' | 'jp';
 
-function i18n2DateLocale(i18nLocal: i18nLocale) {
-  switch (i18nLocal) {
+function i18n2DateLocale(i18nLocale: I18nLocale): Locale {
+  switch (i18nLocale) {
     case 'en':
       return enCA;
     case 'fr':
       return fr;
     case 'jp':
       return ja;
-    default:
-      console.log(
-        `No valid translation found for ${i18nLocal} defaulting to enCA`
-      );
-      return enCA;
   }
+  // This way we can fall back to a default while using typescript to
+  // enforce that all instances of i18nLocale have a corresponding case in the
+  // switch statement
+  /* eslint no-unreachable: "error" */
+  throw new Error('No valid date-fn');
 }
 
 function _dateFnsFormat(value: string, formatter: string) {
@@ -25,9 +25,17 @@ function _dateFnsFormat(value: string, formatter: string) {
   const formatted = '';
   try {
     if (value) {
-      return format(parseJSON(value), formatter, {
-        locale: i18n2DateLocale(locale.value as i18nLocale),
-      });
+      try {
+        return format(parseJSON(value), formatter, {
+          locale: i18n2DateLocale(locale.value as I18nLocale),
+        });
+      } catch {
+        // Incase the locale was never set (used outside of a vue component)
+        console.log(
+          `No valid translation found for ${locale.value} defaulting to enCA`
+        );
+        return format(parseJSON(value), formatter, { locale: enCA });
+      }
     }
   } catch (error) {
     console.error(`_dateFnsFormat: Error parsing ${value} to ${error}`);