Skip to content

GitLab

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

answer 로직을 상태에서 useRef로 변경

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