Question.tsx 6.61 KB
Newer Older
Yoon, Daeki's avatar
Yoon, Daeki committed
1
2
import React, { useState } from "react";
import { BasicQuestionType } from "../types";
Jiwon Yoon's avatar
Jiwon Yoon committed
3
import { questionApi } from "../apis";
4
import { EssayForm } from "./EssayForm";
Jiwon Yoon's avatar
Jiwon Yoon committed
5
6
7
8
9
import { CheckboxForm } from "./CheckboxForm";
import { RadioForm } from "./RadioForm";
import { DropdownForm } from "./DropdownForm";
import { FileForm } from "./FileForm";
import { RatingForm } from "./RatingForm";
Jiwon Yoon's avatar
Jiwon Yoon committed
10
import { DateForm } from "./DateForm";
Yoon, Daeki's avatar
Yoon, Daeki committed
11
import { QUESTION_TYPES } from "../commons";
12
13
14

type Props = {
  element: BasicQuestionType;
Yoon, Daeki's avatar
Yoon, Daeki committed
15
  handleQuestion: (element: BasicQuestionType) => void;
Jiwon Yoon's avatar
Jiwon Yoon committed
16
  deleteQuestion: (id: string) => void;
Yoon, Daeki's avatar
Yoon, Daeki committed
17
  // isSave: boolean;
18
19
};

Jiwon Yoon's avatar
Jiwon Yoon committed
20
21
22
23
export const Question = ({
  element,
  handleQuestion,
  deleteQuestion,
Yoon, Daeki's avatar
Yoon, Daeki committed
24
25
26
27
28
}: // isSave,
Props) => {
  const [question, setQuestion] = useState({ ...element });
  const [isSaved, setIsSaved] = useState(false);

Jiwon Yoon's avatar
Jiwon Yoon committed
29
  async function handleEditComplete() {
Jiwon Yoon's avatar
Jiwon Yoon committed
30
    try {
Yoon, Daeki's avatar
Yoon, Daeki committed
31
      console.log(question);
Jiwon Yoon's avatar
Jiwon Yoon committed
32
      const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
33
        question
Jiwon Yoon's avatar
Jiwon Yoon committed
34
      );
Yoon, Daeki's avatar
Yoon, Daeki committed
35
36
37
      // console.log(newQuestion);
      handleQuestion(question);
      setIsSaved(true);
Jiwon Yoon's avatar
Jiwon Yoon committed
38
39
40
41
42
43
44
45
46
47
48
49
50
      // setSuccess(true);
      // setError("");
    } catch (error) {
      console.log("에러발생");
      // catchErrors(error, setError)
    } finally {
      // setLoading(false);
    }
  }

  function handleSelect(event: React.ChangeEvent<HTMLSelectElement>) {
    const selectedType = event.currentTarget.value;
    console.log(selectedType);
Yoon, Daeki's avatar
Yoon, Daeki committed
51
    let content;
Jiwon Yoon's avatar
Jiwon Yoon committed
52
53
54
55
56
    if (
      selectedType === "radio" ||
      selectedType === "dropdown" ||
      selectedType === "checkbox"
    ) {
57
      content = {
Jiwon Yoon's avatar
Jiwon Yoon committed
58
        choices: [{ text: "", value: 0 }],
Jiwon Yoon's avatar
Jiwon Yoon committed
59
60
      };
    } else if (selectedType === "essay") {
Yoon, Daeki's avatar
Yoon, Daeki committed
61
      content = { choices: [] };
Jiwon Yoon's avatar
Jiwon Yoon committed
62
    } else if (selectedType === "rating") {
Yoon, Daeki's avatar
Yoon, Daeki committed
63
      content = {
Jiwon Yoon's avatar
Jiwon Yoon committed
64
65
        minRateDescription: "",
        maxRateDescription: "",
Jiwon Yoon's avatar
Jiwon Yoon committed
66
        choices: [{ text: "", value: 0 }],
Jiwon Yoon's avatar
Jiwon Yoon committed
67
68
      };
    }
Yoon, Daeki's avatar
Yoon, Daeki committed
69
70
71
    // question.type = selectedType;
    setQuestion({ ...question, type: selectedType, content: content });
    // handleQuestion(question._id);
Jiwon Yoon's avatar
Jiwon Yoon committed
72
73
  }

