From 504e4c926b864ce67ac72c4986d5b04887166fd7 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Fri, 30 Aug 2024 22:32:47 +0900
Subject: [PATCH] formatShortTime

---
 .../(main)/reports/insights/InsightsTable.tsx |  6 ++++-
 .../[websiteId]/WebsiteMetricsBar.tsx         |  7 +++++-
 .../sessions/[sessionId]/SessionStats.tsx     |  4 +++-
 src/components/messages.ts                    |  5 ++++
 src/lib/format.ts                             | 23 ++++++++++++++-----
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/reports/insights/InsightsTable.tsx b/src/app/(main)/reports/insights/InsightsTable.tsx
index 095b4195c..4058c5ef8 100644
--- a/src/app/(main)/reports/insights/InsightsTable.tsx
+++ b/src/app/(main)/reports/insights/InsightsTable.tsx
@@ -67,7 +67,11 @@ export function InsightsTable() {
       >
         {row => {
           const n = row?.totaltime / row?.visits;
-          return `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`;
+          return `${+n < 0 ? '-' : ''}${formatShortTime(
+            intl,
+            { formatMessage, labels },
+            Math.abs(~~n),
+          )}`;
         }}
       </GridColumn>
     </GridTable>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index 3eb6d0285..20cb9fe8f 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -72,7 +72,12 @@ export function WebsiteMetricsBar({
           value: totaltime.value / visits.value,
           prev: totaltime.prev / visits.prev,
           change: totaltime.value / visits.value - totaltime.prev / visits.prev,
-          formatValue: (n: number) => `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`,
+          formatValue: (n: number) =>
+            `${+n < 0 ? '-' : ''}${formatShortTime(
+              intl,
+              { formatMessage, labels },
+              Math.abs(~~n),
+            )}`,
         },
       ]
     : [];
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
index 402613afb..04884b4dd 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
@@ -28,7 +28,9 @@ export function SessionStats({ data }) {
       <MetricCard
         label={formatMessage(labels.visitDuration)}
         value={data?.totaltime / data?.visits}
-        formatValue={n => `${+n < 0 ? '-' : ''}${formatShortTime(intl, Math.abs(~~n))}`}
+        formatValue={n =>
+          `${+n < 0 ? '-' : ''}${formatShortTime(intl, { formatMessage, labels }, Math.abs(~~n))}`
+        }
       />
     </MetricsBar>
   );
diff --git a/src/components/messages.ts b/src/components/messages.ts
index f711a4f6c..0f012d703 100644
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@@ -278,6 +278,11 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  days: { id: 'label.days', defaultMessage: '{x}d' },
+  hours: { id: 'label.hours', defaultMessage: '{x}h' },
+  minutes: { id: 'label.minutes', defaultMessage: '{x}m' },
+  seconds: { id: 'label.seconds', defaultMessage: '{x}s' },
+  milliseconds: { id: 'label.milliseconds', defaultMessage: '{x}ms' },
 });
 
 export const messages = defineMessages({
diff --git a/src/lib/format.ts b/src/lib/format.ts
index b2480756d..6cff454ed 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -25,15 +25,26 @@ export function formatTime(val: number) {
   return `${h}${m}:${s}`;
 }
 
-export function formatShortTime(intl: IntlShape, val: number, formats = ['m', 's']) {
+export function formatShortTime(
+  intl: IntlShape,
+  useMessages: any,
+  val: number,
+  formats = ['m', 's'],
+) {
+  const { formatMessage, labels } = useMessages;
   const { days, hours, minutes, seconds, ms } = parseTime(val);
   let t = '';
 
-  if (days > 0 && formats.indexOf('d') !== -1) t += `${intl.formatNumber(days)}d `;
-  if (hours > 0 && formats.indexOf('h') !== -1) t += `${intl.formatNumber(hours)}h `;
-  if (minutes > 0 && formats.indexOf('m') !== -1) t += `${intl.formatNumber(minutes)}m `;
-  if (seconds > 0 && formats.indexOf('s') !== -1) t += `${intl.formatNumber(seconds)}s `;
-  if (ms > 0 && formats.indexOf('ms') !== -1) t += `${intl.formatNumber(ms)}ms`;
+  if (days > 0 && formats.indexOf('d') !== -1)
+    t += `${formatMessage(labels.days, { x: intl.formatNumber(days) })} `;
+  if (hours > 0 && formats.indexOf('h') !== -1)
+    t += `${formatMessage(labels.hours, { x: intl.formatNumber(hours) })} `;
+  if (minutes > 0 && formats.indexOf('m') !== -1)
+    t += `${formatMessage(labels.minutes, { x: intl.formatNumber(minutes) })} `;
+  if (seconds > 0 && formats.indexOf('s') !== -1)
+    t += `${formatMessage(labels.seconds, { x: intl.formatNumber(seconds) })} `;
+  if (ms > 0 && formats.indexOf('ms') !== -1)
+    t += formatMessage(labels.milliseconds, { x: intl.formatNumber(ms) });
 
   if (!t) {
     return `0${formats[formats.length - 1]}`;