From d9ee7578d1a65e600478b3d75ac291ad048e8b95 Mon Sep 17 00:00:00 2001
From: mahmed2000 <mahmad2000@protonmail.com>
Date: Fri, 3 May 2024 10:03:26 +0500
Subject: [PATCH] Rework stream duration string formatting for the status bar
 (#3729)

* Use date-fns formatDuration to generate stream duration string

* Remove unneeded pluralize function
---
 web/components/ui/Statusbar/Statusbar.tsx | 27 +++++++++++------------
 web/utils/helpers.js                      |  7 ------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index 2e9413950..04cf32d7b 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/web/components/ui/Statusbar/Statusbar.tsx
@@ -1,9 +1,8 @@
-import { intervalToDuration, formatDistanceToNow } from 'date-fns';
+import { intervalToDuration, formatDistanceToNow, formatDuration } from 'date-fns';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import classNames from 'classnames';
 import styles from './Statusbar.module.scss';
-import { pluralize } from '../../../utils/helpers';
 
 // Lazy loaded components
 
@@ -20,23 +19,23 @@ export type StatusbarProps = {
 };
 
 function makeDurationString(lastConnectTime: Date): string {
-  const DAY_LABEL = 'day';
-  const HOUR_LABEL = 'hour';
-  const MINUTE_LABEL = 'minute';
-  const SECOND_LABEL = 'second';
   const diff = intervalToDuration({ start: lastConnectTime, end: new Date() });
-
   if (diff.days >= 1) {
-    return `${diff.days} ${pluralize(DAY_LABEL, diff.days)}
-			${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`;
+    return formatDuration({
+      days: diff.days,
+      hours: diff.hours > 0 ? diff.hours : 0,
+    });
   }
   if (diff.hours >= 1) {
-    return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes > 0 ? diff.minutes : ''}
-			${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}`;
+    return formatDuration({
+      hours: diff.hours,
+      minutes: diff.minutes > 0 ? diff.minutes : 0,
+    });
   }
-
-  return `${diff.minutes > 0 ? diff.minutes : ''} ${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}
-		${diff.seconds > 0 ? diff.seconds : ''} ${diff.seconds > 0 ? pluralize(SECOND_LABEL, diff.seconds) : ''}`;
+  return formatDuration({
+    minutes: diff.minutes > 0 ? diff.minutes : 0,
+    seconds: diff.seconds > 0 ? diff.seconds : 0,
+  });
 }
 
 export const Statusbar: FC<StatusbarProps> = ({
diff --git a/web/utils/helpers.js b/web/utils/helpers.js
index c7e504d5b..3b1137bc7 100644
--- a/web/utils/helpers.js
+++ b/web/utils/helpers.js
@@ -1,12 +1,5 @@
 import UAParser from 'ua-parser-js';
 
-export function pluralize(string, count) {
-  if (count === 1) {
-    return string;
-  }
-  return `${string}s`;
-}
-
 export function getDiffInDaysFromNow(timestamp) {
   const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
   return (new Date() - time) / (24 * 3600 * 1000);