Live Coding Solution

src/components/App.js

@@ -1,17 +1,39 @@
-import React, { useState } from "react";
-import AdminNavBar from "./AdminNavBar";
-import QuestionForm from "./QuestionForm";
-import QuestionList from "./QuestionList";
+import React, { useEffect, useState } from "react"
+
+import { fetchQuestions } from "../utils/fetchers"
+
+import AdminNavBar from "./AdminNavBar"
+import QuestionForm from "./QuestionForm"
+import QuestionList from "./QuestionList"
 
 function App() {
-  const [page, setPage] = useState("List");
+  const [page, setPage] = useState("List")
+  const [questions, setQuestions] = useState([])
+
+  const handleAddQuestion = (newQuestion) => {
+    setQuestions([...questions, newQuestion])
+  }
+
+  const handleDelete = (deletedQuestion) => {
+    const updatedQuestions = questions.filter(
+      (question) => question !== deletedQuestion
+    )
+
+    setQuestions(updatedQuestions)
+  }
+
+  useEffect(() => fetchQuestions(setQuestions), [])
 
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? (
+        <QuestionForm onAddQuestion={handleAddQuestion} />
+      ) : (
+        <QuestionList handleDelete={handleDelete} questions={questions} />
+      )}
     </main>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/QuestionForm.js

@@ -1,25 +1,41 @@
-import React, { useState } from "react";
+import React, { useState } from "react"
 
-function QuestionForm(props) {
-  const [formData, setFormData] = useState({
-    prompt: "",
-    answer1: "",
-    answer2: "",
-    answer3: "",
-    answer4: "",
-    correctIndex: 0,
-  });
+import { createQuestion } from "../utils/fetchers"
+
+const initialState = {
+  prompt: "",
+  answer1: "",
+  answer2: "",
+  answer3: "",
+  answer4: "",
+  correctIndex: 0,
+}
+
+function QuestionForm({ onAddQuestion }) {
+  const [formData, setFormData] = useState(initialState)
+  const { prompt, answer1, answer2, answer3, answer4, correctIndex } = formData
+
+  const resetForm = () => setFormData(initialState)
 
   function handleChange(event) {
     setFormData({
       ...formData,
       [event.target.name]: event.target.value,
-    });
+    })
   }
 
+  const sanitizeInput = () => ({
+    prompt: prompt,
+    answers: [answer1, answer2, answer3, answer4],
+    correctIndex: correctIndex,
+  })
+
   function handleSubmit(event) {
-    event.preventDefault();
-    console.log(formData);
+    event.preventDefault()
+
+    const questionData = sanitizeInput()
+
+    createQuestion(questionData).then(onAddQuestion).then(resetForm)
   }
 
   return (
@@ -87,7 +103,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,38 @@
-import React from "react";
+import React from "react"
+import { deleteQuestion, updateQuestion } from "../utils/fetchers"
 
-function QuestionItem({ question }) {
-  const { id, prompt, answers, correctIndex } = question;
+function QuestionItem({ question, onDelete }) {
+  const { id, prompt, answers, correctIndex } = question
 
   const options = answers.map((answer, index) => (
     <option key={index} value={index}>
       {answer}
     </option>
-  ));
+  ))
+
+  const handleChange = (event) => {
+    const correctIndex = event.target.value
+
+    updateQuestion(question.id, { correctIndex })
+  }
+
+  const handleDelete = () => {
+    deleteQuestion(question.id).then(() => onDelete(question))
+  }
 
   return (
     <li>
       <h4>Question {id}</h4>
       <h5>Prompt: {prompt}</h5>
       <label>
         Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
+        <select defaultValue={correctIndex} onChange={handleChange}>
+          {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,21 @@
-import React from "react";
+import React from "react"
+import QuestionItem from "./QuestionItem"
 
-function QuestionList() {
+function QuestionList({ handleDelete, questions }) {
   return (
     <section>
       <h1>Quiz Questions</h1>
-      <ul>{/* display QuestionItem components here after fetching */}</ul>
+      <ul>
+        {questions.map((question) => (
+          <QuestionItem
+            key={question.id}
+            question={question}
+            onDelete={handleDelete}
+          />
+        ))}
+      </ul>
     </section>
-  );
+  )
 }
 
-export default QuestionList;
+export default QuestionList

src/utils/fetchers.js

@@ -0,0 +1,31 @@
+const questionsUrl = "http://localhost:4000/questions/"
+
+export const fetchQuestions = (setQuestions) => {
+  fetch(questionsUrl)
+    .then((response) => response.json())
+    .then(setQuestions)
+}
+
+export const createQuestion = (questionData) => {
+  return fetch(questionsUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(questionData),
+  }).then((response) => response.json())
+}
+
+export const deleteQuestion = (questionId) => {
+  return fetch(questionsUrl + questionId, { method: "Delete" })
+}
+
+export const updateQuestion = (questionId, questionData) => {
+  return fetch(questionsUrl + questionId, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(questionData),
+  }).then((response) => response.json())
+}