Skip to content

GitLab

Commit 6fb8d9e5 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'answers' into jiwon0718

parents 48e9f032 1865b708
Show whitespace changes
Inline Side-by-side
frontend/src/SurveyRouter.tsx
View file @ 6fb8d9e5
......@@ -21,7 +21,7 @@ export const SurveyRouter = () => {
<Route path=":surveyId" element={<EditSurvey />} />
<Route path=":surveyId/response" element />
</Route>
<Route path="survey/:surveyId" element={<SurveyForm />} />
<Route path="surveys/:surveyId" element={<SurveyForm />} />
<Route
path="profile"
element={
......
frontend/src/commons/ACheckboxForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { CheckboxType, AnswerType } from "../types";
import { CheckboxType, AnswersType } from "../types";
type Props = {
element: CheckboxType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = value);
setAnswer(value);
handleAnswer();
};
......
frontend/src/commons/ADateForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { DateType, AnswerType } from "../types";
import { DateType, AnswersType } from "../types";
type Props = {
element: DateType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = value);
setAnswer(value);
handleAnswer();
};
......
frontend/src/commons/ADropdownForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { DropdownType, AnswerType } from "../types";
import { DropdownType, AnswersType } from "../types";
type Props = {
element: DropdownType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = value);
setAnswer(value);
handleAnswer();
};
......
frontend/src/commons/AEssayForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { EssayType, AnswerType } from "../types";
import { EssayType, AnswersType } from "../types";
type Props = {
element: EssayType;
response: AnswerType;
answers: AnswersType | undefined;
handleAnswer: () => void;
};
export const AEssayForm = ({ element, handleAnswer, response }: Props) => {
export const AEssayForm = ({ element, handleAnswer, 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 && (answers.answer = value);
setAnswer(value);
handleAnswer();
};
......
frontend/src/commons/AFileForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { FileType, AnswerType } from "../types";
import { FileType, AnswersType } from "../types";
type Props = {
element: FileType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = uploadFile.name);
handleAnswer();
}
};
......
frontend/src/commons/AQuestion.tsx
View file @ 6fb8d9e5
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;
answer: AnswersType | undefined;
handleAnswer: () => void;
addFiles: (oneFile: { questionId: string; file: File }) => void;
};
export const AQuestion = ({
question,
handleAnswer,
response,
answer,
addFiles,
}: Props) => {
function getContent(question: BasicQuestionType) {
......@@ -27,7 +26,7 @@ export const AQuestion = ({
return (
<AEssayForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......@@ -35,7 +34,7 @@ export const AQuestion = ({
return (
<ARadioForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......@@ -43,7 +42,7 @@ export const AQuestion = ({
return (
<ACheckboxForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......@@ -51,7 +50,7 @@ export const AQuestion = ({
return (
<ADropdownForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......@@ -59,7 +58,7 @@ export const AQuestion = ({
return (
<AFileForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
addFiles={addFiles}
/>
......@@ -68,7 +67,7 @@ export const AQuestion = ({
return (
<ARatingForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......@@ -76,7 +75,7 @@ export const AQuestion = ({
return (
<ADateForm
element={question}
response={response}
answers={answer}
handleAnswer={handleAnswer}
/>
);
......
frontend/src/commons/ARadioForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { RadioType, AnswerType } from "../types";
import { RadioType, AnswersType } from "../types";
type Props = {
element: RadioType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = value);
setAnswer(value);
handleAnswer();
};
......
frontend/src/commons/ARatingForm.tsx
View file @ 6fb8d9e5
import React, { useState } from "react";
import { RatingType, AnswerType } from "../types";
import { RatingType, AnswersType } from "../types";
type Props = {
element: RatingType;
response: AnswerType;
answers: AnswersType | undefined;
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 && (answers.answer = name);
setAnswer(name);
setSelectedchoice(event.currentTarget.name);
handleAnswer();
......
frontend/src/commons/SurveyForm.tsx
View file @ 6fb8d9e5
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,36 +18,38 @@ export const SurveyForm = () => {
comment: "",
questions: [],
});
const [answer, setResponse] = useState<AnswerType>({
const answer = useRef<AnswerType>({
surveyId: "surveyId",
guestId: "",
answers: [{ questionId: "", answer: "" }],
answers: [],
});
useEffect(() => {
ansSurvey();
}, [surveyId]);
const addFiles = (oneFile: { questionId: string; file: File }) => {
if (!files.find((a) => a.questionId === oneFile.questionId)) {
setFiles([...files, oneFile]);
}
};
async function ansSurvey() {
try {
if (surveyId) {
const answersurvey: any = await surveyApi.ansSurvey(surveyId);
console.log(answersurvey);
const questionIds = answersurvey.questions.map((el: any) => {
return { questionId: el._id, answer: "" };
return { questionId: el._id, type: el.type, answer: "" };
});
console.log(questionIds);
if (answersurvey) {
setResponse({
...answer,
surveyId: answersurvey._id,
answers: questionIds,
});
// setResponse({
// ...answer,
// surveyId: answersurvey._id,
// answers: questionIds,
// });
answer.current.surveyId = answersurvey._id;
answer.current.guestId = answersurvey.guestId;
answer.current.answers = questionIds;
setSurvey(answersurvey);
setSuccess(true);
setError("");
......@@ -62,13 +64,17 @@ export const SurveyForm = () => {
}
}
useEffect(() => {
ansSurvey();
}, [surveyId]);
async function handleSubmit(event: FormEvent) {
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("uploadFiles", f.file);
});
......@@ -84,13 +90,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 +109,9 @@ export const SurveyForm = () => {
return (
<AQuestion
question={question}
response={answer}
answer={answer.current.answers.find(
(ans) => ans.questionId === question._id
)}
addFiles={addFiles}
handleAnswer={handleAnswer}
></AQuestion>
......
frontend/src/types/index.ts
View file @ 6fb8d9e5
......@@ -82,8 +82,14 @@ export interface RatingType extends BasicQuestionType {
};
}
export interface AnswersType {
questionId: string;
type: string;
answer: any;
}
export interface AnswerType {
surveyId: 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