feat: use useNow to provide auto updates

cypress/integration/misc/home.spec.js

@@ -1,35 +0,0 @@
-import '../../support/authenticateUser'
-
-const setHours = hours => {
-	const date = new Date()
-	date.setHours(hours)
-	cy.clock(+date)
-}
-
-describe('Home Page', () => {
-	it('shows the right salutation in the night', () => {
-		setHours(4)
-		cy.visit('/')
-		cy.get('h2').should('contain', 'Good Night')
-	})
-	it('shows the right salutation in the morning', () => {
-		setHours(8)
-		cy.visit('/')
-		cy.get('h2').should('contain', 'Good Morning')
-	})
-	it('shows the right salutation in the day', () => {
-		setHours(13)
-		cy.visit('/')
-		cy.get('h2').should('contain', 'Hi')
-	})
-	it('shows the right salutation in the night', () => {
-		setHours(20)
-		cy.visit('/')
-		cy.get('h2').should('contain', 'Good Evening')
-	})
-	it('shows the right salutation in the night again', () => {
-		setHours(23)
-		cy.visit('/')
-		cy.get('h2').should('contain', 'Good Night')
-	})
-})

src/helpers/hourToSalutation.test.ts

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

src/helpers/hourToSalutation.ts

@@ -0,0 +1,26 @@
+import {useNow} from '@vueuse/core'
+import {Ref} from 'vue'
+
+const TRANSLATION_KEY_PREFIX = 'home.welcome'
+
+export function hourToSalutation(now: Date | Ref<Date> = useNow()): String {
+	const hours = now instanceof Date ? new Date(now).getHours() : new Date(now.value).getHours()
+
+	if (hours < 5) {
+		return `${TRANSLATION_KEY_PREFIX}Night`
+	}
+
+	if (hours < 11) {
+		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`
+}

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="content has-text-centered">
 		<h2 v-if="userInfo">
-			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
+			{{ $t(welcome, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
 		<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
 			{{
@@ -57,7 +57,6 @@
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
 import {useStore} from 'vuex'
-import {useNow} from '@vueuse/core'
 
 import Message from '@/components/misc/message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
@@ -67,29 +66,9 @@ import AddTask from '@/components/tasks/add-task.vue'
 import {getHistory} from '@/modules/listHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
+import {hourToSalutation} from '@/helpers/hourToSalutation'
 
-const now = useNow()
-const welcome = computed(() => {
-	const hours = new Date(now.value).getHours()
-
-	if (hours < 5) {
-		return 'Night'
-	}
-
-	if (hours < 11) {
-		return 'Morning'
-	}
-
-	if (hours < 18) {
-		return 'Day'
-	}
-
-	if (hours < 23) {
-		return 'Evening'
-	}
-
-	return 'Night'
-})
+const welcome = computed(hourToSalutation)
 
 const store = useStore()
 const listHistory = computed(() => {