Pine - Tori D.

src/App.js

@@ -29,11 +29,27 @@ const App = () => {
   // This starts state off as a 2D array of JS objects with
   // empty value and unique ids.
   const [squares, setSquares] = useState(generateSquares());
+  const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1);
 
   // Wave 2
-  // You will need to create a method to change the square
-  //   When it is clicked on.
-  //   Then pass it into the squares as a callback
+  const onClickCallback = (updatedSquare) => {
+    // You will need to create a method to change the square
+    //   When it is clicked on.
+    //   Then pass it into the squares as a callback
+    const newSquares = squares.map((square) => {
+      if (square.id === updatedSquare.id) {
+        return {
+          id: square.id,
+          value: currentPlayer,
+        };
+      } else {
+        return square;
+      }
+    });
+
+    setSquares(newSquares);
+    setCurrentPlayer(currentPlayer === 'X' ? 'O' : 'X');
+  };
 
   const checkForWinner = () => {
     // Complete in Wave 3
@@ -59,7 +75,7 @@ const App = () => {
         <button>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} />
       </main>
     </div>
   );

src/components/Board.js

@@ -3,29 +3,33 @@ import './Board.css';
 import Square from './Square';
 import PropTypes from 'prop-types';
 
-
 const generateSquareComponents = (squares, onClickCallback) => {
   // Complete this for Wave 1
-  // squares is a 2D Array, but 
+  // squares is a 2D Array, but
   //  you need to return a 1D array
   //  of square components
-
-}
+  const arr1d = [].concat.apply([], squares);
+  return arr1d.map((square) => (
+    <Square
+      key={square.id}
+      value={square.value}
+      onClickCallback={onClickCallback}
+    ></Square>
+  ));
+};
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
   console.log(squareList);
-  return <div className="grid" >
-    {squareList}
-  </div>
-}
+  return <div className="grid">{squareList}</div>;
+};
 
 Board.propTypes = {
   squares: PropTypes.arrayOf(
     PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        value: PropTypes.string.isRequired
+        value: PropTypes.string.isRequired,
       })
     )
   ),

src/components/Board.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import Board from './Board';
-import { render, screen, fireEvent} from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react';
 
 // Sample input to the Board component
 const SAMPLE_BOARD = [
@@ -46,15 +46,14 @@ const SAMPLE_BOARD = [
       value: 'X',
       id: 8,
     },
-  ],    
+  ],
 ];
 
 describe('Wave 1: Board', () => {
-
   test('that board will render with the proper number of Xs and Os', () => {
     // Act
-    render(<Board squares={SAMPLE_BOARD} onClickCallback={() => { }} />);
-      
+    render(<Board squares={SAMPLE_BOARD} onClickCallback={() => {}} />);
+
     // Assert
     const xSquares = screen.getAllByText('X');
     expect(xSquares.length).toEqual(5);
@@ -70,12 +69,14 @@ describe('Wave 1: Board', () => {
         return {
           ...square,
           value: '',
-        }
+        };
       });
     });
 
     // Act
-    const { container } = render(<Board squares={emptyBoard} onClickCallback={() => { }} />);
+    const { container } = render(
+      <Board squares={emptyBoard} onClickCallback={() => {}} />
+    );
 
     // Assert
     const buttons = container.querySelectorAll('.grid button');
@@ -84,10 +85,12 @@ describe('Wave 1: Board', () => {
 });
 describe('Wave 2: Board', () => {
   describe('button click callbacks', () => {
-    test.skip('that the callback is called for the 1st button', () => {
+    test('that the callback is called for the 1st button', () => {
       // Arrange
       const callback = jest.fn();
-      const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);
+      const { container } = render(
+        <Board squares={SAMPLE_BOARD} onClickCallback={callback} />
+      );
       const buttons = container.querySelectorAll('.grid button');
 
       // Act
@@ -97,10 +100,12 @@ describe('Wave 2: Board', () => {
       expect(callback).toHaveBeenCalled();
     });
 
-    test.skip('that the callback is called for the last button', () => {
+    test('that the callback is called for the last button', () => {
       // Arrange
       const callback = jest.fn();
-      const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);
+      const { container } = render(
+        <Board squares={SAMPLE_BOARD} onClickCallback={callback} />
+      );
       const buttons = container.querySelectorAll('.grid button');
 
       // Act
@@ -110,4 +115,4 @@ describe('Wave 2: Board', () => {
       expect(callback).toHaveBeenCalled();
     });
   });
-});
+});

src/components/Square.js

@@ -1,19 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './Square.css'
+import './Square.css';
 
 const Square = (props) => {
-  // For Wave 1 enable this 
-  //  Component to alert a parent 
+  // For Wave 1 enable this
+  //  Component to alert a parent
   //  component when it's clicked on.
+  const onClick = () => {
+    const updatedSquare = {
+      id: props.id,
+      value: props.value,
+    };
 
-  return <button
-    className="square"
-  >
-    {props.value}
-  </button>
-}
+    props.onClickCallback(updatedSquare);
+  };
+
+  return (
+    <button onClick={onClick()} className="square">
+      {props.value}
+    </button>
+  );
+};
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,

src/components/Square.test.js

@@ -1,38 +1,37 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import Square from './Square';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 describe('Wave 1: Square', () => {
   test('it renders with X given', () => {
-    render(<Square value="X" id={1} onClickCallback={() => { }} />)
-    
-    const button = screen.getByText("X");
+    render(<Square value="X" id={1} onClickCallback={() => {}} />);
+
+    const button = screen.getByText('X');
 
     expect(button).toBeInTheDocument();
   });
 
   test('it renders with O given', () => {
-    render(<Square value="O" id={1} onClickCallback={() => { }} />)
-    
-    const button = screen.getByText("O");
+    render(<Square value="O" id={1} onClickCallback={() => {}} />);
+
+    const button = screen.getByText('O');
 
     expect(button).toBeInTheDocument();
   });
 });
 
 describe('Wave 2: Square', () => {
-  test.skip('when clicked on it calls the callback function', async () => {
+  test('when clicked on it calls the callback function', async () => {
     const callback = jest.fn();
 
     render(<Square value="X" id={1} onClickCallback={callback} />);
     // Wait for it to render
-    await waitFor(() => screen.getByText('X'))
+    await waitFor(() => screen.getByText('X'));
 
     const button = screen.getByText('X');
 
     fireEvent.click(button);
     expect(callback).toHaveBeenCalled();
   });
-});
+});