Question.tsx 5.75 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;
Jiwon Yoon's avatar
Jiwon Yoon committed
15
16
  handleQuestion: (id: string) => void;
  deleteQuestion: (id: string) => void;
Jiwon Yoon's avatar
Jiwon Yoon committed
17
  isSave: boolean;
18
19
};

Jiwon Yoon's avatar
Jiwon Yoon committed
20
21
22
23
export const Question = ({
  element,
  handleQuestion,
  deleteQuestion,
Jiwon Yoon's avatar
Jiwon Yoon committed
24
  isSave,
Jiwon Yoon's avatar
Jiwon Yoon committed
25
}: Props) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
26
  const [save, setSave] = useState(isSave);
Jiwon Yoon's avatar
Jiwon Yoon committed
27
  async function handleEditComplete() {
Jiwon Yoon's avatar
Jiwon Yoon committed
28
29
30
31
32
    try {
      const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
        element
      );
      console.log(newQuestion);
Jiwon Yoon's avatar
Jiwon Yoon committed
33
      setSave(true);
Jiwon Yoon's avatar
Jiwon Yoon committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
      // 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 = {
Lee SeoYeon's avatar
0727    
Lee SeoYeon committed
53
        choices: [{ text: "", value: 0 }],
Jiwon Yoon's avatar
Jiwon Yoon committed
54
55
56
57
58
      };
    } else if (selectedType === "essay") {
      element.content = { choices: [] };
    } else if (selectedType === "rating") {
      element.content = {
Jiwon Yoon's avatar
Jiwon Yoon committed
59
60
        minRateDescription: "",
        maxRateDescription: "",
Jiwon Yoon's avatar
Jiwon Yoon committed
61
        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
71
72
73
74
75
76
        ],
      };
    }
    element.type = selectedType;
    handleQuestion(element._id);
  }

  function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.currentTarget;
    element[name] = value;
    handleQuestion(element._id);
  }
77
78
79
80

  function getContent(element: BasicQuestionType) {
    switch (element.type) {
      case "essay":
Jiwon Yoon's avatar
Jiwon Yoon committed
81
        return <EssayForm element={element} save={save} />;
82
      case "radio":
Jiwon Yoon's avatar
Jiwon Yoon committed
83
84
85
86
        return (
          <RadioForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
87
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
88
89
          />
        );
90
      case "checkbox":
Jiwon Yoon's avatar
Jiwon Yoon committed
91
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
92
93
94
          <CheckboxForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
95
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
96
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
97
        );
98
      case "dropdown":
Jiwon Yoon's avatar
Jiwon Yoon committed
99
        return (
Jiwon Yoon's avatar
Jiwon Yoon committed
100
101
102
          <DropdownForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
103
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
104
          />
Jiwon Yoon's avatar
Jiwon Yoon committed
105
        );
106
      case "file":
Jiwon Yoon's avatar
Jiwon Yoon committed
107
        return <FileForm element={element} save={save} />;
108
      case "rating":
Jiwon Yoon's avatar
Jiwon Yoon committed
109
110
111
112
        return (
          <RatingForm
            handleQuestion={handleQuestion}
            element={element}
Jiwon Yoon's avatar
Jiwon Yoon committed
113
            save={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
114
115
          />
        );
Jiwon Yoon's avatar
Jiwon Yoon committed
116
117
      case "date":
        return <DateForm />;
118
119
120
121
      default:
        return <></>;
    }
  }
122
123
124
125
126
127
128
129
130
  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
131
    setSave(false);
132
  };
133
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
134
    <div
Jiwon Yoon's avatar
Jiwon Yoon committed
135
      style={{ borderColor: save ? "#58ACFA" : "red" }}
Jiwon Yoon's avatar
Jiwon Yoon committed
136
137
      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2"
    >
138
139
140
141
142
143
      <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
144
145
146
          placeholder={"Question Title"}
          value={element.title}
          onChange={handleQuestionInfo}
Jiwon Yoon's avatar
Jiwon Yoon committed
147
          disabled={save}
148
149
        ></input>
        <select
Jiwon Yoon's avatar
Jiwon Yoon committed
150
          id={element._id}
151
          name="type"
Jiwon Yoon's avatar
Jiwon Yoon committed
152
          onChange={handleSelect}
153
          disabled={save}
Yoon, Daeki's avatar
Yoon, Daeki committed
154
          value={element.type}
jang dong hyeok's avatar
.    
jang dong hyeok committed
155
          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"
156
        >
Yoon, Daeki's avatar
Yoon, Daeki committed
157
          {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
Jiwon Yoon's avatar
Jiwon Yoon committed
158
            <option
159
              key={key}
Jiwon Yoon's avatar
Jiwon Yoon committed
160
161
              id={element._id}
              value={key}
Yoon, Daeki's avatar
Yoon, Daeki committed
162
              // selected={key === element.type}
Jiwon Yoon's avatar
Jiwon Yoon committed
163
164
165
            >
              {value}
            </option>
166
167
168
169
170
171
172
173
174
175
          ))}
        </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
176
177
          value={element.comment}
          onChange={handleQuestionInfo}
Jiwon Yoon's avatar
Jiwon Yoon committed
178
          disabled={save}
179
180
181
182
        ></input>
      </div>
      {getContent(element)}

Jiwon Yoon's avatar
Jiwon Yoon committed
183
      <div className="place-self-end py-2">
184
185
186
187
188
        <input
          type="checkbox"
          id="isRequired"
          value="isRequired"
          onChange={handleRequired}
Jiwon Yoon's avatar
Jiwon Yoon committed
189
          disabled={save}
190
191
192
          checked={element.isRequired}
        />
        <label htmlFor="isRequired" className="px-1">
Jiwon Yoon's avatar
Jiwon Yoon committed
193
          필수
194
        </label>
Jiwon Yoon's avatar
Jiwon Yoon committed
195
196
197
        <button type="button" className="px-1" onClick={handleDelete}>
          삭제
        </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
198
        {save ? (
Jiwon Yoon's avatar
Jiwon Yoon committed
199
          <button type="button" className="px-1" onClick={handleEditClick}>
Jiwon Yoon's avatar
Jiwon Yoon committed
200
201
            수정하기
          </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
202
203
204
205
        ) : (
          <button type="button" className="px-1" onClick={handleEditComplete}>
            수정완료
          </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
206
        )}
207
208
209
210
      </div>
    </div>
  );
};