Commit 809095fc authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

editable 하다가 말았음

parent caab7670
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Card from "react-bootstrap/Card"; import Card from "react-bootstrap/Card";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
function Problem({ problem, number, onUpdate, onRemove }) { const EditableForm = (props) => {
const [editable, setEditable] = useState(false); const {
problem,
const handleEditable = (event) => { number,
setEditable(true); onUpdate,
}; onRemove,
handleEditable,
handleChange,
} = props;
return (
<Form>
<Form.Group>
<Form.Control
value={`${number + 1}번. ${problem.question}`}
onChange={handleChange}
/>
</Form.Group>
Answers
{problem.answers.map((answer, index) => {
return (
<Form.Group key={index}>
<Form.Control value={answer} onChange={handleChange} />
</Form.Group>
);
})}
<Button onClick={(event) => onUpdate(number)}>수정</Button>
<Button onClick={() => onRemove(number)}>삭제</Button>
<Button onClick={handleEditable}>Editable</Button>
</Form>
);
};
const CardForm = (props) => {
const { problem, number, onUpdate, onRemove, handleEditable } = props;
return ( return (
<Card> <Card>
<Card.Body> <Card.Body>
...@@ -20,15 +48,61 @@ function Problem({ problem, number, onUpdate, onRemove }) { ...@@ -20,15 +48,61 @@ function Problem({ problem, number, onUpdate, onRemove }) {
{problem.answers.map((answer, index) => { {problem.answers.map((answer, index) => {
return <Card.Text key={index}>{answer}</Card.Text>; return <Card.Text key={index}>{answer}</Card.Text>;
})} })}
<Link to={`/quiz/problem/edit/${problem._id}`}>
<Button onClick={(event) => onUpdate(number)}>수정</Button> <Button onClick={(event) => onUpdate(number)}>수정</Button>
</Link>
<Button onClick={() => onRemove(number)}>삭제</Button> <Button onClick={() => onRemove(number)}>삭제</Button>
<Card.Text as={editable ? "input" : "p"}>Hello 안녕!</Card.Text> <Button onClick={handleEditable}>Editable</Button>
<Button onClick={editable}>Editable</Button>
</Card.Body> </Card.Body>
</Card> </Card>
); );
};
function EditableProblem(props) {
const [editable, setEditable] = useState(false);
const handleEditable = (event) => {
setEditable(!editable);
};
const handleChange = (event) => {
const { name, value } = event.target;
console.log(name, value);
};
return (
<>
{editable ? (
<EditableForm
{...props}
handleEditable={handleEditable}
handleChange={handleChange}
/>
) : (
<CardForm
{...props}
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>
);
} }
export default Problem; export default EditableProblem;
...@@ -4,6 +4,7 @@ import { read, removeProblem } from "./api-quiz"; ...@@ -4,6 +4,7 @@ import { read, removeProblem } from "./api-quiz";
import auth from "../auth/auth-helpers"; import auth from "../auth/auth-helpers";
import Problem from './Problem' import Problem from './Problem'
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import EditableProblem from "./EditableProblem";
function Quiz() { function Quiz() {
const { quizId } = useParams(); const { quizId } = useParams();
...@@ -52,7 +53,8 @@ function Quiz() { ...@@ -52,7 +53,8 @@ function Quiz() {
<div> <div>
<h2>제목: {quiz.title}</h2> <h2>제목: {quiz.title}</h2>
{quiz.problems?.map((problem, i) => { {quiz.problems?.map((problem, i) => {
return <Problem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />; // return <Problem 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}`}> <Link to={`/quiz/problem/new/${quizId}`}>
<Button>문제 추가</Button> <Button>문제 추가</Button>
......
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