From ff34182190598ce10448cb97515ea8730a751d28 Mon Sep 17 00:00:00 2001 From: Stephen McKeon Date: Tue, 18 Jun 2024 13:33:57 -0400 Subject: [PATCH 1/4] Fetch questions --- src/components/App.js | 26 ++++++++++++++++++-------- src/components/QuestionList.js | 15 ++++++++++----- src/utils/fetchers.js | 5 +++++ 3 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 src/utils/fetchers.js diff --git a/src/components/App.js b/src/components/App.js index 4d33c1320..feac5c17d 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,17 +1,27 @@ -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([]) + + useEffect(() => fetchQuestions(setQuestions), []) return (
- {page === "Form" ? : } + {page === "Form" ? ( + + ) : ( + + )}
- ); + ) } -export default App; +export default App diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index 4b3701bb2..f5339abc2 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -1,12 +1,17 @@ -import React from "react"; +import React from "react" +import QuestionItem from "./QuestionItem" -function QuestionList() { +function QuestionList({ questions }) { return (

Quiz Questions

- +
- ); + ) } -export default QuestionList; +export default QuestionList diff --git a/src/utils/fetchers.js b/src/utils/fetchers.js new file mode 100644 index 000000000..b8db2efb9 --- /dev/null +++ b/src/utils/fetchers.js @@ -0,0 +1,5 @@ +export const fetchQuestions = (setQuestions) => { + fetch("http://localhost:4000/questions") + .then((response) => response.json()) + .then(setQuestions) +} From d42291c36aa1c94cbcaf8162ded953d9421aafb9 Mon Sep 17 00:00:00 2001 From: Stephen McKeon Date: Tue, 18 Jun 2024 14:05:39 -0400 Subject: [PATCH 2/4] Create and display new question --- src/components/App.js | 6 ++++- src/components/QuestionForm.js | 46 +++++++++++++++++++++++----------- src/utils/fetchers.js | 14 ++++++++++- 3 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index feac5c17d..defe21ffd 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -10,13 +10,17 @@ function App() { const [page, setPage] = useState("List") const [questions, setQuestions] = useState([]) + const handleAddQuestion = (newQuestion) => { + setQuestions([...questions, newQuestion]) + } + useEffect(() => fetchQuestions(setQuestions), []) return (
{page === "Form" ? ( - + ) : ( )} diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js index f02af04e7..e78d9dbbc 100644 --- a/src/components/QuestionForm.js +++ b/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) { - ); + ) } -export default QuestionForm; +export default QuestionForm diff --git a/src/utils/fetchers.js b/src/utils/fetchers.js index b8db2efb9..4a108ebe1 100644 --- a/src/utils/fetchers.js +++ b/src/utils/fetchers.js @@ -1,5 +1,17 @@ +const questionsUrl = "http://localhost:4000/questions" + export const fetchQuestions = (setQuestions) => { - fetch("http://localhost:4000/questions") + 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()) +} From 153b0dbd5ecfdf0dad8ab2cc9266d6d81ee792a9 Mon Sep 17 00:00:00 2001 From: Stephen McKeon Date: Tue, 18 Jun 2024 14:16:01 -0400 Subject: [PATCH 3/4] Delete question --- src/components/App.js | 10 +++++++++- src/components/QuestionItem.js | 19 ++++++++++++------- src/components/QuestionList.js | 8 ++++++-- src/utils/fetchers.js | 6 +++++- 4 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index defe21ffd..95f471487 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -14,6 +14,14 @@ function App() { setQuestions([...questions, newQuestion]) } + const handleDelete = (deletedQuestion) => { + const updatedQuestions = questions.filter( + (question) => question !== deletedQuestion + ) + + setQuestions(updatedQuestions) + } + useEffect(() => fetchQuestions(setQuestions), []) return ( @@ -22,7 +30,7 @@ function App() { {page === "Form" ? ( ) : ( - + )}
) diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js index ab5e8e820..8b0eaa33b 100644 --- a/src/components/QuestionItem.js +++ b/src/components/QuestionItem.js @@ -1,13 +1,18 @@ -import React from "react"; +import React from "react" +import { deleteQuestion } 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) => ( - )); + )) + + const handleDelete = () => { + deleteQuestion(question.id).then(() => onDelete(question)) + } return (
  • @@ -17,9 +22,9 @@ function QuestionItem({ question }) { Correct Answer: - +
    • - ); + ) } -export default QuestionItem; +export default QuestionItem diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index f5339abc2..9cb6a7597 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -1,13 +1,17 @@ import React from "react" import QuestionItem from "./QuestionItem" -function QuestionList({ questions }) { +function QuestionList({ handleDelete, questions }) { return (

    Quiz Questions

      {questions.map((question) => ( - + ))}
    diff --git a/src/utils/fetchers.js b/src/utils/fetchers.js index 4a108ebe1..97653ccd9 100644 --- a/src/utils/fetchers.js +++ b/src/utils/fetchers.js @@ -1,4 +1,4 @@ -const questionsUrl = "http://localhost:4000/questions" +const questionsUrl = "http://localhost:4000/questions/" export const fetchQuestions = (setQuestions) => { fetch(questionsUrl) @@ -15,3 +15,7 @@ export const createQuestion = (questionData) => { body: JSON.stringify(questionData), }).then((response) => response.json()) } + +export const deleteQuestion = (id) => { + return fetch(questionsUrl + id, { method: "Delete" }) +} From 2ae0e66e3d80bf47a429530ccf4f3eec1b3517b0 Mon Sep 17 00:00:00 2001 From: Stephen McKeon Date: Tue, 18 Jun 2024 14:27:19 -0400 Subject: [PATCH 4/4] Update correct answer --- src/components/QuestionItem.js | 12 ++++++++++-- src/utils/fetchers.js | 14 ++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js index 8b0eaa33b..a2588883a 100644 --- a/src/components/QuestionItem.js +++ b/src/components/QuestionItem.js @@ -1,5 +1,5 @@ import React from "react" -import { deleteQuestion } from "../utils/fetchers" +import { deleteQuestion, updateQuestion } from "../utils/fetchers" function QuestionItem({ question, onDelete }) { const { id, prompt, answers, correctIndex } = question @@ -10,6 +10,12 @@ function QuestionItem({ question, onDelete }) { )) + const handleChange = (event) => { + const correctIndex = event.target.value + + updateQuestion(question.id, { correctIndex }) + } + const handleDelete = () => { deleteQuestion(question.id).then(() => onDelete(question)) } @@ -20,7 +26,9 @@ function QuestionItem({ question, onDelete }) {
    Prompt: {prompt}
    diff --git a/src/utils/fetchers.js b/src/utils/fetchers.js index 97653ccd9..abc6b0a2e 100644 --- a/src/utils/fetchers.js +++ b/src/utils/fetchers.js @@ -16,6 +16,16 @@ export const createQuestion = (questionData) => { }).then((response) => response.json()) } -export const deleteQuestion = (id) => { - return fetch(questionsUrl + id, { method: "Delete" }) +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()) }