From c91abb079daa62d7683cd467cc2c1925ae62c251 Mon Sep 17 00:00:00 2001
From: jpntc <judepierre4477@gmail.com>
Date: Sat, 21 Sep 2024 13:45:47 -0400
Subject: [PATCH] finished

---
 package-lock.json |  4 +--
 src/App.jsx       | 68 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 24 deletions(-)

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..76fa525 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,12 @@
-import { useState } from "react";
+import { useState} from "react";
 import ResultCard from "./components/ResultCard";
 import QuestionCard from "./components/QuestionCard";
 import { shuffleArray } from "./lib/utils";
 import rawTriviaQuestion from "./lib/data";
 
+
+// Since react rerenders on state change, I might not need to use useEffect and useState to wrap the card conditional block in a function.
+
 const triviaQuestion = rawTriviaQuestion.results[0];
 
 function App() {
@@ -16,36 +19,57 @@ function App() {
 
   let card;
 
-  if (selectedAnswer) {
-    card = (
-      <ResultCard
-        correct={selectedAnswer === questionData.correct_answer}
-        answer={questionData.correct_answer}
-      />
-    );
-  } else {
-    let options = [
-      questionData.correct_answer,
-      ...questionData.incorrect_answers,
-    ];
-    card = (
-      <QuestionCard
-        question={questionData.question}
-        options={shuffleArray(options)}
-        selectAnswer={selectAnswer}
-      />
-    );
+
+    if (selectedAnswer) {
+      card = (
+        <ResultCard
+          correct={selectedAnswer === questionData.correct_answer}
+          answer={questionData.correct_answer}
+        />
+      );
+    } else {
+      let tempArr = [...questionData.incorrect_answers];
+      console.log("Temp Arr", tempArr);
+      console.log(tempArr[0]);
+      let options = [questionData.correct_answer, ...tempArr];
+      card = (
+        <QuestionCard
+          question={questionData.question}
+          options={shuffleArray(options)}
+          selectAnswer={selectAnswer}
+        />
+      );
+    }
+  function getNextQuestion() {
+    fetch("https://opentdb.com/api.php?amount=1&category=9&type=multiple")
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        } else {
+          console.log(response.status);
+        }
+      })
+      .then((data) => {
+        setQuestionData(data.results[0]);
+        console.log("data", questionData);
+        setSelectedAnswer(false);
+      })
+      .catch((error) => {
+        console.log("Error:", error);
+      });
   }
 
   return (
     <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={() => getNextQuestion()}>
+          Next Question
+        </button>
         {card}
       </div>
     </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file