From 1c8cb441f7d344f1c80cc67b0b06a5a9fa0da52d Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sat, 18 May 2024 19:12:11 +0900
Subject: [PATCH] refactor: make getTranslationOrDefault function composable

---
 apps/web/app/components/SponsorPageSection.vue | 18 +++++-------------
 apps/web/app/composables/useTranslation.ts     | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/app/composables/useTranslation.ts

diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
index a1d68ca5..b00ec065 100644
--- a/apps/web/app/components/SponsorPageSection.vue
+++ b/apps/web/app/components/SponsorPageSection.vue
@@ -2,33 +2,25 @@
 import { useI18n } from '#i18n'
 import { useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
+import { useTranslation } from '@/composables/useTranslation'
 
 const config = useRuntimeConfig()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
 
-const { t, te } = useI18n()
-const { locale } = useLocaleCurrent()
-/**
- * Get translation or return empty string
- * @param key - translation key
- * @returns translation or empty string
- */
-function getTranslationOrDefault(key: string): string {
-  return te(key, locale.value) ? t(key) : ''
-}
+const { t } = useI18n()
+const { translate } = useTranslation()
 
 const periodStart = {
   prefixYear: t('prefix_year'),
   date: t('sponsor.start_date'),
-  dayOfWeek: getTranslationOrDefault('day_of_week.monday'),
+  dayOfWeek: translate('day_of_week.monday'),
 }
 
 // const periodEnd = {
 //   suffixYear: t('suffix_year'),
 //   date: t('sponsor.end_date'),
-//   dayOfWeek: getTranslationOrDefault('day_of_week.thursday'),
+//   dayOfWeek: translate('day_of_week.thursday'),
 // }
 </script>
 
diff --git a/apps/web/app/composables/useTranslation.ts b/apps/web/app/composables/useTranslation.ts
new file mode 100644
index 00000000..fb535b9a
--- /dev/null
+++ b/apps/web/app/composables/useTranslation.ts
@@ -0,0 +1,18 @@
+import { useI18n } from '#i18n'
+import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
+
+export function useTranslation() {
+  const { t, te } = useI18n()
+  const { locale } = useLocaleCurrent()
+  function translate(key: string) {
+    return te(key, locale.value) ? t(key) : ''
+  }
+
+  return {
+    /**
+     * return translation or empty string
+     * https://github.com/vuejs-jp/vuefes-2024/pull/136#discussion_r1597312717
+     */
+    translate
+  }
+}
\ No newline at end of file