learn-co-curriculum · CKjolhede · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024
diff --git a/db.json b/db.json
@@ -1,40 +1,70 @@
 {
   "questions": [
-    {
-      "id": 1,
-      "prompt": "What special prop should always be included for lists of elements?",
-      "answers": ["id", "name", "key", "prop"],
-      "correctIndex": 2
-    },
-    {
-      "id": 2,
-      "prompt": "A React component is a function that returns ______.",
-      "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
-    },
     {
       "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
+    },
+    {
+      "prompt": "test",
+      "answers": [
+        "test",
+        "test",
+        "tse4",
+        "tset"
+      ],
+      "correctIndex": 0,
+      "id": 7
+    },
+    {
+      "prompt": "test",
+      "answers": [
+        "test",
+        "test",
+        "tse4",
+        "tset"
+      ],
+      "correctIndex": 0,
+      "id": 8
+    },
+    {
+      "prompt": "",
+      "answers": [
+        "",
+        "",
+        "",
+        ""
+      ],
+      "correctIndex": 0,
+      "id": 9
     }
   ]
-}
+}
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "echo \".results.json\" && react-scripts test --reporters=@learn-co-curriculum/jest-learn-reporter --reporters=default --watchAll",
+    "test": "echo \".results.json\" && react-scripts test --reporters=@learn-co-curriculum/jest-learn-reporter --reporters=default --bail",
     "eject": "react-scripts eject",
     "server": "json-server --watch db.json --port=4000"
   },

diff --git a/src/componentTree.drawio b/src/componentTree.drawio
@@ -0,0 +1,49 @@
+<mxfile host="65bd71144e">
+    <diagram id="V0We9pYdJLXd2o_TcKHi" name="Page-1">
+        <mxGraphModel dx="1342" dy="2352" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="12" style="edgeStyle=none;html=1;exitX=0;exitY=0;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;fontSize=14;" parent="1" source="2" target="3" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="13" style="edgeStyle=none;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=14;" parent="1" source="2" target="4" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="15" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=14;" parent="1" source="2" target="5" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="App" style="rounded=1;whiteSpace=wrap;html=1;verticalAlign=top;fontSize=16;" parent="1" vertex="1">
+                    <mxGeometry x="-330" y="-390" width="160" height="130" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="AdminNav" style="rounded=1;whiteSpace=wrap;html=1;fontSize=18;verticalAlign=top;" parent="1" vertex="1">
+                    <mxGeometry x="-620" y="-330" width="270" height="70" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=14;" parent="1" source="4" target="8" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="QList&lt;br&gt;setQuestions&lt;br&gt;&lt;span style=&quot;white-space: pre;&quot;&gt;&#9;&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-140" y="-340" width="210" height="100" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="QForm" style="rounded=1;whiteSpace=wrap;html=1;fontSize=19;horizontal=1;verticalAlign=top;" parent="1" vertex="1">
+                    <mxGeometry x="-580" y="-140" width="220" height="130" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="QItem" style="rounded=1;whiteSpace=wrap;html=1;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-180" y="-210" width="190" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="setPage" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-240" y="-360" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="handleSubmit" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-480" y="-60" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="18" value="setFormData" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-480" y="-80" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="handleDelete" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
+                    <mxGeometry x="-90" y="-290" width="60" height="30" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
diff --git a/src/components/App.js b/src/components/App.js
@@ -9,7 +9,7 @@ function App() {
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? <QuestionForm setPage={setPage} /> : <QuestionList />}
     </main>
   );
 }

diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js
@@ -1,7 +1,15 @@
 import React, { useState } from "react";
 
+//const initialFormData =	{prompt: "",
+//			answer1: "",
+//				answer2: "",
+//					answer3: "",
+//						answer4: "",
+//							correctIndex: 0
+//	}
+
 function QuestionForm(props) {
-  const [formData, setFormData] = useState({
+	const [formData, setFormData] = useState({
     prompt: "",
     answer1: "",
     answer2: "",
@@ -19,7 +27,22 @@ function QuestionForm(props) {
 
   function handleSubmit(event) {
     event.preventDefault();
-    console.log(formData);
+  	fetch("http://localhost:4000/questions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        prompt: formData.prompt,
+        answers: [
+          formData.answer1,
+          formData.answer2,
+          formData.answer3,
+          formData.answer4,],
+        correctIndex: Number(formData.correctIndex),
+      }),
+		});
+		//{ App.setPage("List") }
   }
 
   return (

diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js
@@ -1,25 +1,28 @@
 import React from "react";
 
-function QuestionItem({ question }) {
-  const { id, prompt, answers, correctIndex } = question;
+function QuestionItem({ question, deleteItem }) {
+	const { id, prompt, answers, correctIndex } = question;
 
-  const options = answers.map((answer, index) => (
-    <option key={index} value={index}>
-      {answer}
-    </option>
-  ));
+	const options = answers.map((answer, index) => (
+		<option key={index} value={index}>
+			{answer}
+		</option>
+	));
+
+	function handleDelete() {
+		deleteItem(id)
+	}
 
-  return (
-    <li>
-      <h4>Question {id}</h4>
-      <h5>Prompt: {prompt}</h5>
-      <label>
-        Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
-      </label>
-      <button>Delete Question</button>
-    </li>
-  );
+	return (
+		<li>
+			<h4>Question {id}</h4>
+			<h5>Prompt: {prompt}</h5>
+			<label>
+				Correct Answer:
+				<select defaultValue={correctIndex}>{options}</select>
+			</label>
+			<button onClick={handleDelete}>Delete Question</button>
+		</li>
+	);
 }
-
 export default QuestionItem;
diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js
@@ -1,12 +1,63 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import QuestionItem from "./QuestionItem";
 
 function QuestionList() {
-  return (
-    <section>
-      <h1>Quiz Questions</h1>
-      <ul>{/* display QuestionItem components here after fetching */}</ul>
-    </section>
-  );
+	const [questions, setQuestions] = useState([]);
+
+	useEffect(() => {
+		fetch("http://localhost:4000/questions/")
+			.then((res) => res.json())
+			.then((questions) => {
+				setQuestions(questions);
+			});
+	}, []);
+
+	function handleDelete(id) {
+		fetch(`http://localhost:4000/questions/${id}`, {
+			method: "DELETE",
+		})
+			.then((res) => res.json())
+			.then(() => {
+				const remainingQuestions = questions.filter((question) => question.id !== id);
+				setQuestions(remainingQuestions);
+			});
+	}
+
+	function handleAnswerChange(id, correctIndex) {
+		fetch(`http://localhost:4000/questions/${id}`, {
+			method: "PATCH",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ correctIndex }),
+		})
+			.then((r) => r.json())
+			.then((updatedQuestion) => {
+				const updatedQuestions = questions.map((q) => {
+					if (q.id === updatedQuestion.id)
+						return updatedQuestion;
+					else
+						return q;
+				});
+				setQuestions(updatedQuestions);
+			});
+	}
+
+	const questionItems = questions.map((question) => (
+		<QuestionItem
+			key={question.id}
+			question={question}
+			deleteItem={handleDelete}
+			onAnswerChange={handleAnswerChange}
+		/>
+	));
+
+	return (
+		<section>
+			<h1>Quiz Questions</h1>
+			<ul>{questionItems}</ul>
+		</section>
+	);
 }
 
 export default QuestionList;