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 = ({ 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);