Refactor components that don't have internal state

assets/js/components/chess-board.js

@@ -13,25 +13,28 @@ class ChessBoard extends React.Component {
     const { gameId, store } = this.props;
   }
 
-  getTurn() {
+  get turn() {
     const { store } = this.props;
     return store.getState().turn;
   }
 
-  getBoard() {
+  get board() {
     const { store } = this.props;
     return store.getState().board;
   }
 
-  getPlayer() {
+  get player() {
     const { store } = this.props;
     return store.getState().player;
   }
 
-  files(rank) {
-    const player = this.getPlayer();
+  get gameState() {
+    const { store } = this.props;
+    return store.getState().state;
+  }
 
-    switch (player) {
+  files(rank) {
+    switch (this.player) {
       case "white":
         return Object.keys(rank).sort();
       case "black":
@@ -42,8 +45,8 @@ class ChessBoard extends React.Component {
   }
 
   ranks() {
-    const board = this.getBoard();
-    const player = this.getPlayer();
+    const board = this.board;
+    const player = this.player;
 
     switch (player) {
       case "white":
@@ -54,11 +57,10 @@ class ChessBoard extends React.Component {
   }
 
   renderSquares() {
-    const board = this.getBoard();
     const { store, channel } = this.props;
 
     return _.map(this.ranks(), (rankId) => {
-      const rank = this.getBoard()[rankId];
+      const rank = this.board[rankId];
 
       return _.map(this.files(rank), (fileId) => {
         return (
@@ -66,7 +68,7 @@ class ChessBoard extends React.Component {
             file={fileId}
             key={fileId}
             rank={rankId}
-            piece={board[rankId][fileId]}
+            piece={this.board[rankId][fileId]}
             store={store}
             channel={channel}
           />
@@ -76,15 +78,13 @@ class ChessBoard extends React.Component {
   }
 
   get boardClass() {
-    const turn = this.getTurn();
-    const player = this.getPlayer();
+    const turn = this.turn;
+    const player = this.player;
 
     return classNames("board", turn + "-to-move", "player-is-" + player);
   }
 
   render() {
-    const { store } = this.props;
-
     return (
       <div className={this.boardClass}>
         <RankLabels />
@@ -94,7 +94,7 @@ class ChessBoard extends React.Component {
           {this.renderSquares()}
         </div>
 
-        <GameState store={store} />
+        <GameState gameState={this.gameState} />
       </div>
     );
   }

assets/js/components/file-labels.js

@@ -1,26 +1,22 @@
 import React from "react";
 import _ from "lodash";
 
-class FileLabels extends React.Component {
-  get fileLabels() {
-    return ["a", "b", "c", "d", "e", "f", "g", "h"];
-  }
+const FILE_LABELS = ["a", "b", "c", "d", "e", "f", "g", "h"];
 
-  renderFileLabels() {
-    return _.map(this.fileLabels, (fileLabel) => {
-      return (
-        <div key={fileLabel} className="board-label">{fileLabel}</div>
-      );
-    });
-  }
-
-  render() {
+const renderFileLabels = () => {
+  return _.map(FILE_LABELS, (fileLabel) => {
     return (
-      <div className="board-file-labels">
-        {this.renderFileLabels()}
-      </div>
+      <div key={fileLabel} className="board-label">{fileLabel}</div>
     );
-  }
-}
+  });
+};
+
+const FileLabels = () => {
+  return (
+    <div className="board-file-labels">
+      {renderFileLabels()}
+    </div>
+  );
+};
 
 export default FileLabels;

assets/js/components/game-state.js

@@ -1,37 +1,26 @@
 import React from "react";
 import classNames from "classnames";
 
-class GameState extends React.Component {
-  get gameStates() {
-    return {
-      "checkmate": "Checkmate!",
-      "stalemate": "Stalemate",
-      "check": "Check",
-    };
-  }
+const GAME_STATES = {
+  "checkmate": "Checkmate!",
+  "stalemate": "Stalemate",
+  "check": "Check",
+};
 
-  get gameState() {
-    const { store } = this.props;
-    return store.getState().state;
-  }
+const friendlyGameState = (state) => {
+  return GAME_STATES[state];
+};
 
-  get friendlyGameState() {
-    return this.gameStates[this.gameState];
-  }
+const gameStateClass = (state) => {
+  return classNames("board-game-state", state);
+};
 
-  get gameStateClass() {
-    const state = this.gameState;
-
-    return classNames("board-game-state", state);
-  }
-
-  render() {
-    return (
-      <div className={this.gameStateClass}>
-        {this.friendlyGameState}
-      </div>
-    );
-  }
-}
+const GameState = (props) => {
+  return (
+    <div className={gameStateClass(props.gameState)}>
+      {friendlyGameState(props.gameState)}
+    </div>
+  );
+};
 
 export default GameState;

assets/js/components/rank-labels.js

@@ -1,26 +1,22 @@
 import React from "react";
 import _ from "lodash";
 
-class RankLabels extends React.Component {
-  get rankLabels() {
-    return [1, 2, 3, 4, 5, 6, 7, 8];
-  }
+const RANK_LABELS = [1, 2, 3, 4, 5, 6, 7, 8];
 
-  renderRankLabels() {
-    return _.map(this.rankLabels, (rankLabel) => {
-      return (
-        <div key={rankLabel} className="board-label">{rankLabel}</div>
-      );
-    });
-  }
-
-  render() {
+const renderRankLabels = () => {
+  return _.map(RANK_LABELS, (rankLabel) => {
     return (
-      <div className="board-rank-labels">
-        {this.renderRankLabels()}
-      </div>
+      <div key={rankLabel} className="board-label">{rankLabel}</div>
     );
-  }
-}
+  });
+};
+
+const RankLabels = () => {
+  return (
+    <div className="board-rank-labels">
+      {renderRankLabels()}
+    </div>
+  );
+};
 
 export default RankLabels;