From bd41e432704070bbba7c53f720974a05dedd4f9f Mon Sep 17 00:00:00 2001
From: Chris <Djchris114211@gmail.com>
Date: Mon, 23 Sep 2024 11:56:51 -0400
Subject: [PATCH 1/2] Finished Product

---
 notes.md          |  7 +++++++
 package-lock.json |  4 ++--
 src/App.jsx       | 19 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 notes.md

diff --git a/notes.md b/notes.md
new file mode 100644
index 0000000..dfede75
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,7 @@
+This is notes for what I need to do for the lab
+
+Add an event handler for the Next Question button - the answerbutton.jsx file
+
+Fetch a new question for the app when the user clicks the Next Question button
+use this API URL: https://opentdb.com/api.php?amount=1&category=9&type=multiple
+the API will return a random question with each call
diff --git a/package-lock.json b/package-lock.json
index 254efeb..bd79634 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lab-react-trivia-solution",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lab-react-trivia-solution",
-      "version": "0.0.0",
+      "version": "0.2.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..3f11fd9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,8 @@ import rawTriviaQuestion from "./lib/data";
 
 const triviaQuestion = rawTriviaQuestion.results[0];
 
+const URL = "https://opentdb.com/api.php?amount=1&category=9&type=multiple";
+
 function App() {
   const [selectedAnswer, setSelectedAnswer] = useState(null);
   const [questionData, setQuestionData] = useState(triviaQuestion);
@@ -14,6 +16,19 @@ function App() {
     setSelectedAnswer(selection);
   };
 
+  // It is having that rate limit issue, where if you click next question too fast it wont go to the next question but rather reload this question.
+
+  const fetchQuestion = async () => {
+    setQuestionData(null);
+    const response = await fetch(URL);
+    const data = await response.json();
+    setQuestionData(data.results[0]);
+  };
+
+  const handleNextQuestion = () => {
+    fetchQuestion();
+  };
+
   let card;
 
   if (selectedAnswer) {
@@ -41,7 +56,9 @@ function App() {
     <div className="w-100 my-5 d-flex justify-content-center align-items-center">
       <div style={{ maxWidth: "45%" }}>
         <h1 className="text-center">Trivia App</h1>
-        <button className="btn btn-success">Next Question</button>
+        <button className="btn btn-success" onClick={handleNextQuestion}>
+          Next Question
+        </button>
         {card}
       </div>
     </div>

From 5a0e2a79991639d6afd68c87d97e18317702bd73 Mon Sep 17 00:00:00 2001
From: Chris <Djchris114211@gmail.com>
Date: Wed, 25 Sep 2024 17:42:47 -0400
Subject: [PATCH 2/2] finalized commit

---
 notes.md    |  7 -------
 src/App.jsx | 11 ++++++-----
 2 files changed, 6 insertions(+), 12 deletions(-)
 delete mode 100644 notes.md

diff --git a/notes.md b/notes.md
deleted file mode 100644
index dfede75..0000000
--- a/notes.md
+++ /dev/null
@@ -1,7 +0,0 @@
-This is notes for what I need to do for the lab
-
-Add an event handler for the Next Question button - the answerbutton.jsx file
-
-Fetch a new question for the app when the user clicks the Next Question button
-use this API URL: https://opentdb.com/api.php?amount=1&category=9&type=multiple
-the API will return a random question with each call
diff --git a/src/App.jsx b/src/App.jsx
index 3f11fd9..cba35b2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,8 +6,6 @@ import rawTriviaQuestion from "./lib/data";
 
 const triviaQuestion = rawTriviaQuestion.results[0];
 
-const URL = "https://opentdb.com/api.php?amount=1&category=9&type=multiple";
-
 function App() {
   const [selectedAnswer, setSelectedAnswer] = useState(null);
   const [questionData, setQuestionData] = useState(triviaQuestion);
@@ -16,16 +14,19 @@ function App() {
     setSelectedAnswer(selection);
   };
 
-  // It is having that rate limit issue, where if you click next question too fast it wont go to the next question but rather reload this question.
+  // It is having that rate limit issue, where if you click next question too fast
+  // it wont go to the next question but rather reload this question.
 
   const fetchQuestion = async () => {
-    setQuestionData(null);
-    const response = await fetch(URL);
+    const response = await fetch(
+      "https://opentdb.com/api.php?amount=1&category=9&type=multiple"
+    );
     const data = await response.json();
     setQuestionData(data.results[0]);
   };
 
   const handleNextQuestion = () => {
+    setSelectedAnswer(null);
     fetchQuestion();
   };