Cleaning code.

- using functional component definition for Board react component.

src/components/Board.js

@@ -1,34 +1,32 @@
 
-import React, { Component } from 'react';
+import React from 'react';
 import Square from './Square'
 import '../styles/board.css'
 
-export default class Board extends Component {
-    files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
-    ranks = [1, 2, 3, 4, 5, 6, 7, 8];
+const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+const ranks = [1, 2, 3, 4, 5, 6, 7, 8];
 
-    getPiece(f, r) {
-        return this.props.squares[this.ranks.indexOf(r)* 8 + this.files.indexOf(f)].piece;
-    }
+function getPiece(squares, f, r) {
+    return squares[ranks.indexOf(r)* 8 + files.indexOf(f)].piece;
+}
 
-    render() {
-        return (
-            <table className="chess-board">
-            <tbody>
-                {this.ranks.slice().reverse().map(r => 
-                    <tr key={"tr" + r.toString()}>
-                        {this.files.map(f => 
-                        <td key={"td"+f+r.toString()} onClick={() => this.props.handleClick(f+r)}>
-                            <Square key={f+r.toString()} 
-                                file={f} 
-                                rank={r} 
-                                piece={this.getPiece(f, r)} 
-                                selected={this.props.selected && this.props.selected.startsWith(f+r)}
-                                threatened={typeof this.props.threatenedSquares[0] !== "undefined" ? this.props.threatenedSquares[0].filter(square => square.file===f && square.rank === r).length : false} />
-                        </td>)}
-                    </tr>)}
-            </tbody>
-            </table>
-        );
-    }
+export default function Board(props) {
+    return (
+        <table className="chess-board">
+        <tbody>
+            {ranks.slice().reverse().map(r => 
+                <tr key={"tr" + r.toString()}>
+                    {files.map(f => 
+                    <td key={"td"+f+r.toString()} onClick={() => props.handleClick(f+r)}>
+                        <Square key={f+r.toString()} 
+                            file={f} 
+                            rank={r} 
+                            piece={getPiece(props.squares, f, r)} 
+                            selected={props.selected && props.selected.startsWith(f+r)}
+                            threatened={typeof props.threatenedSquares[0] !== "undefined" ? props.threatenedSquares[0].filter(square => square.file===f && square.rank === r).length : false} />
+                    </td>)}
+                </tr>)}
+        </tbody>
+        </table>
+    );
 }

src/containers/VisibleBoard.js

@@ -3,14 +3,6 @@ import { connect } from 'react-redux';
 import {clickSquare} from '../actions';
 import Board from '../components/Board';
 
-/**
-    <Board 
-    squares={this.state.gameClient.getStatus().board.squares} 
-    selected={this.state.selectedSquare} 
-    threatenedSquares={this.getThreatenedSquares()}
-    handleClick={square => this.handleClick(square)} />
- */
-
 function getThreatenedSquares(client, selected) {
     return client.validMoves
                 .filter(move => move.src.file+move.src.rank===selected)

src/reducers/game.js

@@ -30,7 +30,12 @@ function handleClick(state, square) {
     return state;
 }
 
-export default (state = {client: Chess.createSimple(), selectedSquare: null}, action) => {
+const initialState = {
+    client: Chess.createSimple(), 
+    selectedSquare: null
+};
+
+export default (state = initialState, action) => {
     switch(action.type) {
         case 'CLICK_SQUARE':
             return handleClick(state, action.square);