From 60b2b3b93637d6f3c35514363a7e8ba43bb7836b Mon Sep 17 00:00:00 2001
From: Xiuwen Zhu <zhuxiuwen6@gmail.com>
Date: Fri, 20 Sep 2024 15:59:25 -0400
Subject: [PATCH 1/2] completed lab

---
 src/App.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..2fd9568 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,16 +4,27 @@ import QuestionCard from "./components/QuestionCard";
 import { shuffleArray } from "./lib/utils";
 import rawTriviaQuestion from "./lib/data";
 
-const triviaQuestion = rawTriviaQuestion.results[0];
+// const triviaQuestion = rawTriviaQuestion.results[0];
 
 function App() {
   const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [questionData, setQuestionData] = useState(triviaQuestion);
+  // const [questionData, setQuestionData] = useState(triviaQuestion);
+  const [questionIndex, setQuestionIndex] = useState(0);
+  const[questionData, setQuestionData] = useState(rawTriviaQuestion.results[0]);
 
   const selectAnswer = (selection) => {
     setSelectedAnswer(selection);
   };
 
+  const nextQuestion = () =>{
+    const nextIndex = questionIndex +1;
+    if(nextIndex <rawTriviaQuestion.results.length){
+      setQuestionIndex(nextIndex);
+      setQuestionData(rawTriviaQuestion.results[nextIndex]);
+      setSelectedAnswer(null);
+    }
+  };
+
   let card;
 
   if (selectedAnswer) {
@@ -37,11 +48,13 @@ function App() {
     );
   }
 
+
+
   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 onClick={nextQuestion} className="btn btn-success">Next Question</button>
         {card}
       </div>
     </div>

From 59e537421626557460cab5480c63429fbe0f6e89 Mon Sep 17 00:00:00 2001
From: Xiuwen Zhu <zhuxiuwen6@gmail.com>
Date: Fri, 20 Sep 2024 20:20:44 -0400
Subject: [PATCH 2/2] add api fetch to button

---
 src/App.jsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2fd9568..a264089 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ResultCard from "./components/ResultCard";
 import QuestionCard from "./components/QuestionCard";
 import { shuffleArray } from "./lib/utils";
@@ -16,14 +16,21 @@ function App() {
     setSelectedAnswer(selection);
   };
 
+
+
   const nextQuestion = () =>{
-    const nextIndex = questionIndex +1;
-    if(nextIndex <rawTriviaQuestion.results.length){
-      setQuestionIndex(nextIndex);
-      setQuestionData(rawTriviaQuestion.results[nextIndex]);
-      setSelectedAnswer(null);
-    }
-  };
+
+    fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple')
+    .then((response) => response.json())
+    .then((data) => {
+       console.log(data);
+       setQuestionData(data.results[0]);
+       setSelectedAnswer(null);
+    })
+    .catch((err) => {
+       console.log(err.message);
+    })
+    };
 
   let card;