diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 11:18:21 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 11:18:21 +0800 |
commit | 229f11f164ce5109b771295d9aee8ebb74314181 (patch) | |
tree | ad4cdcc1926a1e7ec563f331c8f1edba7770b867 /packages | |
parent | 0e1e9b27f6f5b93e1f9b0e2833bc600836f8e757 (diff) | |
download | dexon-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')
-rw-r--r-- | packages/instant/src/components/simulated_progress_bar.tsx | 9 | ||||
-rw-r--r-- | packages/instant/src/util/time.ts | 39 | ||||
-rw-r--r-- | packages/instant/test/util/time.test.ts | 48 |
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); + }); + }); + }); +}); |