EditableProblem으로 이전

src/client/src/quiz/EditableProblem.jsx

@@ -2,106 +2,141 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import Card from "react-bootstrap/Card";
 import Form from "react-bootstrap/Form";
+import Col from "react-bootstrap/Col";
 import Button from "react-bootstrap/Button";
+import { remove } from "lodash";
 
 const EditableForm = (props) => {
   const {
     problem,
     number,
-    onUpdate,
-    onRemove,
-    handleEditable,
-    handleChange,
+    removeAnswer,
+    addAnswer,
+    handleQuestion,
+    handleAnswer,
+    handleSave,
+    handleCancel,
   } = props;
   return (
     <Form>
+      {number + 1}번.
       <Form.Group>
         <Form.Control
-          value={`${number + 1}번. ${problem.question}`}
-          onChange={handleChange}
+          value={problem.question}
+          name="question"
+          onChange={handleQuestion}
         />
       </Form.Group>
-      Answers
+      <Form.Label>Answers</Form.Label>
       {problem.answers.map((answer, index) => {
         return (
-          <Form.Group key={index}>
-            <Form.Control value={answer} onChange={handleChange} />
-          </Form.Group>
+          <Form.Row key={index}>
+            <Col>
+              <Form.Control
+                value={answer}
+                name="answer"
+                onChange={(event) => handleAnswer(event, index)}
+              />
+            </Col>
+            <Col>
+              {problem.answers.length !== 1 && (
+                <Button onClick={() => removeAnswer(index)}>Remove</Button>
+              )}
+              {problem.answers.length - 1 === index && (
+                <Button onClick={addAnswer}>Add</Button>
+              )}
+            </Col>
+          </Form.Row>
         );
       })}
-      <Button onClick={(event) => onUpdate(number)}>수정</Button>
-      <Button onClick={() => onRemove(number)}>삭제</Button>
-      <Button onClick={handleEditable}>Editable</Button>
+      <Button onClick={(event) => handleSave(event, number)}>저장</Button>
+      <Button onClick={handleCancel}>취소</Button>
     </Form>
   );
 };
 
 const CardForm = (props) => {
-  const { problem, number, onUpdate, onRemove, handleEditable } = props;
+  const { problem, number, onRemove, handleEditable } = props;
   return (
     <Card>
       <Card.Body>
-        <Card.Title>
-          {number + 1}번. {problem.question}
-        </Card.Title>
+        {number + 1}번<Card.Title>{problem.question}</Card.Title>
         Answers
         {problem.answers.map((answer, index) => {
           return <Card.Text key={index}>{answer}</Card.Text>;
         })}
-        <Button onClick={(event) => onUpdate(number)}>수정</Button>
+        <Button onClick={handleEditable}>수정</Button>
         <Button onClick={() => onRemove(number)}>삭제</Button>
-        <Button onClick={handleEditable}>Editable</Button>
       </Card.Body>
     </Card>
   );
 };
 
