Question.tsx 5.98 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
import React, { useState, Dispatch, SetStateAction } from "react";
2
import { BasicQuestionType, EssayType } 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";
11
12
13

type Props = {
  element: BasicQuestionType;
Jiwon Yoon's avatar
Jiwon Yoon committed
14
15
  handleQuestion: (id: string) => void;
  deleteQuestion: (id: string) => void;
16
17
};

Jiwon Yoon's avatar
Jiwon Yoon committed
18
19
20
21
22
23
24
25
26
27
const typeDropDown = new Map([
  ["essay", "주관식"],
  ["radio", "객관식"],
  ["dropdown", "드롭다운"],
  ["checkbox", "체크박스"],
  ["file", "파일"],
  ["rating", "선형"],
  ["grid", "그리드"],
  ["date", "날짜"],
]);
28

Jiwon Yoon's avatar
Jiwon Yoon committed
29
30
31
32
33
export const Question = ({
  element,
  handleQuestion,
  deleteQuestion,
}: Props) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
34
  const [save, setSave] = useState(true);
Jiwon Yoon's avatar
Jiwon Yoon committed
35
  async function handleEditComplete() {
Jiwon Yoon's avatar
Jiwon Yoon committed
36
37
38
39
40
    try {
      const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
        element
      );
      console.log(newQuestion);
Jiwon Yoon's avatar
Jiwon Yoon committed
41
      setSave(true);
Jiwon Yoon's avatar
Jiwon Yoon committed
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
      // 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);
    if (
      selectedType === "radio" ||
      selectedType === "dropdown" ||
      selectedType === "checkbox"
    ) {
      element.content = {
        choices: [
Jiwon Yoon's avatar
Jiwon Yoon committed
62
63
64
          { text: "", value: 0 },
          { text: "", value: 1 },
          { text: "", value: 2 },
Jiwon Yoon's avatar
Jiwon Yoon committed
65
66
67
68
69
70
        ],
      };
    } else if (selectedType === "essay") {
      element.content = { choices: [] };
    } else if (selectedType === "rating") {
      element.content = {
Jiwon Yoon's avatar
Jiwon Yoon committed
71
72
        minRateDescription: "",
        maxRateDescription: "",
Jiwon Yoon's avatar
Jiwon Yoon committed
73
        choices: [
Jiwon Yoon's avatar
Jiwon Yoon committed
74
75
76
          { text: "", value: 0 },
          { text: "", value: 1 },
          { text: "", value: 2 },
Jiwon Yoon's avatar
Jiwon Yoon committed
77
78
79
80
81
82
83
84
85
86
87
88
        ],
      };
    }
    element.type = selectedType;
    handleQuestion(element._id);
  }

  function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.currentTarget;
    element[name] = value;
    handleQuestion(element._id);
  }
89
90
91
92

  function getContent(element: BasicQuestionType) {
    switch (element.type) {
      case "essay":
Jiwon Yoon's avatar
Jiwon Yoon committed
93
        return <EssayForm element={element} save={save} />;
94
      case "radio":
Jiwon Yoon's avatar
Jiwon Yoon committed
95
96
97
98
        return (
          <RadioForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
99
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
100
101
          />
        );
102
      case "checkbox":
Jiwon Yoon's avatar
Jiwon Yoon committed
103
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
104
105
106
          <CheckboxForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
107
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
108
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
109
        );
110
      case "dropdown":
Jiwon Yoon's avatar
Jiwon Yoon committed
111
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
112
113
114
          <DropdownForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
115
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
116
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
117
        );
118
      case "file":
Jiwon Yoon's avatar
Jiwon Yoon committed
119
        return <FileForm element={element} save={save} />;
120
      case "rating":
Jiwon Yoon's avatar
Jiwon Yoon committed
121
122
123
124
        return (
          <RatingForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
125
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
126
127
          />
        );
Jiwon Yoon's avatar
Jiwon Yoon committed
128
129
      case "date":
        return <DateForm />;
130
131
132
133
      default:
        return <></>;
    }
  }
134
135
136
137
138
139
140
141
142
  const handleRequired = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { checked, value } = event.currentTarget;
    element[value] = checked;
    handleQuestion(element._id);
  };
  const handleDelete = () => {
    deleteQuestion(element._id);
  };
  const handleEditClick = () => {
Jiwon Yoon's avatar
Jiwon Yoon committed
143
    setSave(false);
144
  };
145
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
146
    <div
Jiwon Yoon's avatar
Jiwon Yoon committed
147
      style={{ borderColor: save ? "#58ACFA" : "red" }}
Jiwon Yoon's avatar
Jiwon Yoon committed
148
149
      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2"
    >
150
151
152
153
154
155
      <div className="flex h-16 w-full place-content-between items-center">
        <input
          type="text"
          name="title"
          id={element._id}
          className="text-xl font-bold ml-6 border-b-2 w-1/2"
Jiwon Yoon's avatar
Jiwon Yoon committed
156
157
158
          placeholder={"Question Title"}
          value={element.title}
          onChange={handleQuestionInfo}
Jiwon Yoon's avatar
Jiwon Yoon committed
159
          disabled={save}
160
161
        ></input>
        <select
Jiwon Yoon's avatar
Jiwon Yoon committed
162
          id={element._id}
163
          name="type"
Jiwon Yoon's avatar
Jiwon Yoon committed
164
          onChange={handleSelect}
165
          disabled={save}
166
167
          className="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"
        >
Jiwon Yoon's avatar
Jiwon Yoon committed
168
169
170
171
172
173
174
175
          {Array.from(typeDropDown.entries()).map(([key, value]) => (
            <option
              id={element._id}
              value={key}
              selected={key === element.type}
            >
              {value}
            </option>
176
177
178
179
180
181
182
183
184
185
          ))}
        </select>
      </div>
      <div className="flex w-full justify-center">
        <input
          type="text"
          name="comment"
          id={element._id}
          className="border w-11/12"
          placeholder="질문에 대한 설명을 입력해주세요"
Jiwon Yoon's avatar
Jiwon Yoon committed
186
187
          value={element.comment}
          onChange={handleQuestionInfo}
Jiwon Yoon's avatar
Jiwon Yoon committed
188
          disabled={save}
189
190
191
192
        ></input>
      </div>
      {getContent(element)}

Jiwon Yoon's avatar
Jiwon Yoon committed
193
      <div className="place-self-end py-2">
194
195
196
197
198
        <input
          type="checkbox"
          id="isRequired"
          value="isRequired"
          onChange={handleRequired}
Jiwon Yoon's avatar
Jiwon Yoon committed
199
          disabled={save}
200
201
202
          checked={element.isRequired}
        />
        <label htmlFor="isRequired" className="px-1">
Jiwon Yoon's avatar
Jiwon Yoon committed
203
          필수
204
        </label>
Jiwon Yoon's avatar
Jiwon Yoon committed
205
206
207
        <button type="button" className="px-1" onClick={handleDelete}>
          삭제
        </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
208
        {save ? (
Jiwon Yoon's avatar
Jiwon Yoon committed
209
          <button type="button" className="px-1" onClick={handleEditClick}>
Jiwon Yoon's avatar
Jiwon Yoon committed
210
211
            수정하기
          </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
212
213
214
215
        ) : (
          <button type="button" className="px-1" onClick={handleEditComplete}>
            수정완료
          </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
216
        )}
217
218
219
220
      </div>
    </div>
  );
};