aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 11:18:21 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 11:18:21 +0800
commit229f11f164ce5109b771295d9aee8ebb74314181 (patch)
treead4cdcc1926a1e7ec563f331c8f1edba7770b867 /packages/instant
parent0e1e9b27f6f5b93e1f9b0e2833bc600836f8e757 (diff)
downloaddexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar.gz
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar.bz2
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar.lz
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar.xz
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.tar.zst
dexon-0x-contracts-229f11f164ce5109b771295d9aee8ebb74314181.zip
Nice formatting of displayed time
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/simulated_progress_bar.tsx9
-rw-r--r--packages/instant/src/util/time.ts39
-rw-r--r--packages/instant/test/util/time.test.ts48
3 files changed, 90 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)}`;
+ },
+};
diff --git a/packages/instant/test/util/time.test.ts b/packages/instant/test/util/time.test.ts
new file mode 100644
index 000000000..7165761de
--- /dev/null
+++ b/packages/instant/test/util/time.test.ts
@@ -0,0 +1,48 @@
+import { timeUtil } from '../../src/util/time';
+
+describe('assetDataUtil', () => {
+ describe('secondsToHumanDescription', () => {
+ const numsToResults: {
+ [aNumber: number]: string;
+ } = {
+ 1: '1 second',
+ 59: '59 seconds',
+ 60: '1 minute',
+ 119: '1 minute 59 seconds',
+ 120: '2 minutes',
+ 121: '2 minutes 1 second',
+ 122: '2 minutes 2 seconds',
+ };
+
+ const nums = Object.keys(numsToResults);
+ nums.forEach(aNum => {
+ const numInt = parseInt(aNum, 10);
+ it(`should work for ${aNum} seconds`, () => {
+ const expectedResult = numsToResults[numInt];
+ expect(timeUtil.secondsToHumanDescription(numInt)).toEqual(expectedResult);
+ });
+ });
+ });
+ describe('secondsToStopwatchTime', () => {
+ const numsToResults: {
+ [aNumber: number]: string;
+ } = {
+ 1: '00:01',
+ 59: '00:59',
+ 60: '01:00',
+ 119: '01:59',
+ 120: '02:00',
+ 121: '02:01',
+ 2701: '45:01',
+ };
+
+ const nums = Object.keys(numsToResults);
+ nums.forEach(aNum => {
+ const numInt = parseInt(aNum, 10);
+ it(`should work for ${aNum} seconds`, () => {
+ const expectedResult = numsToResults[numInt];
+ expect(timeUtil.secondsToStopwatchTime(numInt)).toEqual(expectedResult);
+ });
+ });
+ });
+});