Merge branch 'answers' into jiwon0718

frontend/src/SurveyRouter.tsx

@@ -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

 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

 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

 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

 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

 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

-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

 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

 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

-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

@@ -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[];
 }