Nice formatting of displayed time

2 files changed, 42 insertions, 6 deletions

diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index e9e547cbe..e4b08db8c 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -1,11 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Dispatch } from 'redux';
 
 import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { Action, actions } from '../redux/actions';
-
 import { ColorOption } from '../style/theme';
+import { timeUtil } from '../util/time';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -106,9 +104,8 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
                 <Container marginBottom="5px">
                     {/* TODO: consider moving to separate component */}
                     <Flex justify="space-between">
-                        {/* TODO: should do nice display of these (i.e. 'minutes' and 00:xx) */}
-                        <Text>Est. Time ({estimatedTimeSeconds} seconds)</Text>
-                        <Text>Time: {elapsedTimeSeconds}</Text>
+                        <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text>
+                        <Text>Time: {timeUtil.secondsToStopwatchTime(elapsedTimeSeconds)}</Text>
                     </Flex>
                 </Container>
                 <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
diff --git a/packages/instant/src/util/time.ts b/packages/instant/src/util/time.ts
new file mode 100644
index 000000000..bfe69cad5
--- /dev/null
+++ b/packages/instant/src/util/time.ts
@@ -0,0 +1,39 @@
+const secondsToMinutesAndRemainingSeconds = (seconds: number): { minutes: number; remainingSeconds: number } => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds - minutes * 60;
+
+    return {
+        minutes,
+        remainingSeconds,
+    };
+};
+
+const padZero = (aNumber: number): string => {
+    return aNumber < 10 ? `0${aNumber}` : aNumber.toString();
+};
+
+export const timeUtil = {
+    // converts seconds to human readable version of seconds or minutes
+    secondsToHumanDescription: (seconds: number): string => {
+        const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds);
+
+        if (minutes === 0) {
+            const suffix = seconds > 1 ? 's' : '';
+            return `${seconds} second${suffix}`;
+        }
+
+        const minuteSuffix = minutes > 1 ? 's' : '';
+        const minuteText = `${minutes} minute${minuteSuffix}`;
+
+        const secondsSuffix = remainingSeconds > 1 ? 's' : '';
+        const secondsText = remainingSeconds === 0 ? '' : ` ${remainingSeconds} second${secondsSuffix}`;
+
+        return `${minuteText}${secondsText}`;
+    },
+    // converts seconds to stopwatch time (i.e. 05:30 and 00:30)
+    // only goes up to minutes, not hours
+    secondsToStopwatchTime: (seconds: number): string => {
+        const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds);
+        return `${padZero(minutes)}:${padZero(remainingSeconds)}`;
+    },
+};