Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
quiz-competition
Commits
9d96ee41
Commit
9d96ee41
authored
Oct 05, 2020
by
Yoon, Daeki
😅
Browse files
EditableProblem으로 이전
parent
809095fc
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/client/src/quiz/EditableProblem.jsx
View file @
9d96ee41
...
...
@@ -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
(
pro
ps
)
{
function
EditableProblem
(
{
pro
blem
,
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
View file @
9d96ee41
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
>
);
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment