2023-12-16 14:55:56 +00:00
|
|
|
import { Box, Typography } from "@mui/material";
|
|
|
|
|
|
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
|
|
|
|
2023-12-17 13:22:21 +00:00
|
|
|
import { useQuizViewStore, updateAnswer } from "@root/quizView/store";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
|
|
|
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
2023-12-17 21:28:57 +00:00
|
|
|
import { enqueueSnackbar } from "notistack";
|
|
|
|
import { useQuestionsStore } from "@root/quizData/store"
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
2023-12-17 22:20:52 +00:00
|
|
|
import { useDebouncedCallback } from "use-debounce";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
|
|
|
type TextProps = {
|
|
|
|
currentQuestion: QuizQuestionText;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Text = ({ currentQuestion }: TextProps) => {
|
2023-12-17 21:28:57 +00:00
|
|
|
const { settings } = useQuestionsStore()
|
2023-12-16 14:55:56 +00:00
|
|
|
const { answers } = useQuizViewStore();
|
2023-12-17 13:22:21 +00:00
|
|
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
2023-12-16 14:55:56 +00:00
|
|
|
|
2023-12-17 22:20:52 +00:00
|
|
|
const inputHC = useDebouncedCallback(async (text) => {
|
|
|
|
try {
|
|
|
|
|
|
|
|
await sendAnswer({
|
|
|
|
questionId: currentQuestion.id,
|
|
|
|
body: text,
|
|
|
|
//@ts-ignore
|
|
|
|
qid: settings.qid
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
enqueueSnackbar("ответ не был засчитан")
|
|
|
|
}
|
|
|
|
}, 400);
|
2023-12-16 14:55:56 +00:00
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
<Typography variant="h5">{currentQuestion.title}</Typography>
|
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
|
|
|
width: "100%",
|
|
|
|
marginTop: "20px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<CustomTextField
|
|
|
|
placeholder={currentQuestion.content.placeholder}
|
2023-12-17 13:22:21 +00:00
|
|
|
//@ts-ignore
|
2023-12-16 14:55:56 +00:00
|
|
|
value={answer || ""}
|
2023-12-17 21:28:57 +00:00
|
|
|
onChange={async ({ target }) => {
|
2023-12-17 22:20:52 +00:00
|
|
|
updateAnswer(currentQuestion.id, target.value)
|
|
|
|
inputHC(target.value)
|
2023-12-17 21:28:57 +00:00
|
|
|
}
|
|
|
|
}
|
2023-12-16 14:55:56 +00:00
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|