quiz 문제 추가

src/client/src/MainRouter.jsx

@@ -30,7 +30,7 @@ function MainRouter() {
         <Route path="/quiz/by/:userId">
           <Quizzes />
         </Route>
-        <Route path="/quiz/problem/new">
+        <Route path="/quiz/problem/new/:quizId">
           <NewProblem />
         </Route>
         <Route path="/quiz/problem/edit/:problemId">

src/client/src/quiz/NewProblem.jsx

@@ -2,11 +2,18 @@ import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import Col from "react-bootstrap/Col";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { createProblem } from "./api-quiz";
+import authHelpers from "../auth/auth-helpers";
+import Modal from "react-bootstrap/esm/Modal";
 
 function NewProblem({ addProblem }) {
+  const { quizId } = useParams();
   const [answers, setAnswers] = useState([""]);
   const [question, setQuestion] = useState("");
+  const [show, setShow] = useState(false)
+
+  const jwt = authHelpers.isAuthenticated();
 
   const addAnswer = () => {
     setAnswers([...answers, ""]);
@@ -29,9 +36,25 @@ function NewProblem({ addProblem }) {
     setQuestion(event.target.value);
   };
 
-  const clickAdd = (event) => {
+  const clickAddProblem = (event) => {
     event.preventDefault();
-    addProblem({ question, answers });
+    const problem = {
+      question,
+      answers,
+      quiz: quizId,
+    };
+    createProblem({ userId: jwt.user._id }, { t: jwt.token }, problem).then(
+      (data) => {
+        if (data.error) {
+          console.log(data.error);
+        } else {
+          setQuestion(data.question);
+          setAnswers(data.answers);
+          setShow(true)
+        }
+      }
+    );
+    // addProblem({ question, answers });
   };
 
   return (
@@ -68,8 +91,19 @@ function NewProblem({ addProblem }) {
             </Form.Row>
           );
         })}
-        <Button onClick={clickAdd}>문제 추가</Button>
+        <Button onClick={clickAddProblem}>문제 추가</Button>
       </Form>
+      <Modal show={show}>
+        <Modal.Header>New Problem</Modal.Header>
+        <Modal.Body>
+          Problem successfully created.
+        </Modal.Body>
+        <Modal.Footer>
+          <Link to={`/quiz/${quizId}`}>
+            <Button>Go to quiz</Button>
+          </Link>
+        </Modal.Footer>
+      </Modal>
     </div>
   );
 }

src/client/src/quiz/api-quiz.js

@@ -33,6 +33,23 @@ const read = async (params, credentials, signal) => {
   }
 }
 
+const createProblem = async (params, credentials, problem) => {
+  try {
+    let response = await fetch('/api/quiz/problem/' + params.userId, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + credentials.t,
+      },
+      body: JSON.stringify(problem),
+    })
+    return await response.json()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 const readProblem = async (params, credentials, signal) => {
   try {
     let response = await fetch('/api/quiz/problem/by/' + params.problemId, {
@@ -102,6 +119,7 @@ const listByUserId = async (params, credentials, signal) => {
 export {
   create,
   read,
+  createProblem,
   readProblem,
   updateProblem,
   removeProblem,

src/server/quiz/quiz.controller.js

@@ -36,6 +36,27 @@ const create = async (req, res) => {
   }
 }
 
+const createProblem = async (req, res) => {
+  try {
+    const problem = new Problem(req.body)
+    problem.author = req.profile._id
+
+    await problem.save()
+
+    // push the problem to the quiz
+    if (problem.quiz) {
+      const quiz = await Quiz.findById(problem.quiz)
+      quiz.problems.push(problem)
+      await quiz.save()
+    }
+    res.json(problem)
+  } catch (error) {
+    return res.status(400).json({
+      error: dbErrorHandler.getErrorMessage(error)
+    })
+  }
+}
+
 const isAuthor = (req, res, next) => {
   const isAuthor = req.auth && req.quiz && req.auth._id == req.quiz.author._id
   if (!isAuthor) {
@@ -152,6 +173,7 @@ const problemById = async (req, res, next, id) => {
 
 export default {
   create,
+  createProblem,
   read,
   readProblem,
   updateProblem,

src/server/quiz/quiz.routes.js

@@ -6,19 +6,19 @@ import quizCtrl from './quiz.controller.js'
 const router = express.Router()
 
 router.route('/api/quiz/:userId')
-  .post(authCtrl.requireSignin, authCtrl.hasAuthorization, userCtrl.isInstructor, quizCtrl.create)
-  .get(authCtrl.requireSignin, authCtrl.hasAuthorization, quizCtrl.listByUserId)
+  .post(authCtrl.requireSignin, authCtrl.hasAuthorization, userCtrl.isInstructor, quizCtrl.create) // 퀴즈 생성
+  .get(authCtrl.requireSignin, authCtrl.hasAuthorization, quizCtrl.listByUserId) // 모든 퀴즈 반환
 
 router.route('/api/quiz/by/:quizId')
-  .get(authCtrl.requireSignin, quizCtrl.isAuthor, quizCtrl.read)
+  .get(authCtrl.requireSignin, quizCtrl.isAuthor, quizCtrl.read) // 퀴즈 하나 반환
 
 router.route('/api/quiz/problem/:userId')
-  .post(authCtrl.requireSignin, userCtrl.isInstructor)
+  .post(authCtrl.requireSignin, userCtrl.isInstructor, quizCtrl.createProblem) // 문제 생성
 
 router.route('/api/quiz/problem/by/:problemId')
-  .get(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.readProblem)
-  .put(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.updateProblem)
-  .delete(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.removeProblem)
+  .get(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.readProblem) // 문제 반환
+  .put(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.updateProblem) // 문제 수정
+  .delete(authCtrl.requireSignin, quizCtrl.isProblemAuthor, quizCtrl.removeProblem) // 문제 삭제
 
 router.param('userId', userCtrl.userById)
 router.param('quizId', quizCtrl.quizById)