Nick/react router

README.md

@@ -272,3 +272,13 @@
 ### Stryker disable mutants
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/49/files)
+
+## Section: React-Router
+
+### What is URL?
+
+### ReactRouter and Webpack-Dev-Server
+
+### URL Params
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/50/files)

package.json

@@ -39,12 +39,12 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@emotion/jest": "^11.3.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/builder-webpack5": "^6.3.8",
-    "@storybook/manager-webpack5": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.9",
+    "@storybook/addon-essentials": "^6.3.9",
+    "@storybook/addon-links": "^6.3.9",
+    "@storybook/builder-webpack5": "^6.3.9",
+    "@storybook/manager-webpack5": "^6.3.9",
+    "@storybook/react": "^6.3.9",
     "@stryker-mutator/core": "^5.4.0",
     "@stryker-mutator/jest-runner": "^5.4.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -54,6 +54,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
     "babel-loader": "^8.2.2",
@@ -68,7 +69,6 @@
     "husky": "^7.0.2",
     "jest": "^27.2.3",
     "prettier": "^2.4.1",
-    "stryker-cli": "^1.0.2",
     "style-loader": "^3.3.0",
     "typescript": "^4.4.3",
     "url-loader": "^4.1.1",
@@ -81,6 +81,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0"
   }
 }

src/App.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  Redirect,
+} from 'react-router-dom';
+
+import { MinesweeperWithHooks } from '@/pages/MinesweeperWithHooks';
+
+export const App: FC = () => (
+  <Router>
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/game-with-hooks">Game With Hooks</Link>
+        </li>
+      </ul>
+    </nav>
+    <Switch>
+      <Route exact path="/">
+        <Home />
+      </Route>
+      <Route path="/game-with-hooks/:username?">
+        <MinesweeperWithHooks />
+      </Route>
+      <Route path="*">
+        <Redirect to="/" />
+      </Route>
+    </Switch>
+  </Router>
+);
+
+const Home: FC = () => <h2>Minesweeper game Forever!</h2>;

src/components/Game/GameLayout.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Field } from '@/core/Field';
+import { fieldGenerator } from '@/core/__mocks__/Field';
+
+import { Grid } from '@/components/Grid';
+import { Top } from '@/components/Top';
+import { Scoreboard } from '@/components/Scoreboard';
+
+import { GameOver } from '@/components/Game';
+
+import { GameLayout, Props } from './GameLayout';
+
+export default {
+  title: 'Game/Layout',
+  component: GameLayout,
+} as Meta;
+
+const Template: Story<Props> = (args) => <GameLayout {...args} />;
+
+export const LayoutExample = Template.bind({});
+LayoutExample.args = {
+  top: (
+    <Top feature="Flag" firstAction="ctrl" secondAction="click">
+      Minesweeper
+    </Top>
+  ),
+  children: (
+    <>
+      <Scoreboard
+        time="000"
+        bombs="000"
+        levels={['beginner', 'intermediate', 'expert']}
+        onReset={() => null}
+        onChangeLevel={() => null}
+      />
+      <GameOver onClick={() => null} isWin={true} />
+      <Grid onClick={() => null} onContextMenu={() => null}>
+        {fieldGenerator(9) as Field}
+      </Grid>
+    </>
+  ),
+};

src/components/Game/GameLayout.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Grid } from '@/components/Grid';
+import { Top } from '@/components/Top';
+import { Scoreboard } from '@/components/Scoreboard';
+
+import { GameOver } from '@/components/Game';
+
+import { Field } from '@/core/Field';
+import { fieldGenerator } from '@/core/__mocks__/Field';
+
+import { GameLayout } from './GameLayout';
+
+it('Top renders correctly', () => {
+  const { asFragment } = render(
+    <GameLayout
+      top={
+        <Top feature="Flag" firstAction="ctrl" secondAction="click">
+          Minesweeper
+        </Top>
+      }
+    >
+      <Scoreboard
+        time="000"
+        bombs="000"
+        levels={['beginner', 'intermediate', 'expert']}
+        onReset={() => null}
+        onChangeLevel={() => null}
+      />
+      <GameOver onClick={() => null} isWin={true} />
+      <Grid onClick={() => null} onContextMenu={() => null}>
+        {fieldGenerator(9) as Field}
+      </Grid>
+    </GameLayout>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

src/components/Game/GameLayout.tsx

@@ -0,0 +1,22 @@
+import React, { FC, ReactNode } from 'react';
+
+import { GameArea } from './GameArea';
+import { Wrapper } from './Wrapper';
+
+export interface Props {
+  /**
+   * Top component prop
+   */
+  top: ReactNode;
+  /**
+   * Children = Main game area
+   */
+  children: ReactNode;
+}
+
+export const GameLayout: FC<Props> = ({ top, children }) => (
+  <Wrapper>
+    {top}
+    <GameArea>{children}</GameArea>
+  </Wrapper>
+);