AnswerSurvey.tsx 4.05 KB
Newer Older
Yoon, Daeki's avatar
Yoon, Daeki committed
1
import React, { FormEvent, useEffect, useState } from "react";
Yoon, Daeki's avatar
Yoon, Daeki committed
2
import { useParams } from "react-router-dom";
Yoon, Daeki's avatar
Yoon, Daeki committed
3
import { answerApi, surveyApi } from "../apis";
Yoon, Daeki's avatar
Yoon, Daeki committed
4
5
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
Yoon, Daeki's avatar
Yoon, Daeki committed
6
7
import { IAnswer, ISurvey } from "../types";
import { AQuestion } from "./AQuestion";
Yoon, Daeki's avatar
Yoon, Daeki committed
8
9
10
11
12

export const AnswerSurvey = () => {
  let { surveyId } = useParams<{ surveyId: string }>();

  const [survey, setSurvey] = useState<ISurvey>();
Yoon, Daeki's avatar
Yoon, Daeki committed
13
  const [answers, setAnswers] = useState<IAnswer[]>([]);
Yoon, Daeki's avatar
Yoon, Daeki committed
14
15
16
17
18
19
  const [error, setError] = useState("");

  useEffect(() => {
    surveyId && getSurvey(surveyId);
  }, [surveyId]);

Yoon, Daeki's avatar
Yoon, Daeki committed
20
21
22
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    console.log("answers:", answers);
Jiwon Yoon's avatar
Jiwon Yoon committed
23
24
25
    const needAnswer = answers.some(
      (answer) => answer.question.isRequired && !answer.requiredCheck
    );
Yoon, Daeki's avatar
Yoon, Daeki committed
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    if (needAnswer) {
      alert("필수질문에 응답하셔야 합니다.");
      return;
    }
    if (!survey) {
      return;
    }
    try {
      const fileAnswers = answers.filter(
        (answer) => answer.question.type === "file"
      );
      const otherAnswers = answers.filter(
        (answer) => answer.question.type !== "file"
      );

      console.log("file answers:", fileAnswers);
      console.log("other answers:", otherAnswers);

      const forms = fileAnswers.map((answer) => {
        const formData = new FormData();
        formData.append("surveyId", survey._id!);
        formData.append("questionId", answer.question._id!);
        formData.append("guestId", "guest");

        const files: FileList = answer.content;
Jiwon Yoon's avatar
Jiwon Yoon committed
51
52
53
54
55
        files &&
          [...files].map((f) => {
            console.log("파일 없음", f);
            formData.append("uploadFiles", f);
          });
Yoon, Daeki's avatar
Yoon, Daeki committed
56
57
        return formData;
      });
Jiwon Yoon's avatar
Jiwon Yoon committed
58
      console.log("forms", forms);
Yoon, Daeki's avatar
Yoon, Daeki committed
59
60
61
62
63
      setError("");
      const results = await answerApi.save(
        otherAnswers.map((answer) => ({
          questionId: answer.question._id!,
          surveyId: survey._id!,
Yoon, Daeki's avatar
Yoon, Daeki committed
64
          guestId: "guest",
Yoon, Daeki's avatar
Yoon, Daeki committed
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
          content: answer.content,
        }))
      );
      console.log("results:", results);

      const result = await Promise.all(
        forms.map(async (form) => await answerApi.saveForm(form))
      );

      console.log("result:", result);
    } catch (error) {
      catchErrors(error, setError);
    } finally {
      // setLoading(false);
    }
  };
Yoon, Daeki's avatar
Yoon, Daeki committed
81
82
83
84

  async function getSurvey(surveyId: string) {
    try {
      setError("");
Yoon, Daeki's avatar
Yoon, Daeki committed
85
      const survey: ISurvey = await surveyApi.getSurveyById(surveyId);
Yoon, Daeki's avatar
Yoon, Daeki committed
86
      console.log("survey가져옴ㅎㅎ", survey);
Yoon, Daeki's avatar
Yoon, Daeki committed
87
88
89
90
91
92
93
94
      const answers = survey.questions.map((question) => {
        return {
          surveyId: survey._id!,
          question: question,
          requiredCheck: false,
          content: null,
        };
      });
Yoon, Daeki's avatar
Yoon, Daeki committed
95
      setSurvey(survey);
Yoon, Daeki's avatar
Yoon, Daeki committed
96
      setAnswers(answers);
Yoon, Daeki's avatar
Yoon, Daeki committed
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
      // setSuccess(true);
    } catch (error) {
      catchErrors(error, setError);
    } finally {
      // setLoading(false);
    }
  }

  if (!survey) {
    return (
      <div className="flex justify-center mt-5">
        <SpinnerIcon className="animate-spin h-10 w-10 mr-1 bg-white text-slate-500" />
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="flex flex-col place-items-center">
        <div className="flex flex-col container place-items-center mt-4">
Jiwon Yoon's avatar
Jiwon Yoon committed
117
118
119
120
121
122
          <p className="font-bold md:text-4xl text-2xl text-center m-2">
            {survey.title}
          </p>
          <p className="font-bold md:text-1xl text-center m-2">
            {survey.comment}
          </p>
Yoon, Daeki's avatar
Yoon, Daeki committed
123
          {answers.map((answer) => {
Yoon, Daeki's avatar
Yoon, Daeki committed
124
125
            return (
              <AQuestion
Yoon, Daeki's avatar
Yoon, Daeki committed
126
127
128
129
                key={answer.question._id}
                question={answer.question}
                answer={answer}
              />
Yoon, Daeki's avatar
Yoon, Daeki committed
130
            );
Yoon, Daeki's avatar
Yoon, Daeki committed
131
          })}
Yoon, Daeki's avatar
Yoon, Daeki committed
132
133
134
135
136
137
138
139
140
141
142
143
144
          <div>
            <button
              type="submit"
              className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
            >
              제출하기
            </button>
          </div>
        </div>
      </div>
    </form>
  );
};