Commit 667e4ac8 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

answer handleChange

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