Add timer functionality

README.md

@@ -317,3 +317,9 @@
 ### React-Redux
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/57/files)
+
+### Global store benifits and redux-dev-tools
+
+### Redux middlewares
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/58/files)

src/modules/GameWithRedux/GameWithReactRedux/Grid.tsx

@@ -5,7 +5,7 @@ import { Coords } from '@/core/Field';
 import { RootState } from '@/store';
 import { Grid as GridComponent } from '@/components/Grid';
 
-import { actions } from '@/modules/GameWithRedux/game';
+import { actions, runTimer } from '@/modules/GameWithRedux/game';
 
 export const Grid: FC = () => {
   const { playerField } = useSelector(
@@ -17,13 +17,19 @@ export const Grid: FC = () => {
   const dispatch = useDispatch();
 
   const onClick = useCallback(
-    (coords: Coords) => dispatch(actions.openCell(coords)),
+    (coords: Coords) => {
+      dispatch(actions.openCell(coords));
+      dispatch(runTimer());
+    },
     // Stryker disable next-line ArrayDeclaration
     []
   );
 
   const onContextMenu = useCallback(
-    (coords: Coords) => dispatch(actions.setFlag(coords)),
+    (coords: Coords) => {
+      dispatch(actions.setFlag(coords));
+      dispatch(runTimer());
+    },
     // Stryker disable next-line ArrayDeclaration
     []
   );

src/modules/GameWithRedux/game.test.ts

@@ -3,7 +3,7 @@ import { CellState, Field } from '@/core/Field';
 
 const { empty: e, hidden: h, bomb: b, flag: f, weakFlag: w } = CellState;
 
-import { reducer, actions, State } from './game';
+import { reducer, actions, runTimer, recursiveUpdate, State } from './game';
 
 describe('Game reducer', () => {
   const level = 'beginner';
@@ -177,4 +177,99 @@ describe('Game reducer', () => {
       expect(nextState.playerField).toHaveLength(16);
     });
   });
+
+  describe('Check updateTime action', () => {
+    it('Update time from 0', () => {
+      expect(reducer(baseInitialState, actions.updateTime())).toEqual(
+        expect.objectContaining({
+          time: 1,
+        })
+      );
+    });
+    it('Update time from 10', () => {
+      expect(
+        reducer({ ...baseInitialState, time: 10 }, actions.updateTime())
+      ).toEqual(
+        expect.objectContaining({
+          time: 11,
+        })
+      );
+    });
+  });
+
+  describe('Async actions check', () => {
+    it('Check action runTimer with state { isGameStarted: true, time: 0 }', () => {
+      const mockDispatch = jest.fn();
+      runTimer()(
+        mockDispatch,
+        () => ({
+          game: {
+            isGameStarted: true,
+            time: 0,
+          } as State,
+        }),
+        undefined
+      );
+      expect(mockDispatch).toHaveBeenCalled();
+    });
+    it('Check action runTimer with state { isGameStarted: true, time: 1 }', () => {
+      const mockDispatch = jest.fn();
+      runTimer()(
+        mockDispatch,
+        () => ({
+          game: {
+            isGameStarted: true,
+            time: 1,
+          } as State,
+        }),
+        undefined
+      );
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+    it('Check action runTimer with state { isGameStarted: false, time: 10 }', () => {
+      const mockDispatch = jest.fn();
+      runTimer()(
+        mockDispatch,
+        () => ({
+          game: {
+            isGameStarted: false,
+            time: 10,
+          } as State,
+        }),
+        undefined
+      );
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('Check action recursiveUpdate with state { isGameStarted: true }', () => {
+      jest.useFakeTimers();
+      const mockDispatch = jest.fn();
+      recursiveUpdate()(
+        mockDispatch,
+        () => ({
+          game: {
+            isGameStarted: true,
+          } as State,
+        }),
+        undefined
+      );
+      jest.advanceTimersByTime(1000);
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+    it('Check action recursiveUpdate with state { isGameStarted: false }', () => {
+      jest.useFakeTimers();
+      const mockDispatch = jest.fn();
+      recursiveUpdate()(
+        mockDispatch,
+        () => ({
+          game: {
+            isGameStarted: false,
+          } as State,
+        }),
+        undefined
+      );
+      jest.advanceTimersByTime(1000);
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+  });
 });

src/modules/GameWithRedux/game.ts

@@ -1,4 +1,9 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  createSlice,
+  PayloadAction,
+  ThunkAction,
+  AnyAction,
+} from '@reduxjs/toolkit';
 
 import {
   Field,
@@ -10,6 +15,7 @@ import {
 import { LevelNames, GameSettings } from '@/modules/GameSettings';
 import { openCell as openCellHandler } from '@/core/openCell';
 import { setFlag } from '@/core/setFlag';
+import { RootState } from '@/store';
 
 export interface State {
   level: LevelNames;
@@ -81,8 +87,31 @@ export const { reducer, actions } = createSlice({
       state.flagCounter = newFlagCounter;
       state.playerField = newPlayerField;
     },
+    updateTime: (state) => {
+      state.time = state.time + 1;
+    },
     reset: ({ level }) => getInitialState(level),
     changeLevel: (state, { payload }: PayloadAction<LevelNames>) =>
       getInitialState(payload),
   },
 });
+
+export const recursiveUpdate =
+  (): ThunkAction<void, RootState, unknown, AnyAction> =>
+  (dispatch, getState) =>
+    setTimeout(() => {
+      const { isGameStarted } = getState().game;
+      if (isGameStarted) {
+        dispatch(actions.updateTime());
+        dispatch(recursiveUpdate());
+      }
+    }, 1000);
+
+export const runTimer =
+  (): ThunkAction<void, RootState, unknown, AnyAction> =>
+  (dispatch, getState) => {
+    const { isGameStarted, time } = getState().game;
+    if (time === 0 && isGameStarted) {
+      dispatch(recursiveUpdate());
+    }
+  };