From 1bcc33dc0a8c33549175e8e23a13253419bb7e43 Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Mon, 16 Jun 2025 14:05:40 -0400
Subject: [PATCH 1/4] Display quiz question list

---
 src/components/QuestionItem.js |  4 +---
 src/components/QuestionList.js | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js
index ab5e8e820..cc1bf0c71 100644
--- a/src/components/QuestionItem.js
+++ b/src/components/QuestionItem.js
@@ -1,8 +1,6 @@
 import React from "react";
 
-function QuestionItem({ question }) {
-  const { id, prompt, answers, correctIndex } = question;
-
+function QuestionItem({ id, prompt, answers, correctIndex }) {
   const options = answers.map((answer, index) => (
     <option key={index} value={index}>
       {answer}
diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js
index 4b3701bb2..50561a2ce 100644
--- a/src/components/QuestionList.js
+++ b/src/components/QuestionList.js
@@ -1,10 +1,31 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import QuestionItem from "./QuestionItem";
 
 function QuestionList() {
+  const [questions, setQuestions] = useState([]);
+
+  useEffect(() => {
+    fetch("http://localhost:4000/questions")
+      .then((r) => r.json())
+      .then((data) => {
+        setQuestions(data);
+      });
+  }, []);
+
   return (
     <section>
       <h1>Quiz Questions</h1>
-      <ul>{/* display QuestionItem components here after fetching */}</ul>
+      <ul>
+        {questions.map((q) => (
+          <QuestionItem
+            key={q.id}
+            id={q.id}
+            prompt={q.prompt}
+            answers={q.answers}
+            correctIndex={q.correctIndex}
+          />
+        ))}
+      </ul>
     </section>
   );
 }

From e13d87bd778dc9a0764b2ed6399efad01fa9f759 Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Mon, 16 Jun 2025 14:20:57 -0400
Subject: [PATCH 2/4] Add new questions to list

---
 src/components/App.js          | 11 ++++++++++-
 src/components/QuestionForm.js | 32 ++++++++++++++++++++++++++++----
 src/components/QuestionList.js |  4 +---
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 4d33c1320..1205039dc 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,11 +5,20 @@ import QuestionList from "./QuestionList";
 
 function App() {
   const [page, setPage] = useState("List");
+  const [questions, setQuestions] = useState([]);
+
+  const handleNewQuestion = (newQuestion) => {
+    setQuestions([...questions, newQuestion]);
+  };
 
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? (
+        <QuestionForm handleNewQuestion={handleNewQuestion} />
+      ) : (
+        <QuestionList questions={questions} setQuestions={setQuestions} />
+      )}
     </main>
   );
 }
diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js
index f02af04e7..a6fb64d5c 100644
--- a/src/components/QuestionForm.js
+++ b/src/components/QuestionForm.js
@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 
-function QuestionForm(props) {
-  const [formData, setFormData] = useState({
+function QuestionForm({ handleNewQuestion }) {
+  const emptyForm = {
     prompt: "",
     answer1: "",
     answer2: "",
     answer3: "",
     answer4: "",
     correctIndex: 0,
-  });
+  };
+  const [formData, setFormData] = useState(emptyForm);
 
   function handleChange(event) {
     setFormData({
@@ -19,7 +20,30 @@ function QuestionForm(props) {
 
   function handleSubmit(event) {
     event.preventDefault();
-    console.log(formData);
+
+    const newQuestion = {
+      prompt: formData.prompt,
+      answers: [
+        formData.answer1,
+        formData.answer2,
+        formData.answer3,
+        formData.answer4,
+      ],
+      correctIndex: formData.correctIndex,
+    };
+
+    fetch("http://localhost:4000/questions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(newQuestion),
+    })
+      .then((r) => r.json())
+      .then((questionObj) => {
+        handleNewQuestion(questionObj);
+        setFormData(emptyForm);
+      });
   }
 
   return (
diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js
index 50561a2ce..084461a49 100644
--- a/src/components/QuestionList.js
+++ b/src/components/QuestionList.js
@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import QuestionItem from "./QuestionItem";
 
-function QuestionList() {
-  const [questions, setQuestions] = useState([]);
-
+function QuestionList({ questions, setQuestions }) {
   useEffect(() => {
     fetch("http://localhost:4000/questions")
       .then((r) => r.json())

From faa172d519ad3e036b754d4b7c4f4f224676831f Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Mon, 16 Jun 2025 14:29:39 -0400
Subject: [PATCH 3/4] Delete questions from list

---
 src/components/QuestionItem.js |  4 ++--
 src/components/QuestionList.js | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js
index cc1bf0c71..22bbf864f 100644
--- a/src/components/QuestionItem.js
+++ b/src/components/QuestionItem.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-function QuestionItem({ id, prompt, answers, correctIndex }) {
+function QuestionItem({ id, prompt, answers, correctIndex, onDelete }) {
   const options = answers.map((answer, index) => (
     <option key={index} value={index}>
       {answer}
@@ -15,7 +15,7 @@ function QuestionItem({ id, prompt, answers, correctIndex }) {
         Correct Answer:
         <select defaultValue={correctIndex}>{options}</select>
       </label>
-      <button>Delete Question</button>
+      <button onClick={() => onDelete(id)}>Delete Question</button>
     </li>
   );
 }
diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js
index 084461a49..16ac47731 100644
--- a/src/components/QuestionList.js
+++ b/src/components/QuestionList.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import QuestionItem from "./QuestionItem";
 
 function QuestionList({ questions, setQuestions }) {
@@ -10,6 +10,13 @@ function QuestionList({ questions, setQuestions }) {
       });
   }, []);
 
+  const handleDelete = (id) => {
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "DELETE",
+    });
+    setQuestions(questions.filter((q) => q.id !== id));
+  };
+
   return (
     <section>
       <h1>Quiz Questions</h1>
@@ -21,6 +28,7 @@ function QuestionList({ questions, setQuestions }) {
             prompt={q.prompt}
             answers={q.answers}
             correctIndex={q.correctIndex}
+            onDelete={handleDelete}
           />
         ))}
       </ul>

From b479439e315a349fb51ee749156d7f7e64a55eab Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Mon, 16 Jun 2025 14:44:54 -0400
Subject: [PATCH 4/4] Change correct answers

---
 src/components/QuestionItem.js | 27 +++++++++++++++++++++++++--
 src/components/QuestionList.js |  7 +++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js
index 22bbf864f..3cc6809b3 100644
--- a/src/components/QuestionItem.js
+++ b/src/components/QuestionItem.js
@@ -1,19 +1,42 @@
 import React from "react";
 
-function QuestionItem({ id, prompt, answers, correctIndex, onDelete }) {
+function QuestionItem({
+  id,
+  prompt,
+  answers,
+  correctIndex,
+  onDelete,
+  onAnswerChange,
+}) {
   const options = answers.map((answer, index) => (
     <option key={index} value={index}>
       {answer}
     </option>
   ));
 
+  const changeAnswer = (e) => {
+    const updatedAnswer = {
+      correctIndex: e.target.value,
+    };
+
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updatedAnswer),
+    })
+      .then((r) => r.json())
+      .then((updatedQuestion) => onAnswerChange(updatedQuestion));
+  };
+
   return (
     <li>
       <h4>Question {id}</h4>
       <h5>Prompt: {prompt}</h5>
       <label>
         Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
+        <select defaultValue={correctIndex} onChange={changeAnswer}>
+          {options}
+        </select>
       </label>
       <button onClick={() => onDelete(id)}>Delete Question</button>
     </li>
diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js
index 16ac47731..47e4d408b 100644
--- a/src/components/QuestionList.js
+++ b/src/components/QuestionList.js
@@ -17,6 +17,12 @@ function QuestionList({ questions, setQuestions }) {
     setQuestions(questions.filter((q) => q.id !== id));
   };
 
+  const handleAnswerChange = (updatedQuestion) => {
+    setQuestions(
+      questions.map((q) => (q.id === updatedQuestion.id ? updatedQuestion : q))
+    );
+  };
+
   return (
     <section>
       <h1>Quiz Questions</h1>
@@ -29,6 +35,7 @@ function QuestionList({ questions, setQuestions }) {
             answers={q.answers}
             correctIndex={q.correctIndex}
             onDelete={handleDelete}
+            onAnswerChange={handleAnswerChange}
           />
         ))}
       </ul>