feat(react): record history

react/tic-tac-toe/src/App.tsx

@@ -15,11 +15,15 @@ function Square({
   );
 }
 
-export default function Board() {
-  const [xIsNext, setXIsNext] = useState<boolean>(true);
-  const [squares, setSquares] = useState<Array<string | null>>(
-    Array<string | null>(9).fill(null),
-  );
+export function Board({
+  xIsNext,
+  squares,
+  onPlay,
+}: {
+  xIsNext: boolean;
+  squares: Array<string | null>;
+  onPlay: (nextSquares: Array<string | null>) => void;
+}): JSX.Element {
   const winner = calculateWinner(squares);
   let status: string;
   if (winner) {
@@ -40,8 +44,7 @@ export default function Board() {
     } else {
       nextSquares[i] = "O";
     }
-    setSquares(nextSquares);
-    setXIsNext(!xIsNext);
+    onPlay(nextSquares);
   };
   return (
     <>
@@ -65,6 +68,28 @@ export default function Board() {
   );
 }
 
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState<boolean>(true);
+  const [history, setHistory] = useState<Array<Array<string | null>>>([
+    Array(9).fill(null),
+  ]);
+  const currentSquares = history[history.length - 1];
+  function handlePlay(nextSquares: Array<string | null>): void {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{/*TODO*/}</ol>
+      </div>
+    </div>
+  );
+}
+
 function calculateWinner(squares: Array<string | null>): string | null {
   const lines = [
     [0, 1, 2],