From 6dcfb7ba49280e8ff8e8ddd1814530b6c11eff2c Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 13 Mar 2022 19:14:39 +0100
Subject: [PATCH] Add a button that toggles move list sorting order

---
 src/index.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 2d4632f..8e104d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 
 /*TODO
-    Add a toggle button that lets you sort the moves in either ascending or descending order.
     When someone wins, highlight the three squares that caused the win.
     When no one wins, display a message about the result being a draw.
 */
@@ -49,6 +48,7 @@ class Game extends React.Component {
             }],
             xIsNext: true,
             currentMoveIndex: 0,
+            reverseHistoryOrder: false,
         }
     }
 
@@ -81,6 +81,12 @@ class Game extends React.Component {
         });
     }
 
+    toggleReverseHistoryOrder() {
+        this.setState({
+            reverseHistoryOrder: !this.state.reverseHistoryOrder,
+        });
+    }
+
     render() {
         const history = this.state.history;
         const currentState = history[this.state.currentMoveIndex];
@@ -93,7 +99,7 @@ class Game extends React.Component {
             status = `Next player ${nextPlayer}`;
         }
 
-        const moves = history.map((state, index) => {
+        let moves = history.map((state, index) => {
             const description = index === 0 ?
                 'Go to game start' :
                 `Go to move #${index} [${state.playX}, ${state.playY}]`;
@@ -104,6 +110,10 @@ class Game extends React.Component {
             );
         });
 
+        if (this.state.reverseHistoryOrder) {
+            moves = moves.reverse();
+        }
+
         return (
             <div className="game">
                 <div className="game-board">
@@ -115,7 +125,8 @@ class Game extends React.Component {
                 </div>
                 <div className="game-info">
                     <div>{status}</div>
-                    <ol>{moves}</ol>
+                    <button onClick={() => this.toggleReverseHistoryOrder()}>Reverse order</button>
+                    <ol reversed={this.state.reverseHistoryOrder}>{moves}</ol>
                 </div>
             </div>
         );