145 lines
3.9 KiB
TypeScript
145 lines
3.9 KiB
TypeScript
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
|
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 type { QuizQuestionRating } from "@model/questionTypes/rating";
|
|
import { Box, Rating as RatingComponent, Typography, useTheme } from "@mui/material";
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
|
|
const RATING_FORM_BUTTONS = [
|
|
{
|
|
name: "star",
|
|
icon: (color: string, width: number) => (
|
|
<StarIconMini
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "trophie",
|
|
icon: (color: string, width: number) => (
|
|
<TropfyIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "flag",
|
|
icon: (color: string, width: number) => (
|
|
<FlagIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "heart",
|
|
icon: (color: string, width: number) => (
|
|
<HeartIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "like",
|
|
icon: (color: string, width: number) => (
|
|
<LikeIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "bubble",
|
|
icon: (color: string, width: number) => (
|
|
<LightbulbIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "hashtag",
|
|
icon: (color: string, width: number) => (
|
|
<HashtagIcon
|
|
width={width}
|
|
color={color}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
type RatingProps = {
|
|
currentQuestion: QuizQuestionRating;
|
|
};
|
|
|
|
export const Rating = ({ currentQuestion }: RatingProps) => {
|
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
const isTablet = useRootContainerSize() < 750;
|
|
|
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
|
const form = RATING_FORM_BUTTONS.find(({ name }) => name === currentQuestion.content.form);
|
|
|
|
const sendRating = async (value: number | null) => {
|
|
updateAnswer(currentQuestion.id, String(value), 0);
|
|
};
|
|
|
|
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",
|
|
}}
|
|
>
|
|
<Box sx={{ display: "inline-block", width: "100%" }}>
|
|
<RatingComponent
|
|
value={Number(answer || 0)}
|
|
onChange={(_, value) => sendRating(value)}
|
|
sx={{
|
|
height: "50px",
|
|
opacity: "1!important",
|
|
"& .MuiRating-root.Mui-disabled": { opacity: "1!important" },
|
|
"& .MuiRating-icon": { mr: isMobile ? undefined : "15px" },
|
|
}}
|
|
max={currentQuestion.content.steps}
|
|
icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)}
|
|
emptyIcon={form?.icon("#9A9AAF", isMobile ? 30 : isTablet ? 40 : 50)}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
gap: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingNegativeDescription}</Typography>
|
|
<Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingPositiveDescription}</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|