diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 3e7e4f7b..f4cf528c 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -1,4 +1,4 @@ -import PointsIcon from "@icons/questionsPage/PointsIcon"; +import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import { Box, IconButton } from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; @@ -110,7 +110,7 @@ export default function QuizPreview() { cursor: "move", }} > - + } diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index 2ba85fbb..6f890147 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx @@ -1,25 +1,24 @@ import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material"; -import { Question, questionStore } from "@root/questions"; +import { questionStore } from "@root/questions"; import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview"; +import { AnyQuizQuestion, QuizQuestionType } from "model/questionTypes/shared"; +import { FC, useEffect } from "react"; import { useParams } from "react-router-dom"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; -import Variant from "./QuizPreviewQuestionTypes/Variant"; -import { FC, useEffect } from "react"; -import Images from "./QuizPreviewQuestionTypes/Images"; -import Varimg from "./QuizPreviewQuestionTypes/Varimg"; -import Emoji from "./QuizPreviewQuestionTypes/Emoji"; -import Text from "./QuizPreviewQuestionTypes/Text"; -import Select from "./QuizPreviewQuestionTypes/Select"; import Date from "./QuizPreviewQuestionTypes/Date"; -import Number from "./QuizPreviewQuestionTypes/Number"; +import Emoji from "./QuizPreviewQuestionTypes/Emoji"; import File from "./QuizPreviewQuestionTypes/File"; +import Images from "./QuizPreviewQuestionTypes/Images"; +import Number from "./QuizPreviewQuestionTypes/Number"; import Page from "./QuizPreviewQuestionTypes/Page"; import Rating from "./QuizPreviewQuestionTypes/Rating"; +import Select from "./QuizPreviewQuestionTypes/Select"; +import Text from "./QuizPreviewQuestionTypes/Text"; +import Variant from "./QuizPreviewQuestionTypes/Variant"; +import Varimg from "./QuizPreviewQuestionTypes/Varimg"; -type QuizQuestionType = "variant" | "images" | "varimg" | "emoji" | "text" | "select" | "date" | "number" | "file" | "page" | "rating"; - -const QuestionPreviewComponentByType: Record> = { +const QuestionPreviewComponentByType: Record> = { variant: Variant, images: Images, varimg: Varimg, @@ -38,11 +37,12 @@ export default function QuizPreviewLayout() { const listQuestions = questionStore(state => state.listQuestions); const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex); - const quizQuestions: Question[] | undefined = listQuestions[quizId]; - const maxCurrentQuizStep = quizQuestions?.length > 0 ? quizQuestions.length - 1 : 0; + const quizQuestions: AnyQuizQuestion[] | undefined = listQuestions[quizId]; + const nonDeletedQuizQuestions = quizQuestions?.filter(question => !question.deleted); + const maxCurrentQuizStep = nonDeletedQuizQuestions?.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100); - - const currentQuestion = quizQuestions[currentQuizStep]; + + const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; const QuestionComponent = currentQuestion ? QuestionPreviewComponentByType[currentQuestion.type as QuizQuestionType] : null; @@ -88,12 +88,12 @@ export default function QuizPreviewLayout() { gap: 1, }}> - {quizQuestions.length > 0 - ? `Вопрос ${currentQuizStep + 1} из ${quizQuestions.length}` + {nonDeletedQuizQuestions.length > 0 + ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}` : "Нет вопросов" } - {quizQuestions.length > 0 && + {nonDeletedQuizQuestions.length > 0 && ( } label={ - {`${variant.emoji} ${variant.answer}`} + {`${variant.extendedText} ${variant.answer}`} diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx index bba47075..70cf227f 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx @@ -1,10 +1,10 @@ import { Box, Button, Typography } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionFile } from "model/questionTypes/file"; import { ChangeEvent, useRef, useState } from "react"; interface Props { - question: Question; + question: QuizQuestionFile; } export default function File({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx index 1d575d44..7373ba4b 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx @@ -1,11 +1,11 @@ import InfoIcon from "@icons/InfoIcon"; import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionImages } from "model/questionTypes/images"; import { ChangeEvent, useState } from "react"; interface Props { - question: Question; + question: QuizQuestionImages; } export default function Images({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx index f0947540..c34985d3 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx @@ -1,11 +1,11 @@ import { Box, Typography } from "@mui/material"; -import { Question } from "@root/questions"; import { CustomSlider } from "@ui_kit/CustomSlider"; +import { QuizQuestionNumber } from "model/questionTypes/number"; import { useState } from "react"; interface Props { - question: Question; + question: QuizQuestionNumber; } export default function Number({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx index 9e382825..c56d1ad4 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx @@ -1,9 +1,9 @@ import { Box, Typography } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionPage } from "model/questionTypes/page"; interface Props { - question: Question; + question: QuizQuestionPage; } export default function Page({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx index d471fbe6..3ea7e408 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx @@ -1,5 +1,4 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { Question } from "@root/questions"; import { FC, useState } from "react"; import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon"; import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini"; @@ -8,6 +7,7 @@ import HeartIcon from "../../../assets/icons/questionsPage/heartIcon"; import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon"; import LikeIcon from "../../../assets/icons/questionsPage/likeIcon"; import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon"; +import { QuizQuestionRating } from "model/questionTypes/rating"; type RatingIconType = "star" | "trophie" | "flag" | "heart" | "like" | "bubble" | "hashtag"; @@ -23,7 +23,7 @@ const ratingIconComponentByType: Record> }; interface Props { - question: Question; + question: QuizQuestionRating; } export default function Rating({ question }: Props) { @@ -31,6 +31,8 @@ export default function Rating({ question }: Props) { const isMobile = useMediaQuery(theme.breakpoints.down(790)); const [selectedRating, setSelectedRating] = useState(0); + console.log(question); + const RatingIconComponent = ratingIconComponentByType[question.content.form as RatingIconType]; return ( @@ -42,32 +44,47 @@ export default function Rating({ question }: Props) { {question.title} - {Array.from( - { length: question.content.steps }, - (_, index) => index - ).map((itemNumber) => ( - setSelectedRating(itemNumber + 1)} - sx={{ - cursor: "pointer", - transform: "scale(1.5)", - ":hover": { - transform: "scale(1.7)", - transition: "0.2s", - }, - }} - > - itemNumber - ? theme.palette.brightPurple.main - : theme.palette.grey2.main - } /> - - ))} + + {Array.from( + { length: question.content.steps }, + (_, index) => index + ).map((itemNumber) => ( + setSelectedRating(itemNumber + 1)} + sx={{ + cursor: "pointer", + transform: "scale(1.5)", + ":hover": { + transform: "scale(1.7)", + transition: "0.2s", + }, + }} + > + itemNumber + ? theme.palette.brightPurple.main + : theme.palette.grey2.main + } /> + + ))} + + + {question.content.ratingNegativeDescription} + {question.content.ratingPositiveDescription} + ); diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx index 73d95091..136d82aa 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx @@ -1,11 +1,11 @@ import ArrowDownIcon from "@icons/ArrowDownIcon"; import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionSelect } from "model/questionTypes/select"; import { useState } from "react"; interface Props { - question: Question; + question: QuizQuestionSelect; } export default function Text({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx index 761cbeeb..9e7f9cfe 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx @@ -1,10 +1,10 @@ import { Box, Typography } from "@mui/material"; -import { Question } from "@root/questions"; import CustomTextField from "@ui_kit/CustomTextField"; +import { QuizQuestionText } from "model/questionTypes/text"; interface Props { - question: Question; + question: QuizQuestionText; } export default function Text({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx index 9cabfe7f..cded6e77 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx @@ -1,11 +1,11 @@ import InfoIcon from "@icons/InfoIcon"; import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionVariant } from "model/questionTypes/variant"; import { ChangeEvent, useState } from "react"; interface Props { - question: Question; + question: QuizQuestionVariant; } export default function Variant({ question }: Props) { diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx index 3303a00e..ead1f616 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx @@ -1,11 +1,11 @@ import InfoIcon from "@icons/InfoIcon"; import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material"; -import { Question } from "@root/questions"; +import { QuizQuestionVarImg } from "model/questionTypes/varimg"; import { useState, ChangeEvent } from "react"; interface Props { - question: Question; + question: QuizQuestionVarImg; } export default function Varimg({ question }: Props) {