Push changes to the API

web/controllers/api/game_controller.ex

@@ -7,4 +7,16 @@ defmodule Chess.Api.GameController do
     game = Repo.get!(Game, id)
     render conn, "show.json", game: game
   end
+
+  def update(conn, %{"id" => id, "game" => game_params}) do
+    game = Repo.get!(Game, id)
+    changeset = Game.changeset(game, game_params)
+
+    case Repo.update(changeset) do
+      {:ok, game} ->
+        render conn, "show.json", game: game
+      {:error, changeset} ->
+        render(conn, "edit.html", game: game, changeset: changeset)
+    end
+  end
 end

web/router.ex

@@ -5,7 +5,7 @@ defmodule Chess.Router do
     plug :accepts, ["html"]
     plug :fetch_session
     plug :fetch_flash
-    plug :protect_from_forgery
+    # plug :protect_from_forgery
     plug :put_secure_browser_headers
   end
 
@@ -24,6 +24,6 @@ defmodule Chess.Router do
   scope "/api", Chess do
     pipe_through :api
 
-    resources "/games", Api.GameController, only: [:show]
+    resources "/games", Api.GameController, only: [:show, :update]
   end
 end

web/static/js/components/chess-board-square.js

@@ -1,4 +1,5 @@
 import React from "react";
+import $ from "jquery";
 import classNames from "classnames";
 
 import { movePiece, selectPiece } from "../store/actions";
@@ -19,6 +20,7 @@ class ChessBoardSquare extends React.Component {
 
     if (store.getState().selectedSquare != null) {
       store.dispatch(movePiece(store.getState().selectedSquare, this.squareCoords()));
+      $.ajax({ method: "PATCH", url: "/api/games/" + store.getState().gameId, data: { game: { board: store.getState().board } }});
     }
     else if (this.props.piece != undefined) {
       store.dispatch(selectPiece(this.squareCoords()));

web/static/js/components/chess-board.js

@@ -1,7 +1,7 @@
 import React from "react";
 import $ from "jquery";
 import { connect } from "react-redux";
-import { setBoard } from "../store/actions";
+import { setBoard, setGameId } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
@@ -9,6 +9,8 @@ class ChessBoard extends React.Component {
   componentWillMount() {
     const { gameId, store } = this.props;
 
+    store.dispatch(setGameId(gameId));
+
     $.ajax({ method: "GET", url: "/api/games/" + gameId })
       .then((data) => store.dispatch(setBoard(data)));
   }

web/static/js/reducers/chess-board.js

@@ -6,6 +6,9 @@ const chessBoardReducer = (state = defaultState, action) => {
     case "SET_BOARD":
       return Object.assign({}, state, { board: action.board });
 
+    case "SET_GAME_ID":
+      return Object.assign({}, state, { gameId: action.gameId });
+
     case "MOVE_PIECE":
       const newState = {
         board: movePiece(state.board, action.from, action.to),

web/static/js/store/actions.js

@@ -1,4 +1,5 @@
 const SET_BOARD = "SET_BOARD";
+const SET_GAME_ID = "SET_GAME_ID";
 const SELECT_PIECE = "SELECT_PIECE";
 const MOVE_PIECE = "MOVE_PIECE";
 
@@ -9,6 +10,13 @@ export const setBoard = (board) => {
   }
 }
 
+export const setGameId = (gameId) => {
+  return {
+    type: SET_GAME_ID,
+    gameId: gameId
+  }
+}
+
 export const selectPiece = (coords) => {
   return {
     type: SELECT_PIECE,