Yoon, Daeki's avatar
Yoon, Daeki committed
74
75
76
77
78
  const handleElement = () => {
    console.log("handle element");
    setQuestion({ ...question });
  };

Jiwon Yoon's avatar
Jiwon Yoon committed
79
80
  function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.currentTarget;
Yoon, Daeki's avatar
Yoon, Daeki committed
81
82
83
    // question[name] = value;
    setQuestion({ ...question, [name]: value });
    // handleQuestion(question._id);
Jiwon Yoon's avatar
Jiwon Yoon committed
84
  }
85
86
87
88

  function getContent(element: BasicQuestionType) {
    switch (element.type) {
      case "essay":
Yoon, Daeki's avatar
Yoon, Daeki committed
89
        return <EssayForm element={element} save={isSaved} />;
90
      case "radio":
Jiwon Yoon's avatar
Jiwon Yoon committed
91
92
        return (
          <RadioForm
Yoon, Daeki's avatar
Yoon, Daeki committed
93
            handleQuestion={handleElement}
Jiwon Yoon's avatar
Jiwon Yoon committed
94
            element={element}
Yoon, Daeki's avatar
Yoon, Daeki committed
95
            save={isSaved}
Jiwon Yoon's avatar
Jiwon Yoon committed
96
97
          />
        );
98
      case "checkbox":
Jiwon Yoon's avatar
Jiwon Yoon committed
99
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
100
          <CheckboxForm
Yoon, Daeki's avatar
Yoon, Daeki committed
101
            handleQuestion={handleElement}
Jiwon Yoon's avatar
Jiwon Yoon committed
102
            element={element}
Yoon, Daeki's avatar
Yoon, Daeki committed
103
            save={isSaved}
Jiwon Yoon's avatar
Jiwon Yoon committed
104
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
105
        );
106
      case "dropdown":
Jiwon Yoon's avatar
Jiwon Yoon committed
107
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
108
          <DropdownForm
Yoon, Daeki's avatar
Yoon, Daeki committed
109
            handleQuestion={handleElement}
Jiwon Yoon's avatar
Jiwon Yoon committed
110
            element={element}
Yoon, Daeki's avatar
Yoon, Daeki committed
111
            save={isSaved}
Jiwon Yoon's avatar
Jiwon Yoon committed
112
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
113
        );
114
      case "file":
Yoon, Daeki's avatar
Yoon, Daeki committed
115
        return <FileForm element={element} save={isSaved} />;
116
      case "rating":
Jiwon Yoon's avatar
Jiwon Yoon committed
117
118
        return (
          <RatingForm
Yoon, Daeki's avatar
Yoon, Daeki committed
119
            handleQuestion={handleElement}
Jiwon Yoon's avatar
Jiwon Yoon committed
120
            element={element}
Yoon, Daeki's avatar
Yoon, Daeki committed
121
            save={isSaved}
Jiwon Yoon's avatar
Jiwon Yoon committed
122
123
          />
        );
Jiwon Yoon's avatar
Jiwon Yoon committed
124
125
      case "date":
        return <DateForm />;
126
127
128
129
      default:
        return <></>;
    }
  }
Yoon, Daeki's avatar
Yoon, Daeki committed
130

131
132
  const handleRequired = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { checked, value } = event.currentTarget;
Yoon, Daeki's avatar
Yoon, Daeki committed
133
134
135
136
137
138
139
140
141
142
    question[value] = checked;
    setQuestion({ ...question, [value]: checked });
    // handleQuestion(question._id);
  };

  const onCancel = () => {
    console.log("element canceled button clicked", element);
    console.log("question canceled button clicked", question);
    setQuestion(element);
    setIsSaved(true);
143
  };
Yoon, Daeki's avatar
Yoon, Daeki committed
144

145
  const handleDelete = () => {
Jiwon Yoon's avatar
Jiwon Yoon committed
146
147
148
149
150
151
    if (window.confirm("질문을 삭제하시겠습니까?")) {
      deleteQuestion(element._id);
      alert("삭제되었습니다.");
    } else {
      alert("질문 삭제를 취소합니다.");
    }
152
  };
