EditSurvey.tsx 2.88 KB
Newer Older
1
import React, { ChangeEvent, useState } from "react";
2
import { Navigate, useLocation, useParams } from "react-router-dom";
Yoon, Daeki's avatar
Yoon, Daeki committed
3
import { surveyApi } from "../apis";
4
import type { CreateQuestionData, IQuestionData, ISurvey } from "../types";
Yoon, Daeki's avatar
Yoon, Daeki committed
5
import { ModifySurvey } from "./ModifySurvey";
6
import { useSurvey } from "../layouts/SurveyLayout";
7
8
import { SpinnerIcon } from "../icons";
import { ModifySurveyView } from "./ModifySurveyView";
Yoon, Daeki's avatar
Yoon, Daeki committed
9
10

export const EditSurvey = () => {
Yoon, Daeki's avatar
Yoon, Daeki committed
11
12
  const { survey, createQuestion, removeQuestion, update, updateQuestion } =
    useSurvey();
13
14
15
16
17
18
19
  // const [survey, setSurvey] = useState<ISurvey>(surveyData);
  // const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
  //   const questions = survey.questions;
  //   return questions.map((question) => ({ ...question, isEditing: false }));
  // });

  const questions = survey.questions;
Yoon, Daeki's avatar
Yoon, Daeki committed
20

21
  console.log("survey", survey);
22
  console.log("questions", questions);
Yoon, Daeki's avatar
Yoon, Daeki committed
23

24
25
26
27
28
  // const update = async (surveyData: ISurvey) => {
  //   const result = await surveyApi.updateSurvey(surveyData);
  //   return result;
  // };

29
30
31
32
33
34
35
36
37
38
39
  const handleTitle = (title: string) => {
    console.log("title in handle title:", title);
    // survey.title = title
    update({ ...survey, title: title });
  };

  /**
   * 수정된 질문을 입력받아 기존 질문을 대체합니다.
   * @param question 수정할 질문
   * @returns 없음
   */
Yoon, Daeki's avatar
Yoon, Daeki committed
40
41
42
43
44
45
46
47
48
49
50
  // const updateQuestion = (question: CreateQuestionData) => {
  //   const index = questions.findIndex((q) => q._id === question._id);
  //   if (index < 0) {
  //     return;
  //   }
  //   questions[index] = question;
  //   console.log("questions in update question:", questions);
  //   // setQuestions([...questions]);
  //   survey.questions = questions;
  //   update(survey);
  // };
51

Yoon, Daeki's avatar
Yoon, Daeki committed
52
  const addQuestion = async () => {
53
    const question: IQuestionData = {
54
55
56
57
58
59
60
      order: questions.length,
      type: "singletext",
      title: "",
      comment: "",
      isRequired: false,
      content: { choices: [] },
    };
Yoon, Daeki's avatar
Yoon, Daeki committed
61
62
63
64
    // const updatedSurvey = await surveyApi.addQuestion(survey._id!, question);
    await createQuestion(question);
    // console.log("new question:", updatedSurvey);
    // await update(updatedSurvey);
65
66
67
68
    // setQuestions([...questions, question]);
  };

  async function deleteQuestion(id: string) {
Yoon, Daeki's avatar
Yoon, Daeki committed
69
70
    await removeQuestion(id);
    // const delQuestions = questions.filter((question) => question._id !== id);
71
72
73
    // setQuestions(delQuestions);
  }

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

82
83
84
85
86
87
88
89
  return (
    <ModifySurveyView
      questions={questions}
      survey={survey}
      addQuestion={addQuestion}
      deleteQuestion={deleteQuestion}
      handleQuestion={updateQuestion}
      handleTitle={handleTitle}
Yoon, Daeki's avatar
Yoon, Daeki committed
90
      // callApi={update}
91
92
    />
  );
Yoon, Daeki's avatar
Yoon, Daeki committed
93
};