-function EditableProblem(props) {
+function EditableProblem({ problem, number, onUpdate, onRemove }) {
   const [editable, setEditable] = useState(false);
+  const [problemEdit, setProblemEdit] = useState(problem);
 
   const handleEditable = (event) => {
     setEditable(!editable);
   };
 
-  const handleChange = (event) => {
-    const { name, value } = event.target;
-    console.log(name, value);
+  const handleCancel = (event) => {
+    // const { name, value } = event.target;
+    // console.log(name, value);
+    setProblemEdit(problem);
+    setEditable(!editable);
+  };
+
+  const addAnswer = () => {
+    setProblemEdit({ ...problemEdit, answers: [...problemEdit.answers, ""] });
+  };
+
+  const removeAnswer = (index) => {
+    const list = [...problemEdit.answers];
+    list.splice(index, 1);
+    setProblemEdit({ ...problemEdit, answers: list });
+  };
+
+  const handleAnswer = (event, index) => {
+    const { value } = event.target;
+    const list = [...problemEdit.answers];
+    list[index] = value;
+    setProblemEdit({ ...problemEdit, answers: list });
+  };
+
+  const handleQuestion = (event) => {
+    const { value } = event.target;
+    console.log("question", value);
+    setProblemEdit({ ...problemEdit, question: value });
+  };
+
+  const handleSave = (event, index) => {
+    onUpdate(index, problemEdit)
+    setEditable(!editable)
   };
 
   return (
     <>
       {editable ? (
         <EditableForm
-          {...props}
-          handleEditable={handleEditable}
-          handleChange={handleChange}
+          number={number}
+          problem={problemEdit}
+          handleSave={handleSave}
+          handleCancel={handleCancel}
+          removeAnswer={removeAnswer}
+          addAnswer={addAnswer}
+          handleQuestion={handleQuestion}
+          handleAnswer={handleAnswer}
         />
       ) : (
         <CardForm
-          {...props}
+          problem={problem}
+          number={number}
+          onRemove={onRemove}
           handleEditable={handleEditable}
-          handleChange={handleChange}
         />
       )}
-      {/* <Button onClick={handleEditable}>Editable</Button> */}
     </>
-    // <Card>
-    //   <Card.Body>
-    //     <Card.Title>
-    //       {/* <EditableText editable={editable}> */}
-    //       {number + 1}번. {problem.question}
-    //       {/* </EditableText> */}
-    //     </Card.Title>
-    //     Answers
-    //     {problem.answers.map((answer, index) => {
-    //       return <Card.Text key={index}>{answer}</Card.Text>;
-    //     })}
-    //     <Button onClick={(event) => onUpdate(number)}>수정</Button>
-    //     <Button onClick={() => onRemove(number)}>삭제</Button>
-    //     {/* <EditableText editable={editable} text={"Hello"} /> */}
-    //     <Button onClick={handleEditable}>Editable</Button>
-    //   </Card.Body>
-    // </Card>
   );
 }
 

src/client/src/quiz/Quiz.jsx

 import React, { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
-import { read, removeProblem } from "./api-quiz";
+import { read, removeProblem, updateProblem } from "./api-quiz";
 import auth from "../auth/auth-helpers";
-import Problem from './Problem'
+import Problem from "./Problem";
 import Button from "react-bootstrap/Button";
 import EditableProblem from "./EditableProblem";
+import Container from "react-bootstrap/Container";
 
 function Quiz() {
   const { quizId } = useParams();
@@ -28,14 +29,32 @@ function Quiz() {
     };
   }, [quizId]);
 
-  const handleUpdate = (index) => {
+  const handleUpdate = (index, problem) => {
     console.log(`Quiz에서 handleUpdate ${index}번 실행`);
-    console.log(`Quiz에서 handleUpdate ${JSON.stringify(quiz.problems[index])}`);
+    console.log(
+      `Quiz에서 handleUpdate ${JSON.stringify(quiz.problems[index])}`
+    );
+    console.log(
+      `Quiz에서 handleUpdate updated problem ${JSON.stringify(problem)}`
+    );
+    updateProblem({ problemId: problem._id }, { t: jwt.token }, problem).then(
+      (data) => {
+        if (data.error) {
+          console.log(data.error);
+        } else {
+          console.log(data);
+          const list = [...quiz.problems]
+          list[index] = data
+          console.log(list);
+          setQuiz({...quiz, problems: list})
         }
+      }
+    );
+  };
 
   const handleRemove = (index) => {
-    console.log('Quiz에서 handleRemove 실행');
-    const problem = quiz.problems[index]
+    console.log("Quiz에서 handleRemove 실행");
+    const problem = quiz.problems[index];
     console.log(problem);
     removeProblem({problemId: problem._id}, {t: jwt.token}).then(data => {
       if (data.error) {
@@ -47,19 +66,27 @@ function Quiz() {
         setQuiz({...quiz, problems: list})
       }
     })
-  }
+  };
 
   return (
-    <div>
-      <h2>제목: {quiz.title}</h2>
+    <Container>
+      <h2 className="text-center">제목: {quiz.title}</h2>
       {quiz.problems?.map((problem, i) => {
         // return <Problem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />;
-        return <EditableProblem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />;
+        return (
+          <EditableProblem
+            key={i}
+            problem={problem}
+            number={i}
+            onUpdate={handleUpdate}
+            onRemove={handleRemove}
+          />
+        );
       })}
       <Link to={`/quiz/problem/new/${quizId}`}>
         <Button>문제 추가</Button>
       </Link>
-    </div>
+    </Container>
   );
 }