fix Nick's comments to PR#7

.eslintignore

@@ -1,3 +1,2 @@
-node_modules
-dist
-app/utils/BFS.js
+node_modules/
+dist/

.eslintrc.js

@@ -2,24 +2,24 @@ module.exports = {
   extends: "airbnb",
   plugins: ["react"],
   env: {
-    "browser": true,
+    browser: true,
   },
   parser: "babel-eslint",
   rules: {
     "no-tabs": "off",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always",
-      "imports": "never",
-      "exports": "never",
-      "functions": "always-multiline"
+      arrays: "always-multiline",
+      objects: "always",
+      imports: "always",
+      exports: "always",
+      functions: "always-multiline",
     }],
-    "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
-    "react/jsx-curly-spacing": ["error", "always", { "allowMultiline": true }],
-  	// enforce spacing inside array brackets
+    "react/jsx-filename-extension": ["error", { "extensions": [".js"], }],
+    "react/jsx-curly-spacing": ["error", "always", { "allowMultiline": true, }],
+		// enforce spacing inside array brackets
     'array-bracket-spacing': ['error', 'always'],
-    'react/forbid-prop-types': ["off", { forbid: ['any', 'array', 'object'] }],
+    'react/forbid-prop-types': ["off", { forbid: ['any', 'array', 'object'], }],
   },
 };

.gitignore

@@ -1,2 +1,2 @@
-node_modules
-dist
+node_modules/
+dist/

app/components/App/App.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { autobind } from 'core-decorators';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { autobind, } from 'core-decorators';
+import { BrowserRouter, Route, Switch, } from 'react-router-dom';
 import findPath from '../../utils/BFS';
 import Game from '../Game/Game';
+import SettingsScreen from '../SettingsScreen/SettingsScreen';
 // const Settings = require('./Settings');
 // const Results = require('./Results');
 
