From 841ccac462d60896c8f9160b41ec513563ae0ea7 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Fri, 2 Mar 2018 14:29:53 -0500 Subject: [PATCH] Move API and channel to their own services --- assets/js/components/chess-board-square.js | 14 +++++++------ assets/js/components/chess-board.js | 18 +++++++---------- assets/js/services/api.js | 13 ++++++++++++ assets/js/services/channel.js | 16 +++++++++++++++ assets/package.json | 2 +- assets/yarn.lock | 23 ++++++++++++++++++---- 6 files changed, 64 insertions(+), 22 deletions(-) create mode 100644 assets/js/services/api.js create mode 100644 assets/js/services/channel.js diff --git a/assets/js/components/chess-board-square.js b/assets/js/components/chess-board-square.js index 6d3704e..e39701a 100644 --- a/assets/js/components/chess-board-square.js +++ b/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({ - method: "PATCH", - url: "/api/games/" + gameId, - data: { move: { from: selectedSquare, to: this.squareCoords } }, - }).then((data) => store.dispatch(setGame(data))); + API.updateGame(gameId, { + from: selectedSquare, + to: this.squareCoords, + }).then((response) => { + store.dispatch(setGame(response.data)); + }); } else if (selectedSquare != null) { store.dispatch(selectPiece(null)); } else if (this.playerCanSelectPiece(player, piece)) { diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js index 8107f23..72dcc7c 100644 --- a/assets/js/components/chess-board.js +++ b/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}` }) - .then(data => { - store.dispatch(setPlayer(data.player)); - store.dispatch(setGame(data)); + API.getGame(gameId) + .then(response => { + store.dispatch(setPlayer(response.data.player)); + store.dispatch(setGame(response.data)); }); - this.channel = socket.channel(`game:${gameId}`, {}); - this.channel.join() - .receive("error", resp => { - console.log("Unable to join", resp); - }); + this.channel = Channel.gameChannel(gameId); this.channel.on("game_update", data => { store.dispatch(setGame(data)); diff --git a/assets/js/services/api.js b/assets/js/services/api.js new file mode 100644 index 0000000..6a6cf82 --- /dev/null +++ b/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; diff --git a/assets/js/services/channel.js b/assets/js/services/channel.js new file mode 100644 index 0000000..ac8eed4 --- /dev/null +++ b/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; diff --git a/assets/package.json b/assets/package.json index 1f5f2fe..96f29ca 100644 --- a/assets/package.json +++ b/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", diff --git a/assets/yarn.lock b/assets/yarn.lock index 1f7d4b1..9f85d7e 100644 --- a/assets/yarn.lock +++ b/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"