From ca2e5d90edd514e67368eb45d210398db56a9c96 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 14 Jun 2024 16:03:33 +0300
Subject: [PATCH] refactor(editor): Migrate `TimeAgo` component to composition
 API (no-changelog) (#9749)

---
 packages/editor-ui/src/components/TimeAgo.vue | 129 ++++++++----------
 1 file changed, 60 insertions(+), 69 deletions(-)

diff --git a/packages/editor-ui/src/components/TimeAgo.vue b/packages/editor-ui/src/components/TimeAgo.vue
index adb9147d2..50f3bac13 100644
--- a/packages/editor-ui/src/components/TimeAgo.vue
+++ b/packages/editor-ui/src/components/TimeAgo.vue
@@ -1,76 +1,67 @@
-<template>
-	<span :title="convertDate">
-		{{ format }}
-	</span>
-</template>
-
-<script lang="ts">
-import type { LocaleFunc } from 'timeago.js';
+<script lang="ts" setup>
 import { format, register } from 'timeago.js';
 import { convertToHumanReadableDate } from '@/utils/typesUtils';
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+import { computed, onBeforeMount } from 'vue';
 import { useRootStore } from '@/stores/n8nRoot.store';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'TimeAgo',
-	props: {
-		date: {
-			type: String,
-			required: true,
-		},
-		capitalize: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		...mapStores(useRootStore),
-		defaultLocale(): string {
-			return this.rootStore.defaultLocale;
-		},
-		format(): string {
-			const text = format(this.date, this.defaultLocale);
+type Props = {
+	date: string;
+	capitalize?: boolean;
+};
 
-			if (!this.capitalize) {
-				return text.toLowerCase();
-			}
-
-			return text;
-		},
-		convertDate(): string {
-			const date = new Date(this.date);
-			const epoch = date.getTime();
-			return convertToHumanReadableDate(epoch);
-		},
-	},
-	beforeMount() {
-		register(this.defaultLocale, this.localeFunc as LocaleFunc);
-	},
-	methods: {
-		localeFunc(_: number, index: number): [string, string] {
-			// number: the timeago / timein number;
-			// index: the index of array below;
-			return [
-				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
-				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
-				[
-					this.$locale.baseText('timeAgo.oneMinuteAgo'),
-					this.$locale.baseText('timeAgo.inOneMinute'),
-				],
-				[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
-				[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
-				[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
-				[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
-				[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
-				[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
-				[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
-				[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
-				[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
-				[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
-				[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
-			][index] as [string, string];
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	capitalize: false,
 });
+
+const rootStore = useRootStore();
+const i18n = useI18n();
+
+const defaultLocale = computed(() => rootStore.defaultLocale);
+const formatted = computed(() => {
+	const text = format(props.date, defaultLocale.value);
+
+	if (!props.capitalize) {
+		return text.toLowerCase();
+	}
+
+	return text;
+});
+
+const convertDate = computed(() => {
+	const date = new Date(props.date);
+	const epoch = date.getTime();
+	return convertToHumanReadableDate(epoch);
+});
+
+onBeforeMount(() => {
+	register(defaultLocale.value, localeFunc);
+});
+
+function localeFunc(_: number, index: number): [string, string] {
+	// number: the timeago / timein number;
+	// index: the index of array below;
+	return [
+		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')],
+		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
+		[i18n.baseText('timeAgo.oneMinuteAgo'), i18n.baseText('timeAgo.inOneMinute')],
+		[i18n.baseText('timeAgo.minutesAgo'), i18n.baseText('timeAgo.inMinutes')],
+		[i18n.baseText('timeAgo.oneHourAgo'), i18n.baseText('timeAgo.inOneHour')],
+		[i18n.baseText('timeAgo.hoursAgo'), i18n.baseText('timeAgo.inHours')],
+		[i18n.baseText('timeAgo.oneDayAgo'), i18n.baseText('timeAgo.inOneDay')],
+		[i18n.baseText('timeAgo.daysAgo'), i18n.baseText('timeAgo.inDays')],
+		[i18n.baseText('timeAgo.oneWeekAgo'), i18n.baseText('timeAgo.inOneWeek')],
+		[i18n.baseText('timeAgo.weeksAgo'), i18n.baseText('timeAgo.inWeeks')],
+		[i18n.baseText('timeAgo.oneMonthAgo'), i18n.baseText('timeAgo.inOneMonth')],
+		[i18n.baseText('timeAgo.monthsAgo'), i18n.baseText('timeAgo.inMonths')],
+		[i18n.baseText('timeAgo.oneYearAgo'), i18n.baseText('timeAgo.inOneYear')],
+		[i18n.baseText('timeAgo.yearsAgo'), i18n.baseText('timeAgo.inYears')],
+	][index] as [string, string];
+}
 </script>
+
+<template>
+	<span :title="convertDate">
+		{{ formatted }}
+	</span>
+</template>