From bb16e6170afd47c0398e0d34a39df90931138fe3 Mon Sep 17 00:00:00 2001
From: elonyavist <123890236+elonyavist@users.noreply.github.com>
Date: Wed, 1 Feb 2023 03:46:20 +0100
Subject: [PATCH] Fix/issue 2649/status bar time info (#2657)

* fix: manage singular time units

* fix: manage singular day visibility
---
 web/components/ui/Statusbar/Statusbar.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index e6248d90f..2ca8b6887 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/web/components/ui/Statusbar/Statusbar.tsx
@@ -3,6 +3,7 @@ import intervalToDuration from 'date-fns/intervalToDuration';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import styles from './Statusbar.module.scss';
+import { pluralize } from '../../../utils/helpers';
 
 // Lazy loaded components
 
@@ -18,15 +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} days ${diff.hours} hours`;
+
+  if (diff.days >= 1) {
+    return `${diff.days} ${pluralize(DAY_LABEL, diff.days)}
+			${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`;
   }
   if (diff.hours >= 1) {
-    return `${diff.hours} hours ${diff.minutes} minutes`;
+    return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes}
+			${pluralize(MINUTE_LABEL, diff.minutes)}`;
   }
 
-  return `${diff.minutes} minutes ${diff.seconds} seconds`;
+  return `${diff.minutes} ${pluralize(MINUTE_LABEL, diff.minutes)}
+		${diff.seconds} ${pluralize(SECOND_LABEL, diff.seconds)}`;
 }
 
 export const Statusbar: FC<StatusbarProps> = ({