From 5ae16dbb6627b990a18a8f757fe0420bc09a183b Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 12 Apr 2024 21:15:54 +0200
Subject: [PATCH] fix(NcDateTime): When relative time is disabled return a
 string and not the reference to it

The `.value` call was missing in case of disabled relative time. This causes the string to be quoted (because of stringification of the computed value).
To prevent similar issues the file is now migrated to Typescript, also fixed some other issues discovered by type checking.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcDateTime/NcDateTime.vue      |  3 +-
 src/composables/index.js                      |  2 +-
 ...FormatDateTime.js => useFormatDateTime.ts} | 50 +++++++++++++------
 3 files changed, 38 insertions(+), 17 deletions(-)
 rename src/composables/{useFormatDateTime.js => useFormatDateTime.ts} (73%)

diff --git a/src/components/NcDateTime/NcDateTime.vue b/src/components/NcDateTime/NcDateTime.vue
index 9946007a52..9e8736e190 100644
--- a/src/components/NcDateTime/NcDateTime.vue
+++ b/src/components/NcDateTime/NcDateTime.vue
@@ -109,7 +109,8 @@ h4 {
 <template>
 	<span class="nc-datetime"
 		:data-timestamp="timestamp"
-		:title="formattedFullTime">{{ formattedTime }}</span>
+		:title="formattedFullTime"
+		v-text="formattedTime" />
 </template>
 
 <script>
diff --git a/src/composables/index.js b/src/composables/index.js
index d71757b732..e9dd0fb13a 100644
--- a/src/composables/index.js
+++ b/src/composables/index.js
@@ -22,4 +22,4 @@
 
 export * from './useIsFullscreen/index.js'
 export * from './useIsMobile/index.js'
-export * from './useFormatDateTime.js'
+export * from './useFormatDateTime.ts'
diff --git a/src/composables/useFormatDateTime.js b/src/composables/useFormatDateTime.ts
similarity index 73%
rename from src/composables/useFormatDateTime.js
rename to src/composables/useFormatDateTime.ts
index b8aecaea2c..401b204911 100644
--- a/src/composables/useFormatDateTime.js
+++ b/src/composables/useFormatDateTime.ts
@@ -21,7 +21,7 @@
  */
 
 import { getCanonicalLocale } from '@nextcloud/l10n'
-import { computed, onUnmounted, ref, onMounted, watch, unref } from 'vue'
+import { computed, onUnmounted, ref, onMounted, watch, unref, type MaybeRef, type ComputedRef } from 'vue'
 import { t } from '../l10n.js'
 
 const FEW_SECONDS_AGO = {
@@ -30,6 +30,21 @@ const FEW_SECONDS_AGO = {
 	narrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
 }
 
+interface FormatDateOptions {
+	/**
+	 * The format used for displaying, or if relative time is used the format used for the title
+	 */
+	format?: Intl.DateTimeFormatOptions
+	/**
+	 * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+	 */
+	ignoreSeconds?: boolean
+	/**
+	 * Wether to display the timestamp as time from now
+	 */
+	relativeTime?: false | 'long' | 'short' | 'narrow'
+}
+
 /**
  * Composable for formatting time stamps using current users locale
  *
@@ -39,35 +54,40 @@ const FEW_SECONDS_AGO = {
  * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`
  * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)
  */
-export function useFormatDateTime(timestamp = Date.now(), opts = {}) {
+export function useFormatDateTime(
+	timestamp: MaybeRef<Date|number> | ComputedRef<Date|number> = Date.now(),
+	opts: MaybeRef<FormatDateOptions>|ComputedRef<FormatDateOptions> = {}
+) {
 	// Current time as Date.now is not reactive
 	const currentTime = ref(Date.now())
 	// The interval ID for the window
-	let intervalId = null
+	let intervalId: number|undefined = undefined
 
 	const options = ref({
-		timeStyle: 'medium',
-		dateStyle: 'short',
-		relativeTime: 'long',
+		format: {
+			timeStyle: 'medium',
+			dateStyle: 'short',
+		} as Intl.DateTimeFormatOptions,
+		relativeTime: 'long' as const,
 		ignoreSeconds: false,
 		...unref(opts),
 	})
-	const wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }))
+	const wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))
 
 	/** ECMA Date object of the timestamp */
 	const date = computed(() => new Date(unref(timestamp)))
 
-	const formattedFullTime = computed(() => {
+	const formattedFullTime = computed<string>(() => {
 		const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)
 		return formatter.format(date.value)
 	})
 
 	/** Time string formatted for main text */
-	const formattedTime = computed(() => {
+	const formattedTime = computed<string>(() => {
 		if (wrappedOptions.value.relativeTime !== false) {
 			const formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })
 
-			const diff = date.value - currentTime.value
+			const diff = date.value.getTime() - currentTime.value
 			const seconds = diff / 1000
 			if (Math.abs(seconds) <= 90) {
 				if (wrappedOptions.value.ignoreSeconds) {
@@ -98,22 +118,22 @@ export function useFormatDateTime(timestamp = Date.now(), opts = {}) {
 			}
 			return formatter.format(Math.round(days / 365), 'year')
 		}
-		return formattedFullTime
+		return formattedFullTime.value
 	})
 
 	// Set or clear interval if relative time is dis/enabled
-	watch([wrappedOptions], (opts) => {
+	watch([wrappedOptions], () => {
 		window.clearInterval(intervalId)
 		intervalId = undefined
-		if (opts.relativeTime) {
-			intervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)
+		if (wrappedOptions.value.relativeTime) {
+			intervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)
 		}
 	})
 
 	// Start the interval for setting the current time if relative time is enabled
 	onMounted(() => {
 		if (wrappedOptions.value.relativeTime !== false) {
-			intervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)
+			intervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)
 		}
 	})