import React, { useState, Dispatch, SetStateAction } from "react"; import { BasicQuestionType, EssayType } from "../types"; import { questionApi } from "../apis"; import { EssayForm } from "./EssayForm"; import { CheckboxForm } from "./CheckboxForm"; import { RadioForm } from "./RadioForm"; import { DropdownForm } from "./DropdownForm"; import { FileForm } from "./FileForm"; import { RatingForm } from "./RatingForm"; type Props = { element: BasicQuestionType; handleQuestion: (id: string) => void; deleteQuestion: (id: string) => void; changeCurrentId: (id: string) => void; currentId: string; }; const typeDropDown = new Map([ ["essay", "주관식"], ["radio", "객관식"], ["dropdown", "드롭다운"], ["checkbox", "체크박스"], ["file", "파일"], ["rating", "선형"], ["grid", "그리드"], ["date", "날짜"], ]); export const Question = ({ element, handleQuestion, deleteQuestion, changeCurrentId, currentId, }: Props) => { async function handleEditComplete() { try { const newQuestion: BasicQuestionType = await questionApi.updateQuestion( element ); console.log(newQuestion); changeCurrentId(""); // setSuccess(true); // setError(""); } catch (error) { console.log("에러발생"); // catchErrors(error, setError) } finally { // setLoading(false); } } function handleSelect(event: React.ChangeEvent) { const selectedType = event.currentTarget.value; console.log(selectedType); if ( selectedType === "radio" || selectedType === "dropdown" || selectedType === "checkbox" ) { element.content = { choices: [ { text: "", value: 0 }, { text: "", value: 1 }, { text: "", value: 2 }, ], }; } else if (selectedType === "essay") { element.content = { choices: [] }; } else if (selectedType === "rating") { element.content = { minRateDescription: "", maxRateDescription: "", choices: [ { text: "", value: 0 }, { text: "", value: 1 }, { text: "", value: 2 }, ], }; } element.type = selectedType; handleQuestion(element._id); } function handleQuestionInfo(event: React.ChangeEvent) { const { name, value } = event.currentTarget; element[name] = value; handleQuestion(element._id); } function getContent(element: BasicQuestionType) { switch (element.type) { case "essay": return ; case "radio": return ( ); case "checkbox": return ( ); case "dropdown": return ( ); case "file": return ; case "rating": return ( ); default: return <>; } } const handleRequired = (event: React.ChangeEvent) => { const { checked, value } = event.currentTarget; element[value] = checked; handleQuestion(element._id); }; const handleDelete = () => { deleteQuestion(element._id); }; const handleEditClick = () => { changeCurrentId(element._id); }; return (
{getContent(element)}
{currentId === element._id ? ( ) : ( )}
); };