From 40f26f2b6532e09973d7f4f7f7c3a5d097733a41 Mon Sep 17 00:00:00 2001
From: oxangyal <Oxana.mitch@gmail.com>
Date: Tue, 11 Jul 2023 15:19:39 -0400
Subject: [PATCH] Converted class components  to function components

---
 src/GuessControl.js       | 59 +++++++++---------------
 src/NumberGuessingGame.js | 95 ++++++++++++++++-----------------------
 2 files changed, 59 insertions(+), 95 deletions(-)

diff --git a/src/GuessControl.js b/src/GuessControl.js
index 64108b5..a40de63 100644
--- a/src/GuessControl.js
+++ b/src/GuessControl.js
@@ -1,47 +1,30 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
+
 import Button from "./Button";
 
-class GuessControl extends Component {
-  constructor(props) {
-    super(props);
+const GuessControl = ({ onGuess }) => {
+    const [currentGuess, setCurrentGuess] = useState("");
 
-    this.state = {
-      currentGuess: "",
+    const handleInputChange = (event) => {
+        let newGuessNumber = event.target.value;
+        setCurrentGuess(newGuessNumber);
     };
 
-    /**
-     * These lines are required to make the methods/functions declared on this
-     *  class have the correct `this` object when they run.
-     */
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.onSubmitGuess = this.onSubmitGuess.bind(this);
-  }
-
-  handleInputChange(event) {
-    this.setState({ currentGuess: event.target.value });
-  }
-
-  onSubmitGuess() {
-    // Since the values from an HTML input are strings by default,
-    //  convert to a number for the returned guess value
-    //  by passing in the string to the Number function.
-    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
-    this.props.onGuess(Number(this.state.currentGuess));
-    this.setState({ currentGuess: "" });
-  }
+    const onSubmitGuess = (event) => {
+        event.preventDefault();
+        onGuess(Number(currentGuess));
+        setCurrentGuess("");
+    };
 
-  render() {
     return (
-      <div>
-        <input
-          type="number"
-          value={this.state.currentGuess}
-          onChange={this.handleInputChange}
-        />
-        <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
-      </div>
+        <div>
+            <input
+                type="number"
+                value={currentGuess}
+                onChange={handleInputChange}
+            />
+            <Button onClick={onSubmitGuess}>Submit Guess</Button>
+        </div>
     );
-  }
-}
-
+};
 export default GuessControl;
diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js
index 07c5a24..63249ee 100644
--- a/src/NumberGuessingGame.js
+++ b/src/NumberGuessingGame.js
@@ -1,77 +1,58 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
+
+import GameOver from "./GameOver";
 import GuessControl from "./GuessControl";
 import GuessMessage from "./GuessMessage";
-import GameOver from "./GameOver";
 
 /**
  *
  * Returns a random integer number from 1-100 inclusive
  */
 function getRandomNumber() {
-  return Math.floor(Math.random() * 100) + 1;
+    return Math.floor(Math.random() * 100) + 1;
 }
 
 const MAX_ATTEMPTS = 5;
 
-class NumberGuessingGame extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    };
-
-    /**
-     * These lines are required to make the methods/functions declared on this
-     *  class have the correct `this` object when they run.
-     */
-    this.handleGuess = this.handleGuess.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-  }
-
-  handleGuess(guess) {
-    this.setState({
-      latestGuess: guess,
-      numberOfGuesses: this.state.numberOfGuesses + 1,
-    });
-  }
+const NumberGuessingGame = () => {
+    const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+    const [numberOfGuesses, setNumberOfGuesses] = useState(0);
+    const [latestGuess, setLatestGuess] = useState(null);
 
-  handleReset() {
-    this.setState({
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    });
-  }
+    const isCorrectGuess = latestGuess === numberToGuess;
+    const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
 
-  render() {
-    const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
+    const handleGuess = (guess) => {
+        setLatestGuess(Number(guess));
+        setNumberOfGuesses(numberOfGuesses + 1);
+    };
 
-    const isGameOver =
-      isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
+    const handleReset = () => {
+        setNumberToGuess(getRandomNumber());
+        setNumberOfGuesses(0);
+        setLatestGuess(null);
+    };
 
     return (
-      <div>
-        <h2>I'm thinking of a number from 1 to 100.</h2>
-        <h2>
-          Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
-        </h2>
-        <GuessControl onGuess={this.handleGuess} />
-        {isGameOver && (
-          <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
-        )}
-        {!isGameOver && (
-          <GuessMessage
-            guess={this.state.latestGuess}
-            numberToGuess={this.state.numberToGuess}
-            numberOfGuesses={this.state.numberOfGuesses}
-          />
-        )}
-      </div>
+        <div>
+            <h2>I'm thinking of a number from 1 to 100.</h2>
+            <h2>
+                Can you guess the number I am thinking of in {MAX_ATTEMPTS}{" "}
+                tries?
+            </h2>
+            <GuessControl onGuess={handleGuess} />
+            {isGameOver && (
+                <GameOver hasWon={isCorrectGuess} onReset={handleReset} />
+            )}
+            {!isGameOver && (
+                <GuessMessage
+                    guess={latestGuess}
+                    numberToGuess={numberToGuess}
+                    numberOfGuesses={numberOfGuesses}
+                />
+            )}
+        </div>
     );
-  }
-}
+};
 
 export default NumberGuessingGame;