Refactor match display

client/lamby-app/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: false,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

client/lamby-app/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
+    "@testing-library/react-hooks": "^5.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
@@ -16,6 +16,8 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.1.7",
     "react-scripts": "4.0.3",
+    "react-test-render": "^1.1.2",
+    "react-test-renderer": "^17.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -44,6 +46,12 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "eslint": "^7.21.0",
+    "eslint-plugin-react": "^7.22.0",
+    "react-shallow-renderer": "^16.14.1",
     "ts-standard": "^10.0.0"
   }
 }

client/lamby-app/src/App.scss

@@ -4,45 +4,6 @@
   justify-content: space-between;
   height: 100%;
 }
-.navbar {
-  width: 100vw;
-  text-align: center;
-
-  ul {
-    padding: 0;
-    margin: 0;
-    margin-block-end: 0;
-    margin-block-start: 0;
-    padding-inline-start: 0px;
-
-    li {
-      list-style-type: none;
-      display: inline-block;
-      height: 80px;
-      width: 33%;
-
-      a {
-        color: #e2e2e2;
-        font-size: 1.2rem;
-        text-transform: uppercase;
-        text-decoration: none;
-        height: calc(100% - 3px);
-        width: 100%;
-        border-top: 1px solid #e2e2e2;
-        border-left: 1px solid #e2e2e2;
-        border-right: 1px solid #e2e2e2;
-        border-bottom: 1px solid #e2e2e2;
-        display: block;
-        padding-top: 28px;
-        transition: 0.3s ease background-color;
-
-        &:hover {
-          background: #131726;
-        }
-      }
-    }
-  }
-}
 
 .active {
   border-top: 10px solid #fa541f !important;

client/lamby-app/src/App.tsx

@@ -1,45 +1,23 @@
-import './App.scss'
+import './App.scss';
+import React from 'react';
 import {
   BrowserRouter as Router,
   Switch,
-  Route,
-  NavLink,
+  Route
 } from 'react-router-dom';
-import Home from './containers/home/Home'
-import Match from './containers/match/Match'
-import Profile from './containers/profile/Profile'
-import AppStateProvider from './context/AppState'
-import MatchEditor from './components/matchEditor/MatchEditor'
-
-function App () {
-
-
-
-
+import NavBar from './components/NavBar/NavBar'
+import Home from './containers/home/Home';
+import Match from './containers/match/Match';
+import Profile from './containers/profile/Profile';
+import AppStateProvider from './context/AppState';
+import MatchEditor from './components/matchEditor/matchEditor';
 
+function App() {
   return (
     <AppStateProvider>
       <div className='App'>
         <Router>
-          <nav className='navbar'>
-            <ul>
-              <li>
-                <NavLink to='/home' activeClassName='active'>
-                  Home
-                </NavLink>
-              </li>
-              <li>
-                <NavLink to='/match' activeClassName='active'>
-                  Match
-                </NavLink>
-              </li>
-              <li>
-                <NavLink to='/profile' activeClassName='active'>
-                  Profile
-                </NavLink>
-              </li>
-            </ul>
-          </nav>
+         <NavBar/>
           <Switch>
             <Route path='/match'>
               <Match />
@@ -60,4 +38,4 @@ function App () {
   );
 }
 
-export default App
+export default App;

client/lamby-app/src/components/Helpers/InstructionsPlayers.tsx

@@ -0,0 +1,52 @@
+import { IPlayerPosition } from '../../interfaces/IPlayerPosition';
+
+ const InstructionsPlayer : IPlayerPosition[] = [
+  { code: 'GK', move: 'gk-sb', content: 'Goal keeper stay back' },
+  { code: 'GK', move: 'gk-jp', content: 'Goal keeper join play' },
+  { code: 'LCB', move: 'lcb-sb', content: 'Stay back during the game' },
+  { code: 'LCB', move: 'lcb-ja', content: 'Join attack whenever possible' },
+  { code: 'RCB', move: 'rcb-sb', content: 'Stay back during the game' },
+  { code: 'RCB', move: 'rcb-ja', content: 'Join the attack whenever possible' },
+  {
+    code: 'LB',
+    move: 'lb-sb',
+    content: 'Go wide and give crosses on attacking runs',
+  },
+  { code: 'LB', move: 'lb-ja', content: 'Cut inside when joining the attack' },
+  {
+    code: 'RB',
+    move: 'rb-ja',
+    content: 'Go wide and give crosses on attacking runs',
+  },
+  { code: 'RB', move: 'rb-sb', content: 'Cut inside when joining the attack' },
+  { code: 'LDM', move: 'ldm-ot', content: 'Cover center' },
+  { code: 'LDM', move: 'ldm-sb', content: 'Cover wing' },
+  { code: 'RDM', move: 'rdm-ot', content: 'Cover center' },
+  { code: 'RDM', move: 'rdm-sb', content: 'Cover wing' },
+  { code: 'CAM', move: 'cam-ot', content: 'Free roam' },
+  { code: 'CAM', move: 'cam-sb', content: 'Stay Back' },
+  { code: 'LW', move: 'lw-sw', content: 'Stay wide and give crosses' },
+  {
+    code: 'LW',
+    move: 'lw-ci',
+    content: 'Cut inside and go for the action',
+  },
+  { code: 'RW', move: 'rw-sw', content: 'Stay wide and give crosses' },
+  {
+    code: 'RW',
+    move: 'rw-ci',
+    content: 'Cut inside and go for the action',
+  },
+  {
+    code: 'ST',
+    move: 'st-ot',
+    content: 'Drop back and act like a false 9',
+  },
+  {
+    code: 'ST',
+    move: 'st-sb',
+    content: "Make runs and get in behind the opponent's defense",
+  },
+];
+
+export default InstructionsPlayer;

client/lamby-app/src/components/NavBar/NavBar.scss

@@ -0,0 +1,39 @@
+.navbar {
+  width: 100vw;
+  text-align: center;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    margin-block-end: 0;
+    margin-block-start: 0;
+    padding-inline-start: 0px;
+
+    li {
+      list-style-type: none;
+      display: inline-block;
+      height: 80px;
+      width: 33%;
+
+      a {
+        color: #e2e2e2;
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        text-decoration: none;
+        height: calc(100% - 3px);
+        width: 100%;
+        border-top: 1px solid #e2e2e2;
+        border-left: 1px solid #e2e2e2;
+        border-right: 1px solid #e2e2e2;
+        border-bottom: 1px solid #e2e2e2;
+        display: block;
+        padding-top: 28px;
+        transition: 0.3s ease background-color;
+
+        &:hover {
+          background: #131726;
+        }
+      }
+    }
+  }
+}

client/lamby-app/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,28 @@
+import './NavBar.scss';
+import { NavLink } from 'react-router-dom';
+
+const NavBar = () => {
+return (
+  <nav className='navbar'>
+  <ul>
+    <li>
+      <NavLink to='/home' activeClassName='active'>
+        Home
+      </NavLink>
+    </li>
+    <li>
+      <NavLink to='/match' activeClassName='active'>
+        Match
+      </NavLink>
+    </li>
+    <li>
+      <NavLink to='/profile' activeClassName='active'>
+        Profile
+      </NavLink>
+    </li>
+  </ul>
+</nav>
+)
+}
+
+export default NavBar; 

client/lamby-app/src/components/matchDisplay/matchDisplay.test.js

@@ -0,0 +1,96 @@
+import {Router } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { createMemoryHistory } from 'history';
+import MatchDisplay from './matchDisplay';
+import {AppStateContext }from '../../context/AppContext';
+
+
+test('rendering right number of players', async () => {
+  const history = createMemoryHistory();
+  const route = '/match';
+  history.push(route);
+
+  render(
+    <AppStateContext.Provider value={mockPlayerPositions} >
+    <Router history={history}>
+      <MatchDisplay />
+    </Router> 
+    </AppStateContext.Provider>
+  )
+
+  const totalPlayers = await screen.findAllByTestId('player-number-text');
+  expect(totalPlayers).toHaveLength(11);
+})
+
+
+
+const mockPlayerPositions = {data: { positions: [
+  {
+    position: 'GK',
+    instruction: '',
+    matchId: 0,
+    userId: 0,
+  },
+  {
+    position: 'LCB',
+    instruction: '',
+    matchId: 0,
+    userId: 1,
+  },
+  {
+    position: 'RCB',
+    instruction: '',
+    matchId: 0,
+    userId: 2,
+  },
+  {
+    position: 'LB',
+    instruction: '',
+    matchId: 0,
+    userId: 3,
+  },
+  {
+    position: 'RB',
+    instruction: '',
+    matchId: 0,
+    userId: 4,
+  },
+  {
+    position: 'LDM',
+    instruction: '',
+    matchId: 0,
+    userId: 5,
+  },
+  {
+    position: 'RDM',
+    instruction: '',
+    matchId: 0,
+    userId: 6,
+  },
+  {
+    position: 'LW',
+    instruction: '',
+    matchId: 0,
+    userId: 7,
+  },
+  {
+    position: 'RW',
+    instruction: '',
+    matchId: 0,
+    userId: 8,
+  },
+  {
+    position: 'ST',
+    instruction: '',
+    matchId: 0,
+    userId: 9,
+  },
+  {
+    position: 'ST',
+    instruction: '',
+    matchId: 0,
+    userId: 10,
+  }
+]
+}};