Render moves on the page

assets/js/app.js

@@ -13,6 +13,7 @@ import chessBoardReducer from "./reducers/chess-board";
 import { setGameId } from "./store/actions";
 
 import ChessBoard from "./components/chess-board";
+import MoveList from "./components/move-list";
 
 const store = createStore(chessBoardReducer);
 
@@ -25,15 +26,24 @@ class App extends React.Component {
     this.channel = new Channel(store, gameId);
   }
 
+  get moves() {
+    const { store } = this.props;
+    return store.getState().moves;
+  }
+
   render() {
     const { store, gameId } = this.props;
 
     return (
-      <ChessBoard
-        gameId={gameId}
-        store={store}
-        channel={this.channel}
-      />
+      <div>
+        <ChessBoard
+          gameId={gameId}
+          store={store}
+          channel={this.channel}
+        />
+
+        <MoveList store={store} />
+      </div>
     );
   }
 }

assets/js/components/move-list.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { connect } from "react-redux";
+import _ from "lodash";
+
+const renderMoves = (moves) => {
+  return _.map(moves, (move) => {
+    return (
+      <li key={move}>{move}</li>
+    );
+  });
+};
+
+const MoveList = (props) => {
+  return (
+    <ol className="move-list">
+      {renderMoves(props.moves)}
+    </ol>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    moves: state.moves,
+  };
+}
+
+export default connect(mapStateToProps)(MoveList);

assets/js/reducers/chess-board.js

@@ -15,7 +15,8 @@ const chessBoardReducer = (state = defaultState, action) => {
         .set("turn", action.turn)
         .set("state", action.state)
         .set("selectedSquare", null)
-        .set("moves", [])
+        .set("availableMoves", [])
+        .set("moves", action.moves)
         .toJS();
 
     case "SET_AVAILABLE_MOVES":
@@ -31,7 +32,7 @@ const chessBoardReducer = (state = defaultState, action) => {
     case "SELECT_PIECE":
       return Immutable.fromJS(state)
         .set("selectedSquare", action.coords)
-        .set("moves", [])
+        .set("availableMoves", [])
         .toJS();
 
     default:

assets/js/services/channel.js

@@ -1,5 +1,5 @@
 import socket from "../socket";
-import { setPlayer, setGame, setMoves } from "../store/actions";
+import { setPlayer, setGame, setAvailableMoves } from "../store/actions";
 
 class Channel {
   constructor(store, gameId) {

assets/js/store/actions.js

@@ -16,6 +16,7 @@ export const setGame = (data) => {
     type: SET_GAME,
     board: data.board,
     turn: data.turn,
+    moves: data.moves,
     state: data.state,
   };
 };

assets/js/store/default-state.js

@@ -7,6 +7,8 @@ const defaultState = {
 
   availableMoves: [],
 
+  moves: [],
+
   board: {
     8: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     7: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },