From 272e30be0c9dbebcbde06be362a33c5a83a8f676 Mon Sep 17 00:00:00 2001
From: Lhcfl <Lhcfl@outlook.com>
Date: Wed, 8 May 2024 10:52:32 +0800
Subject: [PATCH] refactor: replace the awful ?: chain with if-else; fix: force
 update ticker when props.time changed

related: https://github.com/misskey-dev/misskey/commit/ed6f866a4f6e32a7875951fe7ea358d5cd21c6ce

Co-authored-by: kakkokari-gtyih <kakkokari-gtyih@users.noreply.github.com>
---
 .../client/src/components/global/MkTime.vue   | 101 +++++++++++-------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/MkTime.vue
index 7cbbb77b0b..24378354a8 100644
--- a/packages/client/src/components/global/MkTime.vue
+++ b/packages/client/src/components/global/MkTime.vue
@@ -25,15 +25,21 @@ const props = withDefaults(
 	},
 );
 
+function getDateSafe(n: Date | string | number) {
+	try {
+		if (n instanceof Date) {
+			return n;
+		}
+		return new Date(n);
+	} catch (err) {
+		return {
+			getTime: () => Number.NaN,
+		};
+	}
+}
+
 const _time = computed(() =>
-	props.time == null
-		? Number.NaN
-		: typeof props.time === "number"
-			? props.time
-			: (props.time instanceof Date
-					? props.time
-					: new Date(props.time)
-				).getTime(),
+	props.time == null ? Number.NaN : getDateSafe(props.time).getTime(),
 );
 const invalid = computed(() => Number.isNaN(_time.value));
 const absolute = computed(() =>
@@ -41,45 +47,57 @@ const absolute = computed(() =>
 );
 
 const now = ref(props.origin?.getTime() ?? Date.now());
+
 const relative = computed<string>(() => {
 	if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
 	if (invalid.value) return i18n.ts._ago.invalid;
 
 	const ago = (now.value - _time.value) / 1000; /* ms */
-	return ago >= 31536000
-		? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() })
-		: ago >= 2592000
-			? i18n.t("_ago.monthsAgo", {
-					n: Math.floor(ago / 2592000).toString(),
-				})
-			: ago >= 604800
-				? i18n.t("_ago.weeksAgo", {
-						n: Math.floor(ago / 604800).toString(),
-					})
-				: ago >= 86400
-					? i18n.t("_ago.daysAgo", {
-							n: Math.floor(ago / 86400).toString(),
-						})
-					: ago >= 3600
-						? i18n.t("_ago.hoursAgo", {
-								n: Math.floor(ago / 3600).toString(),
-							})
-						: ago >= 60
-							? i18n.t("_ago.minutesAgo", {
-									n: (~~(ago / 60)).toString(),
-								})
-							: ago >= 10
-								? i18n.t("_ago.secondsAgo", {
-										n: (~~(ago % 60)).toString(),
-									})
-								: ago >= -1
-									? i18n.ts._ago.justNow
-									: i18n.ts._ago.future;
+
+	if (ago >= 31536000) {
+		return i18n.t("_ago.yearsAgo", {
+			n: Math.floor(ago / 31536000).toString(),
+		});
+	}
+	if (ago >= 2592000) {
+		return i18n.t("_ago.monthsAgo", {
+			n: Math.floor(ago / 2592000).toString(),
+		});
+	}
+	if (ago >= 604800) {
+		return i18n.t("_ago.weeksAgo", {
+			n: Math.floor(ago / 604800).toString(),
+		});
+	}
+	if (ago >= 86400) {
+		return i18n.t("_ago.daysAgo", {
+			n: Math.floor(ago / 86400).toString(),
+		});
+	}
+	if (ago >= 3600) {
+		return i18n.t("_ago.hoursAgo", {
+			n: Math.floor(ago / 3600).toString(),
+		});
+	}
+	if (ago >= 60) {
+		return i18n.t("_ago.minutesAgo", {
+			n: (~~(ago / 60)).toString(),
+		});
+	}
+	if (ago >= 10) {
+		return i18n.t("_ago.secondsAgo", {
+			n: (~~(ago % 60)).toString(),
+		});
+	}
+	if (ago >= -1) {
+		return i18n.ts._ago.justNow;
+	}
+	return i18n.ts._ago.future;
 });
 
 let tickId: number | undefined;
 
-function tick() {
+function tick(forceUpdateTicker = false) {
 	if (
 		invalid.value ||
 		props.origin ||
@@ -101,13 +119,16 @@ function tick() {
 
 	if (!tickId) {
 		tickId = window.setInterval(tick, next);
-	} else if (prev < next) {
+	} else if (prev < next || forceUpdateTicker) {
 		window.clearInterval(tickId);
 		tickId = window.setInterval(tick, next);
 	}
 }
 
-watch(() => props.time, tick);
+watch(
+	() => props.time,
+	() => tick(true),
+);
 
 onMounted(() => {
 	tick();