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
fb053bba
Commit
fb053bba
authored
Jul 22, 2022
by
Yoon, Daeki
😅
Browse files
answer 로직을 상태에서 useRef로 변경
parent
04c43cdc
Changes
10
Hide whitespace changes
Inline
Side-by-side
frontend/src/commons/ACheckboxForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
CheckboxType
,
AnswerType
}
from
"
../types
"
;
import
{
CheckboxType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
CheckboxType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
ACheckboxForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
export
const
ACheckboxForm
=
({
element
,
answers
,
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
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = value;
// }
// });
answers
[
element
.
_id
]
=
value
;
setAnswer
(
value
);
handleAnswer
();
};
...
...
frontend/src/commons/ADateForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
DateType
,
AnswerType
}
from
"
../types
"
;
import
{
DateType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
DateType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
ADateForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
export
const
ADateForm
=
({
element
,
answers
,
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
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = value;
// }
// });
answers
[
element
.
_id
]
=
value
;
setAnswer
(
value
);
handleAnswer
();
};
...
...
frontend/src/commons/ADropdownForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
DropdownType
,
AnswerType
}
from
"
../types
"
;
import
{
DropdownType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
DropdownType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
ADropdownForm
=
({
element
,
handleAnswer
,
response
}:
Props
)
=>
{
export
const
ADropdownForm
=
({
element
,
handleAnswer
,
answers
}:
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
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = value;
// }
// });
answers
[
element
.
_id
]
=
value
;
setAnswer
(
value
);
handleAnswer
();
};
...
...
frontend/src/commons/AEssayForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
,
AnswerType
}
from
"
../types
"
;
import
{
EssayType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
EssayType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
AEssayForm
=
({
element
,
handleAnswer
,
response
}:
Props
)
=>
{
export
const
AEssayForm
=
({
element
,
handleAnswer
,
answers
:
answers
,
}:
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
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = value;
// }
// });
answers
[
element
.
_id
]
=
value
;
setAnswer
(
value
);
handleAnswer
();
};
...
...
frontend/src/commons/AFileForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
,
AnswerType
}
from
"
../types
"
;
import
{
FileType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
FileType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
addFiles
:
(
oneFile
:
{
questionId
:
string
;
file
:
File
})
=>
void
;
};
export
const
AFileForm
=
({
element
,
response
,
answers
,
handleAnswer
,
addFiles
,
}:
Props
)
=>
{
...
...
@@ -18,11 +18,12 @@ export const AFileForm = ({
if
(
event
.
currentTarget
.
files
)
{
const
uploadFile
=
event
.
currentTarget
.
files
[
0
];
addFiles
({
questionId
:
element
.
_id
,
file
:
uploadFile
});
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
uploadFile
.
name
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = uploadFile.name;
// }
// });
answers
[
element
.
_id
]
=
uploadFile
.
name
;
handleAnswer
();
}
};
...
...
frontend/src/commons/AQuestion.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
import
{
BasicQuestionType
,
AnswerType
,
SurveyType
}
from
"
../types
"
;
import
React
from
"
react
"
;
import
{
BasicQuestionType
,
AnswersType
}
from
"
../types
"
;
import
{
ACheckboxForm
}
from
"
./ACheckboxForm
"
;
import
{
ADateForm
}
from
"
./ADateForm
"
;
import
{
ADropdownForm
}
from
"
./ADropdownForm
"
;
...
...
@@ -11,14 +10,14 @@ import { ARatingForm } from "./ARatingForm";
type
Props
=
{
question
:
BasicQuestionType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
addFiles
:
(
oneFile
:
{
questionId
:
string
;
file
:
File
})
=>
void
;
};
export
const
AQuestion
=
({
question
,
handleAnswer
,
response
,
answers
:
answers
,
addFiles
,
}:
Props
)
=>
{
function
getContent
(
question
:
BasicQuestionType
)
{
...
...
@@ -27,7 +26,7 @@ export const AQuestion = ({
return
(
<
AEssayForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
@@ -35,7 +34,7 @@ export const AQuestion = ({
return
(
<
ARadioForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
@@ -43,7 +42,7 @@ export const AQuestion = ({
return
(
<
ACheckboxForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
@@ -51,7 +50,7 @@ export const AQuestion = ({
return
(
<
ADropdownForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
@@ -59,7 +58,7 @@ export const AQuestion = ({
return
(
<
AFileForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
addFiles
=
{
addFiles
}
/>
...
...
@@ -68,7 +67,7 @@ export const AQuestion = ({
return
(
<
ARatingForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
@@ -76,7 +75,7 @@ export const AQuestion = ({
return
(
<
ADateForm
element
=
{
question
}
response
=
{
response
}
answers
=
{
answers
}
handleAnswer
=
{
handleAnswer
}
/>
);
...
...
frontend/src/commons/ARadioForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
RadioType
,
AnswerType
}
from
"
../types
"
;
import
{
RadioType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
RadioType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
ARadioForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
export
const
ARadioForm
=
({
element
,
answers
,
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
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = value;
// }
// });
answers
[
element
.
_id
]
=
value
;
setAnswer
(
value
);
handleAnswer
();
};
...
...
frontend/src/commons/ARatingForm.tsx
View file @
fb053bba
import
React
,
{
useState
}
from
"
react
"
;
import
{
RatingType
,
AnswerType
}
from
"
../types
"
;
import
{
RatingType
,
Answer
s
Type
}
from
"
../types
"
;
type
Props
=
{
element
:
RatingType
;
response
:
AnswerType
;
answers
:
Answer
s
Type
;
handleAnswer
:
()
=>
void
;
};
export
const
ARatingForm
=
({
element
,
response
,
handleAnswer
}:
Props
)
=>
{
export
const
ARatingForm
=
({
element
,
answers
,
handleAnswer
}:
Props
)
=>
{
const
[
selectedchoice
,
setSelectedchoice
]
=
useState
(
""
);
const
[
answer
,
setAnswer
]
=
useState
(
""
);
function
buttonClick
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
{
event
.
preventDefault
();
const
{
name
}
=
event
.
currentTarget
;
response
.
answers
.
map
((
a
)
=>
{
if
(
a
.
questionId
===
element
.
_id
)
{
a
.
answer
=
name
;
}
});
// response.answers.map((a) => {
// if (a.questionId === element._id) {
// a.answer = name;
// }
// });
answers
[
element
.
_id
]
=
name
;
setAnswer
(
name
);
setSelectedchoice
(
event
.
currentTarget
.
name
);
handleAnswer
();
...
...
frontend/src/commons/SurveyForm.tsx
View file @
fb053bba
import
React
,
{
FormEvent
,
useEffect
,
useState
}
from
"
react
"
;
import
React
,
{
FormEvent
,
useEffect
,
useRef
,
useState
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
surveyApi
,
answerApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
...
...
@@ -18,10 +18,11 @@ export const SurveyForm = () => {
comment
:
""
,
questions
:
[],
});
const
[
answer
,
setResponse
]
=
useState
<
AnswerType
>
({
const
answer
=
useRef
<
AnswerType
>
({
surveyId
:
"
surveyId
"
,
guestId
:
""
,
answers
:
[{
questionId
:
""
,
answer
:
""
}]
,
answers
:
{}
,
});
useEffect
(()
=>
{
...
...
@@ -43,11 +44,11 @@ export const SurveyForm = () => {
});
console
.
log
(
questionIds
);
if
(
answersurvey
)
{
setResponse
({
...
answer
,
surveyId
:
answersurvey
.
_id
,
answers
:
questionIds
,
});
//
setResponse({
//
...answer,
//
surveyId: answersurvey._id,
//
answers: questionIds,
//
});
setSurvey
(
answersurvey
);
setSuccess
(
true
);
setError
(
""
);
...
...
@@ -66,9 +67,9 @@ export const SurveyForm = () => {
event
.
preventDefault
();
try
{
const
formData
=
new
FormData
();
formData
.
append
(
"
surveyId
"
,
answer
.
surveyId
);
formData
.
append
(
"
surveyId
"
,
answer
.
current
.
surveyId
);
formData
.
append
(
"
guestId
"
,
""
);
formData
.
append
(
"
answers
"
,
JSON
.
stringify
(
answer
.
answers
));
formData
.
append
(
"
answers
"
,
JSON
.
stringify
(
answer
.
current
.
answers
));
files
.
map
((
f
)
=>
{
formData
.
append
(
"
files
"
,
f
.
file
);
});
...
...
@@ -84,13 +85,14 @@ export const SurveyForm = () => {
}
const
handleAnswer
=
()
=>
{
const
newList
=
[...
answer
.
answers
];
setResponse
({
...
answer
,
answers
:
newList
});
console
.
log
(
"
handle answer:
"
,
answer
.
current
);
// const newList = [...answer.answers];
// setResponse({ ...answer, answers: newList });
};
return
(
<>
{
console
.
log
(
answer
)
}
{
console
.
log
(
"
rendering survey form
"
,
answer
.
current
)
}
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
...
...
@@ -102,7 +104,7 @@ export const SurveyForm = () => {
return
(
<
AQuestion
question
=
{
question
}
response
=
{
answer
}
answers
=
{
answer
.
current
.
answer
s
}
addFiles
=
{
addFiles
}
handleAnswer
=
{
handleAnswer
}
></
AQuestion
>
...
...
frontend/src/types/index.ts
View file @
fb053bba
...
...
@@ -82,8 +82,12 @@ export interface RatingType extends BasicQuestionType {
};
}
export
interface
AnswersType
{
[
questionId
:
string
]:
any
;
}
export
interface
AnswerType
{
surveyId
:
string
;
guestId
:
string
;
answers
:
{
questionId
:
string
;
answer
:
any
}[]
;
answers
:
AnswersType
;
}
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