feat: add autostart feature (#48)

* feat: add autostart feature with some unit tests * doc: update readme * doc: prettify readme * fix: add missing dependency inside effect
thibaultboursier · Oct 22, 2020 · 250d8c9 · 250d8c9
1 parent cc3ae9c
commit 250d8c9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -109,12 +109,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                                  |
-| 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          | 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                                  |
+| shouldAutostart | 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
@@ -8,6 +8,7 @@ export type Config = {
   interval: number;
   onTimeOver?: () => void;
   onTimeUpdate?: (time: number) => void;
+  shouldAutostart: boolean;
   step: number;
   timerType: TimerType;
 };

diff --git a/src/useTimer.test.tsx b/src/useTimer.test.tsx
@@ -117,6 +117,26 @@ describe('Start', () => {
     // Then
     expect(getByTestId('time').textContent).toBe('5');
   });
+
+  it('should autostart', () => {
+    // Given
+    const Component = () => {
+      const { time } = useTimer({
+        shouldAutostart: true,
+      });
+
+      return <p data-testid="time">{time}</p>;
+    };
+
+    const { getByTestId } = render(<Component />);
+
+    act(() => {
+      jest.advanceTimersByTime(20000);
+    });
+
+    // Then
+    expect(getByTestId('time').textContent).toBe('20');
+  });
 });
 
 describe('Stop', () => {

diff --git a/src/useTimer.ts b/src/useTimer.ts
@@ -10,6 +10,7 @@ export const useTimer = ({
   endTime,
   onTimeOver,
   onTimeUpdate,
+  shouldAutostart = false,
 }: Partial<Config> = {}): ReturnValue => {
   const [state, dispatch] = useReducer(reducer, {
     status: 'STOPPED',
@@ -35,6 +36,12 @@ export const useTimer = ({
     dispatch({ type: 'start', payload: { initialTime } });
   }, []);
 
+  useEffect(() => {
+    if (shouldAutostart) {
+      dispatch({ type: 'start' });
+    }
+  }, [shouldAutostart]);
+
   useEffect(() => {
     if (typeof onTimeUpdate === 'function') {
       onTimeUpdate(time);
@@ -75,4 +82,4 @@ export const useTimer = ({
   }, [status, step, timerType, interval, time]);
 
   return { advanceTime, status, pause, reset, start, time };
-};
+};