Implement CRUD with Fetch in React

.gitignore

@@ -27,3 +27,4 @@ yarn-error.log*
 
 # Ignore ESLint files
 .eslintcache
+db.json

db.json

@@ -3,38 +3,68 @@
     {
       "id": 1,
       "prompt": "What special prop should always be included for lists of elements?",
-      "answers": ["id", "name", "key", "prop"],
-      "correctIndex": 2
+      "answers": [
+        "id",
+        "name",
+        "key",
+        "prop"
+      ],
+      "correctIndex": 3
     },
     {
       "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,
       "prompt": "Which event handler will run when a user is finished filling out a form?",
-      "answers": ["onSubmit", "onClick", "onChange", "onForm"],
-      "correctIndex": 0
+      "answers": [
+        "onSubmit",
+        "onClick",
+        "onChange",
+        "onForm"
+      ],
+      "correctIndex": 2
     },
     {
       "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,
       "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,
       "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
     }
   ]
-}
+}

src/components/App.js

@@ -1,15 +1,24 @@
-import React, { useState } from "react";
+import { 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 getAllQuestions = () => {
+    fetch('http://localhost:4000/questions')
+      .then(r => r.json())
+      .then(data => setQuestions(data))
+  }
+
+  useEffect(getAllQuestions, [page])
 
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? <QuestionForm getAllQuestions={getAllQuestions} /> : <QuestionList questions={questions} setQuestions={setQuestions} />}
     </main>
   );
 }

src/components/QuestionForm.js

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
 
-function QuestionForm(props) {
-  const [formData, setFormData] = useState({
+function QuestionForm() {
+  const defaultFormState = {
     prompt: "",
     answer1: "",
     answer2: "",
     answer3: "",
     answer4: "",
     correctIndex: 0,
-  });
+  };
+  const [formData, setFormData] = useState(defaultFormState);
 
   function handleChange(event) {
     setFormData({
@@ -19,7 +20,24 @@ function QuestionForm(props) {
 
   function handleSubmit(event) {
     event.preventDefault();
-    console.log(formData);
+    const { prompt, answer1, answer2, answer3, answer4, correctIndex } =
+      formData;
+    if (prompt && answer1 && answer2 && answer3 && answer4) {
+      const formatedFormData = {
+        prompt,
+        answers: [answer1, answer2, answer3, answer4],
+        correctIndex,
+      };
+      fetch("http://localhost:4000/questions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formatedFormData),
+      })
+        .then(setFormData(defaultFormState))
+        .catch(console.error);
+    } else {
+      console.log("Please fill out all fields in order to create question.");
+    }
   }
 
   return (

src/components/QuestionItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function QuestionItem({ question }) {
+function QuestionItem({ question, setQuestions }) {
   const { id, prompt, answers, correctIndex } = question;
 
   const options = answers.map((answer, index) => (
@@ -9,15 +9,37 @@ function QuestionItem({ question }) {
     </option>
   ));
 
+  const handleDelete = (event) => {
+    event.preventDefault();
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "DELETE",
+      headers: { Accepts: "application/json" },
+    })
+      .then((r) => r.json())
+      .then(setQuestions((questions) => questions.filter((q) => q.id !== id)));
+  };
+
+  const updateCorrectAnswer = (e) => {
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ correctIndex: Number.parseInt(e.target.value) }),
+    })
+      .then((r) => r.json())
+      .then(setQuestions((questions) => questions));
+  };
+
   return (
     <li>
       <h4>Question {id}</h4>
       <h5>Prompt: {prompt}</h5>
       <label>
         Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
+        <select defaultValue={correctIndex} onChange={updateCorrectAnswer}>
+          {options}
+        </select>
       </label>
-      <button>Delete Question</button>
+      <button onClick={handleDelete}>Delete Question</button>
     </li>
   );
 }

src/components/QuestionList.js

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