Putting it All Together

src/components/App.js

@@ -1,15 +1,52 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import AdminNavBar from "./AdminNavBar";
 import QuestionForm from "./QuestionForm";
 import QuestionList from "./QuestionList";
 
 function App() {
   const [page, setPage] = useState("List");
+  const [questions, setQuestions] = useState([]);
 
+  const handleAddQuestion = (newQuestion) => {
+    setQuestions([...questions, newQuestion]);
+  };
+
+  const handleRemoveQuestion = (deletedQuestion) => {
+    const filteredQuestions = questions.filter(
+      (question) => question.id !== deletedQuestion.id
+    );
+
+    setQuestions(filteredQuestions);
+  };
+
+  const handleUpdateQuestion = (updatedQuestion) => {
+    const updatedQuestions = questions.map((question) =>
+      question.id === updatedQuestion.id ? updatedQuestion : question
+    );
+
+    setQuestions(updatedQuestions);
+  };
+
+  useEffect(() => {
+    fetch("http://localhost:4000/questions")
+      .then((response) => response.json())
+      .then((questions) => {
+        console.log("Fetched questions:", questions);
+        setQuestions(questions);
+      });
+  }, []);
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? (
+        <QuestionForm onNewQuestion={handleAddQuestion} />
+      ) : (
+        <QuestionList
+          questions={questions}
+          onRemoveQuestion={handleRemoveQuestion}
+          onUpdateQuestion={handleUpdateQuestion}
+        />
+      )}
     </main>
   );
 }

src/components/QuestionForm.js

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
-function QuestionForm(props) {
+const questionUrl = "http://localhost:4000/questions/";
+
+function QuestionForm({ onNewQuestion }) {
   const [formData, setFormData] = useState({
     prompt: "",
     answer1: "",
@@ -19,7 +21,35 @@ 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: parseInt(formData.correctIndex),
+    };
+
+    fetch(questionUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newQuestion),
+    })
+      .then((response) => response.json())
+      .then((savedQuestion) => {
+        onNewQuestion(savedQuestion);
+        setFormData({
+          prompt: "",
+          answer1: "",
+          answer2: "",
+          answer3: "",
+          answer4: "",
+          correctIndex: 0,
+        });
+      });
   }
 
   return (

src/components/QuestionItem.js

@@ -1,23 +1,44 @@
 import React from "react";
 
-function QuestionItem({ question }) {
-  const { id, prompt, answers, correctIndex } = question;
-
+const questionUrl = "http://localhost:4000/questions/";
+function QuestionItem({
+  question,
+  questionNumber,
+  onRemoveQuestion,
+  onUpdateQuestion,
+}) {
+  const { prompt, answers, correctIndex } = question;
   const options = answers.map((answer, index) => (
     <option key={index} value={index}>
       {answer}
     </option>
   ));
+  const handleDelete = () => {
+    fetch(questionUrl + question.id, { method: "DELETE" })
+      .then((response) => response.json())
+      .then(() => onRemoveQuestion(question));
+  };
 
+  const handleChange = ({ target: { value } }) => {
+    fetch(questionUrl + question.id, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ correctIndex: value }),
+    })
+      .then((response) => response.json())
+      .then(onUpdateQuestion);
+  };
   return (
     <li>
-      <h4>Question {id}</h4>
+      <h4>Question {questionNumber}</h4>
       <h5>Prompt: {prompt}</h5>
       <label>
         Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
+        <select onChange={handleChange} defaultValue={correctIndex}>
+          {options}
+        </select>
       </label>
-      <button>Delete Question</button>
+      <button onClick={handleDelete}>Delete Question</button>
     </li>
   );
 }

src/components/QuestionList.js

@@ -1,10 +1,21 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import QuestionItem from "./QuestionItem";
 
-function QuestionList() {
+function QuestionList({ questions, onRemoveQuestion, onUpdateQuestion }) {
   return (
     <section>
       <h1>Quiz Questions</h1>
-      <ul>{/* display QuestionItem components here after fetching */}</ul>
+      <ul>
+        {questions.map((question, index) => (
+          <QuestionItem
+            key={question.id}
+            question={question}
+            onRemoveQuestion={onRemoveQuestion}
+            onUpdateQuestion={onUpdateQuestion}
+            numberQuestion={index + 1}
+          />
+        ))}
+      </ul>
     </section>
   );
 }