49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
import { Box, Typography } from "@mui/material";
|
||
|
|
|
||
|
|
import { Select as SelectComponent } from "../../../pages/Questions/Select";
|
||
|
|
|
||
|
|
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
|
||
|
|
|
||
|
|
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
|
||
|
|
|
||
|
|
type SelectProps = {
|
||
|
|
currentQuestion: QuizQuestionSelect;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Select = ({ currentQuestion }: SelectProps) => {
|
||
|
|
const { answers } = useQuizViewStore();
|
||
|
|
const { answer } =
|
||
|
|
answers.find(
|
||
|
|
({ questionId }) => questionId === currentQuestion.content.id
|
||
|
|
) ?? {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5">{currentQuestion.title}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SelectComponent
|
||
|
|
placeholder={currentQuestion.content.default}
|
||
|
|
activeItemIndex={answer ? Number(answer) : -1}
|
||
|
|
items={currentQuestion.content.variants.map(({ answer }) => answer)}
|
||
|
|
onChange={(_, value) => {
|
||
|
|
if (value < 0) {
|
||
|
|
deleteAnswer(currentQuestion.content.id);
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
updateAnswer(currentQuestion.content.id, String(value));
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|