Yoon, Daeki's avatar
Yoon, Daeki committed
153

154
  const handleEditClick = () => {
Yoon, Daeki's avatar
Yoon, Daeki committed
155
    setIsSaved(false);
156
  };
Yoon, Daeki's avatar
Yoon, Daeki committed
157

158
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
159
    <div
160
      style={{ borderColor: isSaved ? "#0A8A8A" : "red" }}
161
      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
Jiwon Yoon's avatar
Jiwon Yoon committed
162
    >
163
164
165
166
      <div className="flex h-16 w-full place-content-between items-center">
        <input
          type="text"
          name="title"
Yoon, Daeki's avatar
Yoon, Daeki committed
167
          id={question._id}
168
          className="text-xl font-bold ml-6 border-b-2 w-1/2"
Jiwon Yoon's avatar
Jiwon Yoon committed
169
          placeholder={"Question Title"}
Yoon, Daeki's avatar
Yoon, Daeki committed
170
          value={question.title}
Jiwon Yoon's avatar
Jiwon Yoon committed
171
          onChange={handleQuestionInfo}
Yoon, Daeki's avatar
Yoon, Daeki committed
172
          disabled={isSaved}
173
174
        ></input>
        <select
Yoon, Daeki's avatar
Yoon, Daeki committed
175
          id={question._id}
176
          name="type"
Jiwon Yoon's avatar
Jiwon Yoon committed
177
          onChange={handleSelect}
Yoon, Daeki's avatar
Yoon, Daeki committed
178
179
          disabled={isSaved}
          value={question.type}
jang dong hyeok's avatar
.    
jang dong hyeok committed
180
          className="w-32 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
181
        >
Yoon, Daeki's avatar
Yoon, Daeki committed
182
          {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
183
            <option key={key} id={question._id} value={key}>
Jiwon Yoon's avatar
Jiwon Yoon committed
184
185
              {value}
            </option>
186
187
188
189
190
191
192
          ))}
        </select>
      </div>
      <div className="flex w-full justify-center">
        <input
          type="text"
          name="comment"
Yoon, Daeki's avatar
Yoon, Daeki committed
193
          id={question._id}
194
195
          className="border w-11/12"
          placeholder="질문에 대한 설명을 입력해주세요"
Yoon, Daeki's avatar
Yoon, Daeki committed
196
          value={question.comment}
Jiwon Yoon's avatar
Jiwon Yoon committed
197
          onChange={handleQuestionInfo}
Yoon, Daeki's avatar
Yoon, Daeki committed
198
          disabled={isSaved}
199
200
        ></input>
      </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
201
      {getContent(question)}
202

Jiwon Yoon's avatar
Jiwon Yoon committed
203
      <div className="place-self-end py-2">
204
205
206
207
208
        <input
          type="checkbox"
          id="isRequired"
          value="isRequired"
          onChange={handleRequired}
Yoon, Daeki's avatar
Yoon, Daeki committed
209
210
          disabled={isSaved}
          checked={question.isRequired}
211
212
        />
        <label htmlFor="isRequired" className="px-1">
Jiwon Yoon's avatar
Jiwon Yoon committed
213
          필수
214
        </label>
Yoon, Daeki's avatar
Yoon, Daeki committed
215
216
217
218
219
220
221
222
223
        {isSaved ? (
          <>
            <button type="button" className="px-1" onClick={handleDelete}>
              삭제
            </button>
            <button type="button" className="px-1" onClick={handleEditClick}>
              수정
            </button>
          </>
Jiwon Yoon's avatar
Jiwon Yoon committed
224
        ) : (
Yoon, Daeki's avatar
Yoon, Daeki committed
225
226
227
228
229
230
231
232
233
          <>
            <button type="button" className="px-1" onClick={onCancel}>
              취소
            </button>

            <button type="button" className="px-1" onClick={handleEditComplete}>
              확인
            </button>
          </>
Jiwon Yoon's avatar
Jiwon Yoon committed
234
        )}
235
236
237
238
      </div>
    </div>
  );
};