Move API and channel to their own services

assets/js/components/chess-board-square.js

@@ -1,8 +1,9 @@
 import React from "react";
 import _ from "lodash";
-import $ from "jquery";
 import classNames from "classnames";
 
+import API from "../services/api";
+
 import { setGame, selectPiece } from "../store/actions";
 
 class ChessBoardSquare extends React.Component {
@@ -19,11 +20,12 @@ class ChessBoardSquare extends React.Component {
     const { gameId, selectedSquare, player } = store.getState();
 
     if (selectedSquare != null && this.moveIsValid()) {
-      $.ajax({
+      API.updateGame(gameId, {
-        method: "PATCH",
+        from: selectedSquare,
-        url: "/api/games/" + gameId,
+        to: this.squareCoords,
-        data: { move: { from: selectedSquare, to: this.squareCoords } },
+      }).then((response) => {
-      }).then((data) => store.dispatch(setGame(data)));
+        store.dispatch(setGame(response.data));
+      });
     } else if (selectedSquare != null) {
       store.dispatch(selectPiece(null));
     } else if (this.playerCanSelectPiece(player, piece)) {

assets/js/components/chess-board.js

@@ -1,10 +1,10 @@
 import React from "react";
 import _ from "lodash";
-import $ from "jquery";
 import { connect } from "react-redux";
 import classNames from "classnames";
 
-import socket from "../socket";
+import API from "../services/api";
+import Channel from "../services/channel";
 
 import { setPlayer, setGame, setGameId } from "../store/actions";
 
@@ -16,17 +16,13 @@ class ChessBoard extends React.Component {
 
     store.dispatch(setGameId(gameId));
 
-    $.ajax({ method: "GET", url: `/api/games/${gameId}` })
+    API.getGame(gameId)
-      .then(data => {
+      .then(response => {
-        store.dispatch(setPlayer(data.player));
+        store.dispatch(setPlayer(response.data.player));
-        store.dispatch(setGame(data));
+        store.dispatch(setGame(response.data));
       });
 
-    this.channel = socket.channel(`game:${gameId}`, {});
+    this.channel = Channel.gameChannel(gameId);
-    this.channel.join()
-      .receive("error", resp => {
-        console.log("Unable to join", resp);
-      });
 
     this.channel.on("game_update", data => {
       store.dispatch(setGame(data));

assets/js/services/api.js

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+const API = {
+  getGame: (gameId) => {
+    return axios.get(`/api/games/${gameId}`);
+  },
+
+  updateGame: (gameId, move) => {
+    return axios.patch(`/api/games/${gameId}`, { move });
+  },
+};
+
+export default API;

assets/js/services/channel.js

@@ -0,0 +1,16 @@
+import socket from "../socket";
+
+const Channel = {
+  gameChannel: (gameId) => {
+    const channel = socket.channel(`game:${gameId}`, {});
+
+    channel.join()
+      .receive("error", resp => {
+        console.log("Unable to join", resp);
+      });
+
+    return channel;
+  },
+};
+
+export default Channel;

assets/package.json

@@ -7,9 +7,9 @@
     "watch": "brunch watch --stdin"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",
-    "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",

assets/yarn.lock

@@ -171,6 +171,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-brunch@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-brunch/-/babel-brunch-6.1.1.tgz#0b9d04c1df12f66e76a4dbdee34d8734876f1877"
@@ -1305,6 +1312,12 @@ debug@2.6.9, debug@^2.2, debug@^2.2.0, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
 debug@~2.2, debug@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
@@ -1664,6 +1677,12 @@ fn-args@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fn-args/-/fn-args-1.0.0.tgz#974dafa1aeac4ac7c21fa09cc3b80f650106ed32"
 
+follow-redirects@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
+  dependencies:
+    debug "^3.1.0"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2235,10 +2254,6 @@ javascript-brunch@~2.0.0:
   dependencies:
     esprima "^2.6.0"
 
-jquery@^3.2.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
-
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"