Solution

db.json

@@ -1,40 +1,81 @@
 {
   "questions": [
     {
-      "id": 1,
+      "id": "1",
       "prompt": "What special prop should always be included for lists of elements?",
-      "answers": ["id", "name", "key", "prop"],
+      "answers": [
+        "id",
+        "name",
+        "key",
+        "prop"
+      ],
       "correctIndex": 2
     },
     {
-      "id": 2,
+      "id": "2",
       "prompt": "A React component is a function that returns ______.",
-      "answers": ["HTML", "JSX", "props", "state"],
+      "answers": [
+        "HTML",
+        "JSX",
+        "props",
+        "state"
+      ],
       "correctIndex": 1
     },
     {
-      "id": 3,
+      "id": "3",
       "prompt": "Which event handler will run when a user is finished filling out a form?",
-      "answers": ["onSubmit", "onClick", "onChange", "onForm"],
+      "answers": [
+        "onSubmit",
+        "onClick",
+        "onChange",
+        "onForm"
+      ],
       "correctIndex": 0
     },
     {
-      "id": 4,
+      "id": "4",
       "prompt": "______ is a tool that transpiles JSX into valid JavaScript.",
-      "answers": ["React", "Babel", "Webpack", "ES6"],
+      "answers": [
+        "React",
+        "Babel",
+        "Webpack",
+        "ES6"
+      ],
       "correctIndex": 1
     },
     {
-      "id": 5,
+      "id": "5",
       "prompt": "What syntax makes it possible to unpack values from arrays, or properties from objects, into distinct variables?",
-      "answers": ["spread", "key-value", "coalescing", "destructuring"],
+      "answers": [
+        "spread",
+        "key-value",
+        "coalescing",
+        "destructuring"
+      ],
       "correctIndex": 3
     },
     {
-      "id": 6,
+      "id": "6",
       "prompt": "Returning different elements from a component depending on the state of your application is known as _____ rendering.",
-      "answers": ["voodoo", "conditional", "reactive", "controlled"],
+      "answers": [
+        "voodoo",
+        "conditional",
+        "reactive",
+        "controlled"
+      ],
       "correctIndex": 1
+    },
+    {
+      "id": "7c79",
+      "prompt": "p",
+      "answers": [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      "correctIndex": 0
     }
   ]
-}
+}

src/components/App.js

@@ -1,17 +1,54 @@
-import React, { useState } from "react";
-import AdminNavBar from "./AdminNavBar";
-import QuestionForm from "./QuestionForm";
-import QuestionList from "./QuestionList";
+import React, { useEffect, useState } from "react"
+import AdminNavBar from "./AdminNavBar"
+import QuestionForm from "./QuestionForm"
+import QuestionList from "./QuestionList"
+
+const url = "http://localhost:4000/questions"
 
 function App() {
-  const [page, setPage] = useState("List");
+  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(url)
+      .then((response) => response.json())
+      .then(setQuestions)
+  }, [])
 
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? (
+        <QuestionForm onAddQuestion={handleAddQuestion} />
+      ) : (
+        <QuestionList
+          questions={questions}
+          onRemoveQuestion={handleRemoveQuestion}
+          onUpdateQuestion={handleUpdateQuestion}
+        />
+      )}
     </main>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/QuestionForm.js

@@ -1,25 +1,45 @@
-import React, { useState } from "react";
+import React, { useState } from "react"
 
-function QuestionForm(props) {
+const url = "http://localhost:4000/questions"
+
+function QuestionForm({ onAddQuestion }) {
   const [formData, setFormData] = useState({
     prompt: "",
     answer1: "",
     answer2: "",
     answer3: "",
     answer4: "",
     correctIndex: 0,
-  });
+  })
 
   function handleChange(event) {
     setFormData({
       ...formData,
       [event.target.name]: event.target.value,
-    });
+    })
   }
 
   function handleSubmit(event) {
-    event.preventDefault();
-    console.log(formData);
+    event.preventDefault()
+
+    const newQuestion = {
+      prompt: formData.prompt,
+      answers: [
+        formData.answer1,
+        formData.answer2,
+        formData.answer3,
+        formData.answer4,
+      ],
+      correctIndex: parseInt(formData.correctIndex),
+    }
+
+    fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newQuestion),
+    })
+      .then((response) => response.json())
+      .then(onAddQuestion)
   }
 
   return (
@@ -87,7 +107,7 @@ function QuestionForm(props) {
         <button type="submit">Add Question</button>
       </form>
     </section>
-  );
+  )
 }
 
-export default QuestionForm;
+export default QuestionForm

src/components/QuestionItem.js

@@ -1,25 +1,50 @@
-import React from "react";
+import React from "react"
 
-function QuestionItem({ question }) {
-  const { id, prompt, answers, correctIndex } = question;
+const url = "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(url + question.id, { method: "DELETE" })
+      .then((response) => response.json())
+      .then(onRemoveQuestion)
+  }
+
+  const handleChange = ({ target: { value } }) => {
+    fetch(url + 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>
-  );
+  )
 }
 
-export default QuestionItem;
+export default QuestionItem

src/components/QuestionList.js

@@ -1,12 +1,24 @@
-import React from "react";
+import React from "react"
 
-function QuestionList() {
+import QuestionItem from "./QuestionItem"
+
+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}
+            questionNumber={index + 1}
+            question={question}
+            onRemoveQuestion={onRemoveQuestion}
+            onUpdateQuestion={onUpdateQuestion}
+          />
+        ))}
+      </ul>
     </section>
-  );
+  )
 }
 
-export default QuestionList;
+export default QuestionList