Commit 9d96ee41 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

EditableProblem으로 이전

parent 809095fc
......@@ -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>
);
}
......
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>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment