125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { isMoment } from "moment";
|
|
import {
|
|
Box,
|
|
FormGroup,
|
|
RadioGroup,
|
|
Typography,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
|
|
import { VariantItem } from "./VariantItem";
|
|
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
|
|
|
import type { QuizQuestionVariant } from "@model/questionTypes/variant";
|
|
|
|
type VariantProps = {
|
|
currentQuestion: QuizQuestionVariant;
|
|
};
|
|
|
|
export const Variant = ({ currentQuestion }: VariantProps) => {
|
|
const [isSending, setIsSending] = useState(false);
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const { ownVariants, updateOwnVariant } = useQuizViewStore((state) => state);
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
|
|
const { answer } =
|
|
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
|
const ownVariant = ownVariants.find(
|
|
(variant) => variant.id === currentQuestion.id
|
|
);
|
|
|
|
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
|
|
|
|
useEffect(() => {
|
|
if (!ownVariant) {
|
|
updateOwnVariant(currentQuestion.id, "");
|
|
}
|
|
}, []);
|
|
|
|
if (isMoment(answer)) throw new Error("Answer is Moment in Variant question");
|
|
|
|
return (
|
|
<Box>
|
|
<Typography
|
|
variant="h5"
|
|
color={theme.palette.text.primary}
|
|
sx={{ wordBreak: "break-word" }}
|
|
>
|
|
{currentQuestion.title}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
gap: "20px",
|
|
flexDirection: isMobile ? "column-reverse" : undefined,
|
|
alignItems: isMobile ? "center" : undefined,
|
|
}}
|
|
>
|
|
<Group
|
|
name={currentQuestion.id.toString()}
|
|
value={currentQuestion.content.variants.findIndex(
|
|
({ id }) => answer === id
|
|
)}
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
flexBasis: "100%",
|
|
marginTop: "20px",
|
|
width: isMobile ? "100%" : undefined,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
width: "100%",
|
|
gap: "20px",
|
|
}}
|
|
>
|
|
{currentQuestion.content.variants.map((variant, index) => (
|
|
<VariantItem
|
|
key={variant.id}
|
|
currentQuestion={currentQuestion}
|
|
variant={variant}
|
|
answer={answer}
|
|
index={index}
|
|
isSending={isSending}
|
|
setIsSending={setIsSending}
|
|
/>
|
|
))}
|
|
{currentQuestion.content.own && ownVariant && (
|
|
<VariantItem
|
|
own
|
|
currentQuestion={currentQuestion}
|
|
variant={ownVariant.variant}
|
|
answer={answer}
|
|
index={currentQuestion.content.variants.length + 2}
|
|
isSending={isSending}
|
|
setIsSending={setIsSending}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Group>
|
|
{currentQuestion.content.back &&
|
|
currentQuestion.content.back !== " " && (
|
|
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
|
|
<img
|
|
key={currentQuestion.id}
|
|
src={currentQuestion.content.back}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
alt=""
|
|
/>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|