ARatingForm.tsx 1.51 KB
Newer Older
1
import React, { useState } from "react";
2
import { RatingType, AnswersType } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3
4
5

type Props = {
  element: RatingType;
Yoon, Daeki's avatar
Yoon, Daeki committed
6
  answers: AnswersType | undefined;
Jiwon Yoon's avatar
Jiwon Yoon committed
7
  handleAnswer: () => void;
Lee SeoYeon's avatar
Lee SeoYeon committed
8
9
};

10
export const ARatingForm = ({ element, answers, handleAnswer }: Props) => {
11
  const [selectedchoice, setSelectedchoice] = useState("");
Jiwon Yoon's avatar
Jiwon Yoon committed
12
13
  const [answer, setAnswer] = useState("");

14
15
  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
Jiwon Yoon's avatar
Jiwon Yoon committed
16
    const { name } = event.currentTarget;
17
18
19
20
21
    // response.answers.map((a) => {
    //   if (a.questionId === element._id) {
    //     a.answer = name;
    //   }
    // });
Yoon, Daeki's avatar
Yoon, Daeki committed
22
    answers && (answers.answer = name);
Jiwon Yoon's avatar
Jiwon Yoon committed
23
    setAnswer(name);
24
    setSelectedchoice(event.currentTarget.name);
Jiwon Yoon's avatar
Jiwon Yoon committed
25
    handleAnswer();
26
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
27
  return (
28
29
    <div className="flex w-full justify-center space-x-12 my-3">
      <label className="mt-3">{element.content.minRateDescription}</label>
Lee SeoYeon's avatar
Lee SeoYeon committed
30
      {element.content.choices.map((choice) => (
31
32
33
34
35
36
37
38
39
40
41
42
43
        <div className="flex gap-4">
          <button
            type="button"
            className="border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
            name={choice.text}
            onClick={buttonClick}
            style={{
              backgroundColor:
                selectedchoice === choice.text ? "#58ACFA" : "white",
            }}
          >
            {choice.text}
          </button>
Lee SeoYeon's avatar
Lee SeoYeon committed
44
45
        </div>
      ))}
46
      <label className="mt-3">{element.content.maxRateDescription}</label>
Lee SeoYeon's avatar
Lee SeoYeon committed
47
48
49
    </div>
  );
};