From cd73c39b23625addb2d26a13b34ed10a52f98e68 Mon Sep 17 00:00:00 2001
From: Michel Wilhelm <michelwilhelm@gmail.com>
Date: Sat, 7 Nov 2020 15:54:56 -0300
Subject: [PATCH] Adding services for backend communication

---
 .env                            |  3 ++-
 .eslintrc                       |  2 +-
 src/App.js                      | 10 ++++++++++
 src/components/Board/Board.js   |  8 ++++----
 src/components/Header/Header.js |  6 +++---
 src/services/base.js            | 14 ++++++++++++++
 src/services/game.js            | 11 +++++++++++
 src/services/index.js           |  2 ++
 8 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 src/services/base.js
 create mode 100644 src/services/game.js
 create mode 100644 src/services/index.js

diff --git a/.env b/.env
index 7d910f1..8e7361c 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_API_URL=http://127.0.0.1:8000
diff --git a/.eslintrc b/.eslintrc
index 859fdeb..3ccad71 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -32,7 +32,7 @@
       2,
       2
     ],
-    "react/jsx-max-props-per-line": 1,
+    "react/jsx-max-props-per-line": 0,
     "react/jsx-no-duplicate-props": 1,
     "react/jsx-no-literals": 0,
     "react/jsx-no-undef": 1,
diff --git a/src/App.js b/src/App.js
index 8677d85..5bb824a 100644
--- a/src/App.js
+++ b/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}
diff --git a/src/components/Board/Board.js b/src/components/Board/Board.js
index 4298ef8..04b5f08 100644
--- a/src/components/Board/Board.js
+++ b/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;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 11d39e9..498fb95 100644
--- a/src/components/Header/Header.js
+++ b/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,
diff --git a/src/services/base.js b/src/services/base.js
new file mode 100644
index 0000000..cabffb4
--- /dev/null
+++ b/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'
+      }
+    });
+  }
+}
diff --git a/src/services/game.js b/src/services/game.js
new file mode 100644
index 0000000..a8596cf
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/services/index.js b/src/services/index.js
new file mode 100644
index 0000000..e6f2e5b
--- /dev/null
+++ b/src/services/index.js
@@ -0,0 +1,2 @@
+export { GameService } from './game';
+export { RestClient } from './base';