✨ Render base strings

packages/editor-ui/src/components/TimeAgo.vue

@@ -1,39 +1,19 @@
-<template functional>
-	<span :title="$options.methods.convertToHumanReadableDate($props)">
-		{{$options.methods.format(props)}}
+<template>
+	<span :title="convertDate">
+		{{ format }}
 	</span>
 </template>
 
 <script lang="ts">
 import { format, LocaleFunc, register } from 'timeago.js';
 import { convertToHumanReadableDate } from './helpers';
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import mixins from 'vue-typed-mixins';
+import { renderText } from './mixins/renderText';
 
-const localeFunc = (num: number, index: number, totalSec: number): [string, string] => {
-	// number: the timeago / timein number;
-	// index: the index of array below;
-	// totalSec: total seconds between date to be formatted and today's date;
-	return [
-		['Just now', 'Right now'],
-		['Just now', 'Right now'], // ['%s seconds ago', 'in %s seconds'],
-		['1 minute ago', 'in 1 minute'],
-		['%s minutes ago', 'in %s minutes'],
-		['1 hour ago', 'in 1 hour'],
-		['%s hours ago', 'in %s hours'],
-		['1 day ago', 'in 1 day'],
-		['%s days ago', 'in %s days'],
-		['1 week ago', 'in 1 week'],
-		['%s weeks ago', 'in %s weeks'],
-		['1 month ago', 'in 1 month'],
-		['%s months ago', 'in %s months'],
-		['1 year ago', 'in 1 year'],
-		['%s years ago', 'in %s years'],
-	][index] as [string, string];
-};
-
-register('main', localeFunc as LocaleFunc);
-
-export default {
-	name: 'UpdatesPanel',
+export default mixins(renderText).extend({
+	name: 'TimeAgo',
 	props: {
 		date: {
 			type: String,
@@ -43,17 +23,48 @@ export default {
 			default: false,
 		},
 	},
+	beforeMount() {
+		register(this.defaultLocale, this.localeFunc as LocaleFunc);
+	},
 	methods: {
-		format(props: {date: string, capitalize: boolean}) {
-			const text = format(props.date, 'main');
+		localeFunc(num: number, index: number, totalSec: number): [string, string] {
+			// number: the timeago / timein number;
+			// index: the index of array below;
+			// totalSec: total seconds between date to be formatted and today's date;
+			return [
+				[this.$baseText('timeAgo.justNow'), this.$baseText('timeAgo.rightNow')],
+				[this.$baseText('timeAgo.justNow'), this.$baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
+				[this.$baseText('timeAgo.oneMinuteAgo'), this.$baseText('timeAgo.inOneMinute')],
+				[this.$baseText('timeAgo.minutesAgo'), this.$baseText('timeAgo.inMinutes')],
+				[this.$baseText('timeAgo.oneHourAgo'), this.$baseText('timeAgo.inOneHour')],
+				[this.$baseText('timeAgo.hoursAgo'), this.$baseText('timeAgo.inHours')],
+				[this.$baseText('timeAgo.oneDayAgo'), this.$baseText('timeAgo.inOneDay')],
+				[this.$baseText('timeAgo.daysAgo'), this.$baseText('timeAgo.inDays')],
+				[this.$baseText('timeAgo.oneWeekAgo'), this.$baseText('timeAgo.inOneWeek')],
+				[this.$baseText('timeAgo.weeksAgo'), this.$baseText('timeAgo.inWeeks')],
+				[this.$baseText('timeAgo.oneMonthAgo'), this.$baseText('timeAgo.inOneMonth')],
+				[this.$baseText('timeAgo.monthsAgo'), this.$baseText('timeAgo.inMonths')],
+				[this.$baseText('timeAgo.oneYearAgo'), this.$baseText('timeAgo.inOneYear')],
+				[this.$baseText('timeAgo.yearsAgo'), this.$baseText('timeAgo.inYears')],
+			][index] as [string, string];
+		},
+	},
+	computed: {
+		...mapGetters(['defaultLocale']),
+		format(): string {
+			const text = format(this.date, this.defaultLocale);
 
-			if (!props.capitalize) {
+			if (!this.capitalize) {
 				return text.toLowerCase();
 			}
 
 			return text;
 		},
-		convertToHumanReadableDate,
+		convertDate(): string {
+			const date = new Date(this.date);
+			const epoch = date.getTime() / 1000;
+			return convertToHumanReadableDate(epoch);
+		},
 	},
-};
+});
 </script>