Adding services for backend communication

src/App.js

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
 
 import { Board, Header } from 'components';
+import { GameService } from 'services';
+
+const gameClient = new GameService();
 
 function App() {
   const [rows, setRows] = useState(10);
@@ -85,6 +88,12 @@ function App() {
     }
   };
 
+  const handleCreateNewGame = event => {
+    gameClient
+      .createNewGame(rows, cols, mines)
+      .then(response => console.log(response));
+  };
+
   if (!mounted) {
     return null;
   }
@@ -95,6 +104,7 @@ function App() {
         <Header
           cols={cols}
           flags={flags}
+          handleCreateNewGame={handleCreateNewGame}
           handleSetMines={handleSetMines}
           mines={mines}
           rows={rows}

src/components/Board/Board.js

@@ -12,11 +12,11 @@ const Board = ({ dummyBoard, handleCellClick, handleCellContextMenu }) => {
             <div
               className="board-row-cell box"
               id={`cell_${rowId}_${colId}`}
+              key={`cell_${rowId}_${colId}`}
               onClick={() => handleCellClick(rowId, colId)}
               onContextMenu={event =>
                 handleCellContextMenu(event, rowId, colId)
-              }
-              key={`cell_${rowId}_${colId}`}>
+              }>
               {' '}
             </div>
           ))}
@@ -30,8 +30,8 @@ Board.propTypes = {
   cols: PropTypes.number.isRequired,
   dummyBoard: PropTypes.array.isRequired,
   handleCellClick: PropTypes.func.isRequired,
-  rows: PropTypes.number.isRequired,
-  handleCellContextMenu: PropTypes.func.isRequired
+  handleCellContextMenu: PropTypes.func.isRequired,
+  rows: PropTypes.number.isRequired
 };
 
 export default Board;

src/components/Header/Header.js

@@ -6,6 +6,7 @@ import './styles.scss';
 const Header = ({
   cols,
   flags,
+  handleCreateNewGame,
   handleSetMines,
   mines,
   rows,
@@ -37,16 +38,14 @@ const Header = ({
           />
         </div>
       </div>
-
       <div
         className="reset box"
         onMouseDown={event => {
           event.target.innerHTML = '😮';
-          console.log('onmousedown');
         }}
         onMouseUp={event => {
           event.target.innerHTML = '🙂';
-          console.log('onMouseUp');
+          handleCreateNewGame(event);
         }}>
         🙂
       </div>
@@ -58,6 +57,7 @@ const Header = ({
 Header.propTypes = {
   cols: PropTypes.number,
   flags: PropTypes.number,
+  handleCreateNewGame: PropTypes.func.isRequired,
   handleSetMines: PropTypes.func.isRequired,
   mines: PropTypes.number,
   rows: PropTypes.number,

src/services/base.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+export const getResponseData = response => response.data;
+
+export class RestClient {
+  constructor() {
+    this.client = axios.create({
+      baseURL: process.env.REACT_APP_API_URL,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  }
+}

src/services/game.js

@@ -0,0 +1,11 @@
+import { RestClient, getResponseData } from './base';
+
+export class GameService extends RestClient {
+  base = '/';
+
+  createNewGame(rows, cols, mines) {
+    return this.client
+      .post(`${this.base}games`, { rows, cols, mines })
+      .then(getResponseData);
+  }
+}

src/services/index.js

@@ -0,0 +1,2 @@
+export { GameService } from './game';
+export { RestClient } from './base';