From f8289da81966943dd5107b80268d681d7412c2db Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 22 Oct 2020 18:07:51 +0300 Subject: [PATCH 1/3] shouldAutostart => autostart rename --- README.md | 2 +- src/types.ts | 2 +- src/useTimer.test.tsx | 2 +- src/useTimer.ts | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ab97897..eabf668 100644 --- a/README.md +++ b/README.md @@ -116,6 +116,6 @@ The configuration and all its parameters are optional. | interval | number | 1000 | The interval in milliseconds | | onTimeOver | function | | Callback function that is called when time is over | | onTimeUpdate | function | | Callback function that is called when time is updated | -| shouldAutostart | boolean | false | Pass true to start timer automatically | +| autostart | boolean | false | Pass true to start timer automatically | | step | number | 1 | The value to add to each increment / decrement | | timerType | string | "INCREMENTAL" | The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL") | diff --git a/src/types.ts b/src/types.ts index 559cdd8..55cbf34 100644 --- a/src/types.ts +++ b/src/types.ts @@ -8,7 +8,7 @@ export type Config = { interval: number; onTimeOver?: () => void; onTimeUpdate?: (time: number) => void; - shouldAutostart: boolean; + autostart: boolean; step: number; timerType: TimerType; }; diff --git a/src/useTimer.test.tsx b/src/useTimer.test.tsx index 375aca7..fc9cdbe 100644 --- a/src/useTimer.test.tsx +++ b/src/useTimer.test.tsx @@ -122,7 +122,7 @@ describe('Start', () => { // Given const Component = () => { const { time } = useTimer({ - shouldAutostart: true, + autostart: true, }); return

{time}

; diff --git a/src/useTimer.ts b/src/useTimer.ts index 683f90a..7648ed2 100644 --- a/src/useTimer.ts +++ b/src/useTimer.ts @@ -10,7 +10,7 @@ export const useTimer = ({ endTime, onTimeOver, onTimeUpdate, - shouldAutostart = false, + autostart = false, }: Partial = {}): ReturnValue => { const [state, dispatch] = useReducer(reducer, { status: 'STOPPED', @@ -37,10 +37,10 @@ export const useTimer = ({ }, []); useEffect(() => { - if (shouldAutostart) { + if (autostart) { dispatch({ type: 'start' }); } - }, [shouldAutostart]); + }, [autostart]); useEffect(() => { if (typeof onTimeUpdate === 'function') { From d7eef3c2f46cece2efbfe99b9713286b8cd7d2b6 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 22 Oct 2020 19:33:41 +0300 Subject: [PATCH 2/3] merge fix. default decremet endTime changed to 0 --- README.md | 36 ++++++++++++++++++++++++++---------- src/useTimer.ts | 6 +++--- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index eabf668..bce329d 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,22 @@ const App = () => { }; ``` +### Two and more timers + +```tsx +import React from 'react'; +import { useTimer } from 'use-timer'; + +const App = () => { + const { time: firstTimer, start: startFirstTimer, pause: pauseFirstTimer } = useTimer(); + const { time: secondTimer, start: startSecondTimer, pause: pauseSecondTimer } = useTimer(); + + return ( + ... + ); +}; +``` + ### Decremental timer ```tsx @@ -109,13 +125,13 @@ const { time, start, pause, reset, status } = useTimer({ The configuration and all its parameters are optional. -| Property | Type | Default value | Description | -| --------------- | -------- | ------------- | -------------------------------------------------------------------------------------- | -| endTime | number | null | The value for which timer stops | -| initialTime | number | 0 | The starting value for the timer | -| interval | number | 1000 | The interval in milliseconds | -| onTimeOver | function | | Callback function that is called when time is over | -| onTimeUpdate | function | | Callback function that is called when time is updated | -| autostart | boolean | false | Pass true to start timer automatically | -| step | number | 1 | The value to add to each increment / decrement | -| timerType | string | "INCREMENTAL" | The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL") | +| Property | Type | Default value | Description | +| --------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------| +| endTime | number | null || 0 | The value for which timer stops. Null by default if timerType is "INCREMENTAL" and 0 by default if timerType is "DECREMENTAL" | +| initialTime | number | 0 | The starting value for the timer | +| interval | number | 1000 | The interval in milliseconds | +| onTimeOver | function | | Callback function that is called when time is over | +| onTimeUpdate | function | | Callback function that is called when time is updated | +| autostart | boolean | false | Pass true to start timer automatically | +| step | number | 1 | The value to add to each increment / decrement | +| timerType | string | "INCREMENTAL" | The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL") | diff --git a/src/useTimer.ts b/src/useTimer.ts index 7648ed2..78d914f 100644 --- a/src/useTimer.ts +++ b/src/useTimer.ts @@ -7,7 +7,7 @@ export const useTimer = ({ interval = 1000, step = 1, timerType = 'INCREMENTAL', - endTime, + endTime = timerType === 'INCREMENTAL' ? null : 0, onTimeOver, onTimeUpdate, autostart = false, @@ -38,9 +38,9 @@ export const useTimer = ({ useEffect(() => { if (autostart) { - dispatch({ type: 'start' }); + dispatch({ type: 'start', payload: { initialTime } }); } - }, [autostart]); + }, [autostart, initialTime]); useEffect(() => { if (typeof onTimeUpdate === 'function') { From a1d61ba50614d20ea02215d7a9b3bf18520d055f Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 22 Oct 2020 19:39:44 +0300 Subject: [PATCH 3/3] test added --- src/useTimer.test.tsx | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/useTimer.test.tsx b/src/useTimer.test.tsx index fc9cdbe..914458b 100644 --- a/src/useTimer.test.tsx +++ b/src/useTimer.test.tsx @@ -198,6 +198,35 @@ describe('Stop', () => { // Then expect(getByTestId('time').textContent).toBe('10'); }); + + it('should stop decremental timer when time is 0', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + initialTime: 30, + timerType: 'DECREMENTAL', + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const { getByRole, getByTestId } = render(); + + // When + fireEvent.click(getByRole('button')); + + act(() => { + jest.advanceTimersByTime(30000); + }); + + // Then + expect(getByTestId('time').textContent).toBe('0'); + }); }); describe('Pause', () => {