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

answer handleChange

parent a1172af8
......@@ -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={
......
import React, { useEffect } from "react";
import { CheckboxType } from "../types";
import React, { useState } 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>
))}
......
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>
......
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>
);
};
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 PropsType = {
type Props = {
question: BasicQuestionType;
response: AnswerType;
handleAnswer: () => void;
};
export const AQuestion = ({ question }: PropsType) => {
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-16 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>
);
......
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>
......
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>
</>
);
};
......@@ -80,3 +80,9 @@ export interface RatingType extends BasicQuestionType {
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