From cba59847bfdb4cccf02ece49986662b5b27895be Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Mon, 31 Jul 2023 19:09:01 +0200
Subject: [PATCH] time travel

---
 src/App.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 49dd35a..345dbb8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -60,15 +60,20 @@ function Board({ xIsNext, squares, onPlay }) {
 function App() {
   const [xIsNext, setXIsNext] = useState(true);
   const [history, setHistory] = useState([Array(9).fill(null)]);
-  const currentSquares = history[history.length - 1];
+  const [currentMove, setCurrentMove] = useState(0);
+  const currentSquares = history[currentMove];
 
   function handlePlay(nextSquares) {
-    setHistory([...history, nextSquares]);
+    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
     setXIsNext(!xIsNext);
   }
 
   function jumpTo(nextMove) {
-    // TODO
+    setCurrentMove(nextMove);
+    setHistory(history.slice(0, nextMove+1));
+    setXIsNext(nextMove % 2 === 0);
   }
 
   const moves = history.map((squares, move) => {
@@ -79,7 +84,7 @@ function App() {
       description = 'Go to game start';
     }
     return (
-      <li>
+      <li key={move}>
         <button onClick={() => jumpTo(move)}>{description}</button>
       </li>
     );