-function resetBoard(lengthX, lengthY) {
+function createBoard(lengthX, lengthY) {
   console.log('creating board');
 
   const board = [];
@@ -28,7 +29,6 @@ function cloneBoard(board) {
   return (board.map(row => (row.map(cell => ({ ...cell, })))));
 }
 
-@autobind
 export default class App extends React.Component {
   static get defaultProps() {
     return {
@@ -45,27 +45,27 @@ export default class App extends React.Component {
   }
   constructor(props) {
     super(props);
-
+    const { colors, dimensions, } = props;
+    const { A: colorA, B: colorB, C: colorC, } = colors;
+    const { x: lengthX, y: lengthY, } = dimensions;
     this.state = {
-      colorA: props.colors.A,
-      colorB: props.colors.B,
-      colorC: props.colors.C,
-      board: resetBoard(props.dimensions.x, props.dimensions.y),
+      colorA,
+      colorB,
+      colorC,
+      board: createBoard(lengthX, lengthY),
       pathStartingPoint: [],
       pathEndingPoint: [],
       startButtonPressed: false,
       endButtonPressed: false,
+      goButtonPressed: false,
       // pathExistsFlag: false, // 'true if a path was found'
       // time: '',
     };
   }
 
-  setBoardColor(updatedColor, newColor) {
-    this.setState(() => {
-      const color = {};
-      color[updatedColor] = newColor;
-      return color;
-    });
+  @autobind
+  setBoardColor(colorName, colorValue) {
+    this.setState({ [colorName]: colorValue, });
   }
 
   setStartLocation(x, y) {
@@ -76,25 +76,27 @@ export default class App extends React.Component {
   }
 
   setEndLocation(x, y) {
-    this.setState(() => ({
+    this.setState({
       pathEndingPoint: [ x, y ],
       endButtonPressed: false,
-    }));
+    });
   }
 
+  @autobind
   handleClickOnBoard(x, y) {
-    if (this.state.startButtonPressed) {
+    const { startButtonPressed, endButtonPressed, } = this.state;
+    if (startButtonPressed) {
       return this.setStartLocation(x, y);
     }
 
-    if (this.state.endButtonPressed) {
+    if (endButtonPressed) {
       return this.setEndLocation(x, y);
     }
 
-    return this.toggleCellAllowedToBeSteppedOn(x, y);
+    return this.toggleIsCellAllowedToBeSteppedOn(x, y);
   }
 
-  toggleCellAllowedToBeSteppedOn(x, y) {
+  toggleIsCellAllowedToBeSteppedOn(x, y) {
     console.log('toggling cell state');
     const { board, } = this.state;
     const boardCopy = cloneBoard(board);
@@ -104,21 +106,25 @@ export default class App extends React.Component {
     this.setState({ board: boardCopy, });
   }
 
+  @autobind
   toggleStartButtonPressed() {
     this.setState({
       startButtonPressed: !this.state.startButtonPressed,
       endButtonPressed: false,
     });
   }
 
+  @autobind
   toggleEndButtonPressed() {
     this.setState({
       endButtonPressed: !this.state.endButtonPressed,
       startButtonPressed: false,
     });
   }
 
+  @autobind
   findAndDrawPath() {
+    this.setState({ goButtonPressed: true, });
     const { pathStartingPoint, pathEndingPoint, board, } = this.state;
     const boardCopy = cloneBoard(board);
     const findPathParameters = {
@@ -152,6 +158,7 @@ export default class App extends React.Component {
       toggleStartButtonPressed,
       toggleEndButtonPressed,
       findAndDrawPath,
+      setBoardColor,
     } = this;
     const handleClicks = {
       handleClickOnBoard,
@@ -168,6 +175,7 @@ export default class App extends React.Component {
       pathEndingPoint,
       startButtonPressed,
       endButtonPressed,
+      goButtonPressed,
     } = this.state;
     const gameState = {
       colorA,
@@ -178,11 +186,15 @@ export default class App extends React.Component {
       pathEndingPoint,
       startButtonPressed,
       endButtonPressed,
+      goButtonPressed,
     };
     const gameProps = {
-      state: gameState,
+      gameState,
       handleClicks,
     };
+    const settingsProps = {
+      setBoardColor,
+    };
     return (
       <BrowserRouter>
         <div className="container">
@@ -194,6 +206,13 @@ export default class App extends React.Component {
                 <Game { ...gameProps } />
                 ) }
             />
+            <Route
+              exact
+              path="/settings"
+              render={ () => (
+                <SettingsScreen { ...settingsProps } />
+                ) }
+            />
           </Switch>
         </div>
       </BrowserRouter>

app/components/AppButton/AppButton.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function AppButton({ button, style, index, }) {
+  const {
+    text,
+    classes,
+    disabled,
+    onClick,
+  } = button;
+  const buttonProps = {
+    type: 'button',
+    key: `button${index}`,
+    className: classes,
+    style,
+    onClick,
+    disabled,
+    children: text,
+  };
+  return <button { ...buttonProps } />;
+}
+
+AppButton.propTypes = {
+  button: PropTypes.shape({
+    text: PropTypes.string,
+    classes: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+  }).isRequired,
+  style: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+};

app/components/Board/Board.js

@@ -2,15 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Row from '../Row/Row';
 
-export default function Board({ state, handleClickOnBoard, }) {
-  const {
+export default function Board({
+  boardState: {
     colorA,
     colorB,
     colorC,
     board,
     pathStartingPoint,
     pathEndingPoint,
-  } = state;
+  },
+  handleClickOnBoard,
+}) {
   return (
     <div className="board">
       {board.map((row, indexY) => {
@@ -27,7 +29,7 @@ export default function Board({ state, handleClickOnBoard, }) {
         const rowProps = {
           key: `row${indexY}`,
           indexY,
-          state: rowState,
+          rowState,
           handleClickOnBoard,
         };
         return (
@@ -39,6 +41,6 @@ export default function Board({ state, handleClickOnBoard, }) {
 }
 
 Board.propTypes = {
-  state: PropTypes.object.isRequired,
+  boardState: PropTypes.object.isRequired,
   handleClickOnBoard: PropTypes.func.isRequired,
 };

app/components/ButtonsGroup/ButtonsGroup.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppButton from '../AppButton/AppButton';
+
+export default function ButtonsGroup({ buttons, }) {
+  const style = {
+    height: `${100 / buttons.length}%`,
+  };
+  return (
+    <div className="buttonGroup">
+      { buttons.map((button, index) => {
+        const buttonProps = {
+          style,
+          button,
+          index,
+        };
+        return <AppButton { ...buttonProps } />;
+      })}
+    </div>
+  );
+}
+
+ButtonsGroup.propTypes = {
+  buttons: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    classes: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+  })).isRequired,
+};