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
survey
Commits
667e4ac8
Commit
667e4ac8
authored
Jul 20, 2022
by
Jiwon Yoon
Browse files
answer handleChange
parent
a1172af8
Changes
8
Hide whitespace changes
Inline
Side-by-side
frontend/src/SurveyRouter.tsx
View file @
667e4ac8
...
...
@@ -21,7 +21,7 @@ export const SurveyRouter = () => {
<
Route
path
=
":surveyId"
element
=
{
<
EditSurvey
/>
}
/>
<
Route
path
=
":surveyId/response"
element
/>
</
Route
>
<
Route
path
=
"survey"
element
=
{
<
SurveyForm
/>
}
/>
<
Route
path
=
"survey
/:surveyId
"
element
=
{
<
SurveyForm
/>
}
/>
<
Route
path
=
"profile"
element
=
{
...
...
frontend/src/commons/ACheckbox.tsx
View file @
667e4ac8
import
React
,
{
use
Effect
}
from
"
react
"
;
import
{
CheckboxType
}
from
"
../types
"
;
import
React
,
{
use
State
}
from
"
react
"
;
import
{
CheckboxType
,
AnswerType
}
from
"
../types
"
;
type
Props
=
{
element
:
CheckboxType
;
response
:
AnswerType
;
handleAnswer
:
()
=>
void
;
};
export
const
ACheckboxForm
=
({
element
}:
Props
)
=>
{
export
const
ACheckboxForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
const
[
answer
,
setAnswer
]
=
useState
(
""
);
const
handleChange
=
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
{
value
}
=
event
.
currentTarget
;
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
value
;
}
});
setAnswer
(
value
);
handleAnswer
();
};
return
(
<
div
className
=
"flex w-full gap-4 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
input
className
=
"mr-2"
type
=
"checkbox"
/>
<
input
className
=
"mr-2"
type
=
"checkbox"
value
=
{
choice
.
text
}
onChange
=
{
handleChange
}
/>
<
label
className
=
"text-lg"
>
{
choice
.
text
}
</
label
>
</
div
>
))
}
...
...
frontend/src/commons/ADropdown.tsx
View file @
667e4ac8
import
React
,
{
useState
}
from
"
react
"
;
import
{
DropdownType
}
from
"
../types
"
;
import
{
DropdownType
,
AnswerType
}
from
"
../types
"
;
type
Props
=
{
element
:
DropdownType
;
response
:
AnswerType
;
handleAnswer
:
()
=>
void
;
};
export
const
ADropdownForm
=
({
element
}:
Props
)
=>
{
export
const
ADropdownForm
=
({
element
,
handleAnswer
,
response
}:
Props
)
=>
{
const
[
answer
,
setAnswer
]
=
useState
(
""
);
const
handleChange
=
(
event
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
=>
{
const
{
value
}
=
event
.
currentTarget
;
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
value
;
}
});
setAnswer
(
value
);
handleAnswer
();
};
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto items-center m-3 py-3"
>
<
select
className
=
"py-2 hover:bg-themeColor bg-gray-200 rounded "
>
<
select
className
=
"py-2 hover:bg-themeColor bg-gray-200 rounded"
onChange
=
{
handleChange
}
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
option
>
{
choice
.
text
}
</
option
>
<
option
value
=
{
choice
.
text
}
>
{
choice
.
text
}
</
option
>
))
}
</
select
>
</
div
>
...
...
frontend/src/commons/AEssayForm.tsx
View file @
667e4ac8
import
React
from
"
react
"
;
import
{
EssayType
}
from
"
../types
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
,
AnswerType
}
from
"
../types
"
;
type
Props
=
{
element
:
EssayType
;
response
:
AnswerType
;
handleAnswer
:
()
=>
void
;
};
export
const
AEssayForm
=
({
element
}:
Props
)
=>
{
export
const
AEssayForm
=
({
element
,
handleAnswer
,
response
}:
Props
)
=>
{
const
[
answer
,
setAnswer
]
=
useState
(
""
);
const
handleChange
=
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
{
value
}
=
event
.
currentTarget
;
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
value
;
}
});
setAnswer
(
value
);
handleAnswer
();
};
return
(
<
div
className
=
"flex mt-4 w-full justify-center"
>
<
input
className
=
"border w-11/12 h-36 my-3"
></
input
>
<
div
className
=
"flex mt-3 w-full justify-center"
>
<
input
type
=
"text"
className
=
"border w-11/12 h-36 my-3"
id
=
{
element
.
_id
}
onChange
=
{
handleChange
}
value
=
{
answer
}
></
input
>
</
div
>
);
};
frontend/src/commons/AQuestion.tsx
View file @
667e4ac8
import
React
,
{
useState
}
from
"
react
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
import
{
BasicQuestionType
,
SurveyType
}
from
"
../types
"
;
import
{
BasicQuestionType
,
AnswerType
,
SurveyType
}
from
"
../types
"
;
import
{
ACheckboxForm
}
from
"
./ACheckbox
"
;
import
{
ADropdownForm
}
from
"
./ADropdown
"
;
import
{
AEssayForm
}
from
"
./AEssayForm
"
;
import
{
ARadioForm
}
from
"
./ARadioForm
"
;
type
Props
Type
=
{
type
Props
=
{
question
:
BasicQuestionType
;
response
:
AnswerType
;
handleAnswer
:
()
=>
void
;
};
export
const
AQuestion
=
({
question
}:
Props
Type
)
=>
{
export
const
AQuestion
=
({
question
,
handleAnswer
,
response
}:
Props
)
=>
{
function
getContent
(
question
:
BasicQuestionType
)
{
switch
(
question
.
type
)
{
case
"
essay
"
:
return
<
AEssayForm
element
=
{
question
}
/>;
return
(
<
AEssayForm
element
=
{
question
}
response
=
{
response
}
handleAnswer
=
{
handleAnswer
}
/>
);
case
"
radio
"
:
return
<
ARadioForm
element
=
{
question
}
/>;
return
(
<
ARadioForm
element
=
{
question
}
response
=
{
response
}
handleAnswer
=
{
handleAnswer
}
/>
);
case
"
checkbox
"
:
return
<
ACheckboxForm
element
=
{
question
}
/>;
return
(
<
ACheckboxForm
element
=
{
question
}
response
=
{
response
}
handleAnswer
=
{
handleAnswer
}
/>
);
case
"
dropdown
"
:
return
<
ADropdownForm
element
=
{
question
}
/>;
return
(
<
ADropdownForm
element
=
{
question
}
response
=
{
response
}
handleAnswer
=
{
handleAnswer
}
/>
);
// case "file":
// return <AFileForm element={element} currentId={currentId} />;
// case "rating":
...
...
@@ -36,11 +62,11 @@ export const AQuestion = ({ question }: PropsType) => {
}
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-
3
"
>
<
div
className
=
"flex flexgi-row
h
-1
6
w-
full
place-content-between items-center"
>
<
div
className
=
"text-xl font-bold
ml-6 w-1/2"
>
질문
</
div
>
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-
4
"
>
<
div
className
=
"flex flexgi-row
my
-1 w-
11/12
place-content-between items-center"
>
<
div
className
=
"text-xl font-bold
"
>
{
question
.
title
}
</
div
>
</
div
>
<
div
className
=
"
border
w-11/12
my-3"
>
내용
</
div
>
<
div
className
=
"w-11/12
text-slate-500"
>
{
question
.
comment
}
</
div
>
{
getContent
(
question
)
}
</
div
>
);
...
...
frontend/src/commons/ARadioForm.tsx
View file @
667e4ac8
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
../types
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
RadioType
,
AnswerType
}
from
"
../types
"
;
type
Props
=
{
element
:
RadioType
;
response
:
AnswerType
;
handleAnswer
:
()
=>
void
;
};
export
const
ARadioForm
=
({
element
}:
Props
)
=>
{
export
const
ARadioForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
const
[
answer
,
setAnswer
]
=
useState
(
""
);
const
handleChange
=
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
{
value
}
=
event
.
currentTarget
;
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
value
;
}
});
setAnswer
(
value
);
handleAnswer
();
};
return
(
<
div
className
=
"flex w-full gap-4 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
input
className
=
"mr-2"
type
=
"radio"
></
input
>
<
label
className
=
"text-lg"
>
{
choice
.
value
}
</
label
>
<
input
className
=
"mr-2"
type
=
"radio"
id
=
{
choice
.
text
}
name
=
{
element
.
_id
}
onChange
=
{
handleChange
}
value
=
{
choice
.
text
}
></
input
>
<
label
className
=
"text-lg"
id
=
{
choice
.
text
}
>
{
choice
.
text
}
</
label
>
</
div
>
))
}
</
div
>
...
...
frontend/src/commons/SurveyForm.tsx
View file @
667e4ac8
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
React
,
{
FormEvent
,
useEffect
,
useState
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
surveyApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
SurveyType
}
from
"
../types
"
;
import
{
AnswerType
,
SurveyType
}
from
"
../types
"
;
import
{
AQuestion
}
from
"
./AQuestion
"
;
import
{
ARadioForm
}
from
"
./ARadioForm
"
;
...
...
@@ -18,6 +18,11 @@ export const SurveyForm = () => {
comment
:
""
,
questions
:
[],
});
const
[
response
,
setResponse
]
=
useState
<
AnswerType
>
({
surveyId
:
surveyId
,
guestId
:
""
,
answers
:
[{
questionId
:
""
,
answer
:
""
}],
});
useEffect
(()
=>
{
ansSurvey
();
...
...
@@ -28,6 +33,15 @@ export const SurveyForm = () => {
if
(
surveyId
)
{
const
answersurvey
:
SurveyType
=
await
surveyApi
.
ansSurvey
(
surveyId
);
console
.
log
(
answersurvey
);
const
questionIds
=
answersurvey
.
questions
.
map
((
el
)
=>
{
return
{
questionId
:
el
.
_id
,
answer
:
""
};
});
console
.
log
(
questionIds
);
setResponse
({
...
response
,
surveyId
:
answersurvey
.
_id
,
answers
:
questionIds
,
});
setSurvey
(
answersurvey
);
setSuccess
(
true
);
setError
(
""
);
...
...
@@ -41,20 +55,45 @@ export const SurveyForm = () => {
}
}
function
handleSubmit
(
event
:
FormEvent
)
{
event
.
preventDefault
();
}
const
handleAnswer
=
()
=>
{
const
newList
=
[...
response
.
answers
];
setResponse
({
...
response
,
answers
:
newList
});
};
return
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
<
p
className
=
"font-bold text-4xl text-center m-2"
>
{
survey
.
title
}
</
p
>
<
p
className
=
"font-bold text-1xl text-center m-2"
>
{
survey
.
comment
}
</
p
>
{
survey
.
questions
.
map
((
question
)
=>
{
return
<
AQuestion
question
=
{
question
}
></
AQuestion
>;
})
}
<
div
>
<
button
className
=
"rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
>
제출하기
</
button
>
<>
{
console
.
log
(
response
)
}
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
<
p
className
=
"font-bold text-4xl text-center m-2"
>
{
survey
.
title
}
</
p
>
<
p
className
=
"font-bold text-1xl text-center m-2"
>
{
survey
.
comment
}
</
p
>
{
survey
.
questions
.
map
((
question
)
=>
{
return
(
<
AQuestion
question
=
{
question
}
response
=
{
response
}
handleAnswer
=
{
handleAnswer
}
></
AQuestion
>
);
})
}
<
div
>
<
button
type
=
"submit"
className
=
"rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
>
제출하기
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
form
>
</>
);
};
frontend/src/types/index.ts
View file @
667e4ac8
...
...
@@ -80,3 +80,9 @@ export interface RatingType extends BasicQuestionType {
maxRateDescription
:
string
;
};
}
export
interface
AnswerType
{
surveyId
?:
string
;
guestId
:
string
;
answers
:
{
questionId
:
string
;
answer
:
any
}[];
}
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