144 lines
4.8 KiB
TypeScript
144 lines
4.8 KiB
TypeScript
import {
|
|
Box,
|
|
Rating as RatingComponent,
|
|
Typography,
|
|
useTheme
|
|
} from "@mui/material";
|
|
|
|
import { updateAnswer, useQuizViewStore } from "@stores/quizView";
|
|
|
|
import FlagIcon from "@icons/questionsPage/FlagIcon";
|
|
import StarIconMini from "@icons/questionsPage/StarIconMini";
|
|
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
|
|
import HeartIcon from "@icons/questionsPage/heartIcon";
|
|
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
|
|
import LikeIcon from "@icons/questionsPage/likeIcon";
|
|
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
|
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
|
|
type RatingProps = {
|
|
currentQuestion: QuizQuestionRating;
|
|
};
|
|
|
|
const buttonRatingForm = [
|
|
{
|
|
name: "star",
|
|
icon: (color: string) => <StarIconMini width={50} color={color} />,
|
|
},
|
|
{
|
|
name: "trophie",
|
|
icon: (color: string) => <TropfyIcon color={color} />,
|
|
},
|
|
{
|
|
name: "flag",
|
|
icon: (color: string) => <FlagIcon color={color} />,
|
|
},
|
|
{
|
|
name: "heart",
|
|
icon: (color: string) => <HeartIcon color={color} />,
|
|
},
|
|
{
|
|
name: "like",
|
|
icon: (color: string) => <LikeIcon color={color} />,
|
|
},
|
|
{
|
|
name: "bubble",
|
|
icon: (color: string) => <LightbulbIcon color={color} />,
|
|
},
|
|
{
|
|
name: "hashtag",
|
|
icon: (color: string) => <HashtagIcon color={color} />,
|
|
},
|
|
];
|
|
|
|
export const Rating = ({ currentQuestion }: RatingProps) => {
|
|
const { quizId } = useQuizData();
|
|
const { answers } = useQuizViewStore();
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
const { answer } =
|
|
answers.find(
|
|
({ questionId }) => questionId === currentQuestion.id
|
|
) ?? {};
|
|
const form = buttonRatingForm.find(
|
|
({ name }) => name === currentQuestion.content.form
|
|
);
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "20px",
|
|
marginTop: "20px",
|
|
flexDirection: "column",
|
|
width: isMobile ? "100%" : undefined,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "inline-block",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<RatingComponent
|
|
value={Number(answer || 0)}
|
|
onChange={async (_, value) => {
|
|
|
|
|
|
try {
|
|
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: String(value) + " из " + currentQuestion.content.steps,
|
|
qid: quizId,
|
|
});
|
|
|
|
updateAnswer(currentQuestion.id, String(value), 0);
|
|
|
|
} catch (e) {
|
|
enqueueSnackbar("ответ не был засчитан");
|
|
}
|
|
}}
|
|
sx={{
|
|
height: "50px",
|
|
gap: isMobile ? undefined : "15px",
|
|
justifyContent: isMobile ? "space-between" : undefined,
|
|
width: isMobile ? "100%" : undefined
|
|
}}
|
|
max={currentQuestion.content.steps}
|
|
icon={form?.icon(theme.palette.primary.main)}
|
|
emptyIcon={form?.icon("#9A9AAF")}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
gap: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography sx={{
|
|
color: "#9A9AAF"
|
|
// color: theme.palette.grey2.main
|
|
}}>
|
|
{currentQuestion.content.ratingNegativeDescription}
|
|
</Typography>
|
|
<Typography sx={{ color: "#9A9AAF" }}>
|
|
{currentQuestion.content.ratingPositiveDescription}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
};
|