feat: make salutation i18n static

src/composables/useDateTimeSalutation.test.ts

@@ -1,31 +1,31 @@
 import {describe, it, expect} from 'vitest'
-import {hourToSalutation} from './useDateTimeSalutation'
+import {hourToDaytime} from './useDateTimeSalutation'
 
-const dateWithHour = (hours: number): Date => {
+function dateWithHour(hours: number): Date {
-	const date = new Date()
+	const newDate = new Date()
-	date.setHours(hours)
+	newDate.setHours(hours, 0, 0,0 )
-	return date
+	return newDate
 }
 
 describe('Salutation', () => {
 	it('shows the right salutation in the night', () => {
-		const salutation = hourToSalutation(dateWithHour(4))
+		const salutation = hourToDaytime(dateWithHour(4))
-		expect(salutation).toBe('home.welcomeNight')
+		expect(salutation).toBe('night')
 	})
 	it('shows the right salutation in the morning', () => {
-		const salutation = hourToSalutation(dateWithHour(8))
+		const salutation = hourToDaytime(dateWithHour(8))
-		expect(salutation).toBe('home.welcomeMorning')
+		expect(salutation).toBe('morning')
 	})
 	it('shows the right salutation in the day', () => {
-		const salutation = hourToSalutation(dateWithHour(13))
+		const salutation = hourToDaytime(dateWithHour(13))
-		expect(salutation).toBe('home.welcomeDay')
+		expect(salutation).toBe('day')
 	})
 	it('shows the right salutation in the night', () => {
-		const salutation = hourToSalutation(dateWithHour(20))
+		const salutation = hourToDaytime(dateWithHour(20))
-		expect(salutation).toBe('home.welcomeEvening')
+		expect(salutation).toBe('evening')
 	})
 	it('shows the right salutation in the night again', () => {
-		const salutation = hourToSalutation(dateWithHour(23))
+		const salutation = hourToDaytime(dateWithHour(23))
-		expect(salutation).toBe('home.welcomeNight')
+		expect(salutation).toBe('night')
 	})
 })

src/composables/useDateTimeSalutation.ts

@@ -1,31 +1,35 @@
-import {computed} from 'vue'
+import {computed, unref} from 'vue'
-import {useNow} from '@vueuse/core'
+import {useI18n} from 'vue-i18n'
+import {useNow, type MaybeRef} from '@vueuse/core'
 
-const TRANSLATION_KEY_PREFIX = 'home.welcome'
+type Daytime = 'night' | 'morning' | 'day' | 'evening'
 
-export function hourToSalutation(now: Date) {
+export function hourToDaytime(now: Date): Daytime {
 	const hours = now.getHours()
 
-	if (hours < 5) {
+	const daytimeMap = {
-		return `${TRANSLATION_KEY_PREFIX}Night`
+		night: hours < 5 || hours > 23,
-	}
+		morning: hours < 11,
+		day: hours < 18,
+		evening: hours < 23,
+	 } as Record<Daytime, boolean>
 
-	if (hours < 11) {
+	return (Object.keys(daytimeMap) as Daytime[]).find((daytime) => daytimeMap[daytime]) || 'night'
-		return `${TRANSLATION_KEY_PREFIX}Morning`
-	}
-
-	if (hours < 18) {
-		return `${TRANSLATION_KEY_PREFIX}Day`
-	}
-
-	if (hours < 23) {
-		return `${TRANSLATION_KEY_PREFIX}Evening`
-	}
-
-	return `${TRANSLATION_KEY_PREFIX}Night`
 }
 
-export function useDateTimeSalutation() {
+export function useDateTimeSalutation(username: MaybeRef<string>) {
+	const {t} = useI18n({useScope: 'global'})
 	const now = useNow()
-	return computed(() => hourToSalutation(now.value))
+	
+	const daytime = computed(() => hourToDaytime(now.value))
+	const name = computed(() => unref(username))
+
+	const salutations = {
+		'night': () => t('home.welcomeNight', {username: name.value}),
+		'morning': () => t('home.welcomeMorning', {username: name.value}),
+		'day': () => t('home.welcomeDay', {username: name.value}),
+		'evening': () => t('home.welcomeEvening', {username: name.value}),
+	} as Record<Daytime, () => string>
+
+	return computed(() => salutations[daytime.value]())
 }

src/i18n/lang/en.json

@@ -1,9 +1,9 @@
 {
   "home": {
-    "welcomeNight": "Good Night {username}",
+    "welcomeNight": "Good Night {username}!",
-    "welcomeMorning": "Good Morning {username}",
+    "welcomeMorning": "Good Morning {username}!",
-    "welcomeDay": "Hi {username}",
+    "welcomeDay": "Hi {username}!",
-    "welcomeEvening": "Good Evening {username}",
+    "welcomeEvening": "Good Evening {username}!",
     "lastViewed": "Last viewed",
     "list": {
       "newText": "You can create a new list for your new tasks:",

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="content has-text-centered">
 		<h2 v-if="userInfo">
-			{{ $t(welcome, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
+			{{ salutation }}
 		</h2>
 		<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
 			{{
@@ -78,7 +78,8 @@ import {useNamespaceStore} from '@/stores/namespaces'
 import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 
-const welcome = useDateTimeSalutation()
+const username = computed(() => userInfo.name !== '' ? userInfo.name : userInfo.username)
+const salutation = useDateTimeSalutation(username)
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()