implementing time travel

Author: oswagner

src/index.js

@@ -51,12 +51,13 @@ import './index.css';
               history:[{
                   squares: Array(9).fill(null)
               }],
+              stepNumber: 0,
               xIsNext: true
           }
       }
 
       handleClick(i) {
-          const history = this.state.history;
+          const history = this.state.history.slice(0, this.state.stepNumber +1);
           const current = history[history.length -1];
           const squares = current.squares.slice();
         if (calculateWinner(squares) || squares[i]) {
@@ -67,15 +68,34 @@ import './index.css';
             history: history.concat([{
                 squares: squares
             }]),
+            stepNumber: history.length,
             xIsNext: !this.state.xIsNext
         });
     }
 
+    jumpTo(step) {
+        this.setState({
+            stepNumber: step,
+            xIsNext: (step % 0) === 0
+        })
+    }
+
     render() {
     const history = this.state.history;
-    const current = history[history.length - 1];
+    const current = history[this.state.stepNumber];
     const winner = calculateWinner(current.squares);
 
+    const moves = history.map((step, move) => {
+        const desc = move ? 
+            'Go to move #' + move : 
+            'Go to game start';
+        return (
+            <li key={move}>
+                <button onClick={()=> this.jumpTo(move)}> {desc} </button>
+            </li>
+        )
+    });
+
     let status;
     if (winner) {
       status = 'Winner: ' + winner;
@@ -93,7 +113,7 @@ import './index.css';
           </div>
           <div className="game-info">
             <div>{ status }</div>
-            <ol>{/* TODO */}</ol>
+            <ol>{ moves }</ol>
           </div>
         </div>
       );