Nick/refactoring2

README.md

@@ -252,3 +252,9 @@
 ### Test reports and refactoring session2
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/43)
+
+### Refactoring useGame
+
+### Refactoring useGame 2
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/46/files)

src/components/Game/Game.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
-import { Field } from '@/helpers/Field';
-import { fieldGenerator } from '@/helpers/__mocks__/Field';
+import { Field } from '@/core/Field';
+import { fieldGenerator } from '@/core/__mocks__/Field';
 
 import { Grid } from '@/components/Grid';
 import { Top } from '@/components/Top';

src/components/Grid/Cell.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent, createEvent } from '@testing-library/react';
 
-import { CellState, Coords } from '@/helpers/Field';
+import { CellState, Coords } from '@/core/Field';
 
 import { Cell, ClosedFrame, isActiveCell } from './Cell';
 

src/components/Grid/Cell.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
 
-import { Cell as CellType, Coords, CellState } from '@/helpers/Field';
+import { Cell as CellType, Coords, CellState } from '@/core/Field';
 
-import { useMouseDown } from '@/hooks/useMouseDown';
+import { useMouseDown } from '@/components/hooks/useMouseDown';
 
 export interface CellProps {
   /**

src/components/Grid/Grid.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { Field } from '@/helpers/Field';
+import { Field } from '@/core/Field';
 
 import { Grid } from './Grid';
 

src/components/Grid/Grid.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
 
-import { Coords, Field } from '@/helpers/Field';
+import { Coords, Field } from '@/core/Field';
 
 import { Cell } from './Cell';
 

src/components/Scoreboard/Reset.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
 
-import { useMouseDown } from '@/hooks/useMouseDown';
+import { useMouseDown } from '@/components/hooks/useMouseDown';
 
 export interface ResetProps {
   /**

src/modules/GameWithHooks/useGame.test.ts

@@ -1,11 +1,11 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
-import { CellState, Field } from '@/helpers/Field';
+import { CellState, Field } from '@/core/Field';
 import { GameLevels, GameSettings } from '@/modules/GameSettings';
 
 import { useGame } from './useGame';
 
-jest.mock('@/helpers/Field');
+jest.mock('@/core/Field');
 
 const { empty: e, hidden: h, bomb: b, flag: f, weakFlag: w } = CellState;
 

src/modules/GameWithHooks/useGame.ts

@@ -1,16 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 import {
   Field,
   CellState,
   generateFieldWithDefaultState,
   fieldGenerator,
   Coords,
-} from '@/helpers/Field';
-import { openCell } from '@/helpers/openCell';
-import { setFlag } from '@/helpers/setFlag';
+} from '@/core/Field';
+import { openCell } from '@/core/openCell';
+import { setFlag } from '@/core/setFlag';
 
-import { LevelNames, GameSettings } from '@/modules/GameSettings';
+import { LevelNames } from '@/modules/GameSettings';
+
+import { useStatus } from './useStatus';
+import { useSettings } from './useSettings';
+import { useTime } from './useTime';
 
 interface ReturnType {
   level: LevelNames;
@@ -29,21 +33,25 @@ interface ReturnType {
 }
 
 export const useGame = (): ReturnType => {
-  const [level, setLevel] = useState<LevelNames>('beginner');
-
-  const [isGameOver, setIsGameOver] = useState(false);
-  const [isWin, setIsWin] = useState(false);
-  const [isGameStarted, setIsGameStarted] = useState(false);
+  const {
+    settings: [size, bombs],
+    level,
+    setLevel,
+  } = useSettings();
 
-  const [time, setTime] = useState(0);
-  const [flagCounter, setFlagCounter] = useState(0);
+  const {
+    isGameStarted,
+    isWin,
+    isGameOver,
+    setNewGame,
+    setInProgress,
+    setGameWin,
+    setGameLoose,
+  } = useStatus();
 
-  const setGameOver = (isSolved = false) => {
-    setIsGameOver(true);
-    setIsWin(isSolved);
-  };
+  const [time, resetTime] = useTime(isGameStarted, isGameOver);
 
-  const [size, bombs] = GameSettings[level];
+  const [flagCounter, setFlagCounter] = useState(0);
 
   const [playerField, setPlayerField] = useState<Field>(
     generateFieldWithDefaultState(size, CellState.hidden)
@@ -53,44 +61,26 @@ export const useGame = (): ReturnType => {
     fieldGenerator(size, bombs / (size * size))
   );
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (isGameStarted) {
-      interval = setInterval(() => {
-        setTime(time + 1);
-      }, 1000);
-
-      if (isGameOver) {
-        clearInterval(interval);
-      }
-    }
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [isGameOver, isGameStarted, time]);
-
   const onClick = (coords: Coords) => {
-    !isGameStarted && setIsGameStarted(true);
+    !isGameStarted && setInProgress();
     try {
       const [newPlayerField, isSolved] = openCell(
         coords,
         playerField,
         gameField
       );
       if (isSolved) {
-        setGameOver(isSolved);
+        setGameWin();
       }
       setPlayerField([...newPlayerField]);
     } catch (e) {
       setPlayerField([...gameField]);
-      setGameOver();
+      setGameLoose();
     }
   };
 
   const onContextMenu = (coords: Coords) => {
-    !isGameStarted && setIsGameStarted(true);
+    !isGameStarted && setInProgress();
     const [newPlayerField, isSolved, newFlagCounter] = setFlag(
       coords,
       playerField,
@@ -100,7 +90,7 @@ export const useGame = (): ReturnType => {
     );
     setFlagCounter(newFlagCounter);
     if (isSolved) {
-      setGameOver(isSolved);
+      setGameWin();
     }
     setPlayerField([...newPlayerField]);
   };
@@ -114,16 +104,13 @@ export const useGame = (): ReturnType => {
 
     setGameField([...newGameField]);
     setPlayerField([...newPlayerField]);
-    setIsGameOver(false);
-    setIsWin(false);
-    setIsGameStarted(false);
-    setTime(0);
+    setNewGame();
+    resetTime();
     setFlagCounter(0);
   };
 
   const onChangeLevel = (level: LevelNames) => {
-    setLevel(level);
-    const newSettings = GameSettings[level];
+    const newSettings = setLevel(level);
     resetHandler(newSettings);
   };
 

src/modules/GameWithHooks/useGameCheckGameField.test.ts

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
-import { CellState, Field } from '@/helpers/Field';
+import { CellState, Field } from '@/core/Field';
 
 import { useGame } from './useGame';
 

src/modules/GameWithHooks/useSettings.test.ts

@@ -0,0 +1,25 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import { GameSettings } from '@/modules/GameSettings';
+
+import { useSettings } from './useSettings';
+
+describe('useGameSettings test cases', () => {
+  it('Check default settings', () => {
+    const { result } = renderHook(useSettings);
+
+    expect(result.current.settings).toEqual(GameSettings.beginner);
+    expect(result.current.level).toBe('beginner');
+  });
+  it('Check setLevel to intermediate', () => {
+    const { result } = renderHook(useSettings);
+
+    act(() => {
+      const newSettings = result.current.setLevel('intermediate');
+      expect(newSettings).toEqual(GameSettings.intermediate);
+    });
+
+    expect(result.current.settings).toEqual(GameSettings.intermediate);
+    expect(result.current.level).toBe('intermediate');
+  });
+});

src/modules/GameWithHooks/useSettings.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { LevelNames, GameSettings, Settings } from '@/modules/GameSettings';
+
+interface Return {
+  settings: Settings;
+  level: LevelNames;
+  setLevel: (level: LevelNames) => Settings;
+}
+
+export const useSettings = (
+  defaultLevel = 'beginner' as LevelNames
+): Return => {
+  const [level, setLevel] = useState<LevelNames>(defaultLevel);
+  const settings = GameSettings[level];
+
+  return {
+    settings,
+    level,
+    setLevel: (level) => {
+      setLevel(level);
+      return GameSettings[level];
+    },
+  };
+};

src/modules/GameWithHooks/useStatus.test.ts

@@ -0,0 +1,100 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import { useStatus, Return } from './useStatus';
+
+const getDataFromUseStatusReturn = ({
+  isGameStarted,
+  isWin,
+  isGameOver,
+}: Return) => ({ isGameStarted, isWin, isGameOver });
+
+describe('useGameStatus test cases', () => {
+  it('Check default state', () => {
+    const { result } = renderHook(useStatus);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: false,
+      isGameOver: false,
+    });
+  });
+  it('Check setNewGame handler', () => {
+    const { result } = renderHook(useStatus);
+
+    act(result.current.setNewGame);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: false,
+      isGameOver: false,
+    });
+  });
+  it('Check setInProgress handler', () => {
+    const { result } = renderHook(useStatus);
+
+    act(result.current.setInProgress);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: true,
+      isWin: false,
+      isGameOver: false,
+    });
+  });
+  it('Check setGameWin handler', () => {
+    const { result } = renderHook(useStatus);
+
+    act(result.current.setGameWin);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: true,
+      isGameOver: true,
+    });
+  });
+  it('Check setGameLoose handler', () => {
+    const { result } = renderHook(useStatus);
+
+    act(result.current.setGameLoose);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: false,
+      isGameOver: true,
+    });
+  });
+  it('Full game statuses flow', () => {
+    const { result } = renderHook(useStatus);
+
+    act(result.current.setInProgress);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: true,
+      isWin: false,
+      isGameOver: false,
+    });
+
+    act(result.current.setGameWin);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: true,
+      isGameOver: true,
+    });
+
+    act(result.current.setGameLoose);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: false,
+      isGameOver: true,
+    });
+
+    act(result.current.setNewGame);
+
+    expect(getDataFromUseStatusReturn(result.current)).toEqual({
+      isGameStarted: false,
+      isWin: false,
+      isGameOver: false,
+    });
+  });
+});