update

src/pages/ViewPublicationPage/Question.tsx

@@ -43,8 +43,7 @@ const QUESTIONS_MAP: any = {
 
 export const Question = ({ questions }: QuestionProps) => {
   const quiz = useCurrentQuiz();
-  const [currentQuestion, setCurrentQuestion] =
+  const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
-    useState<AnyTypedQuizQuestion>();
   const [showContactForm, setShowContactForm] = useState<boolean>(false);
   const [showResultForm, setShowResultForm] = useState<boolean>(false);
 
@@ -62,8 +61,7 @@ export const Question = ({ questions }: QuestionProps) => {
 
   if (!currentQuestion) return <>не смог отобразить вопрос</>;
 
-  const QuestionComponent =
+  const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
-    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
 
   return (
     <Box>

src/pages/ViewPublicationPage/questions/Page.tsx

@@ -12,9 +12,13 @@ export const Page = ({ currentQuestion }: PageProps) => {
   const { answers } = useQuizViewStore();
   const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
 
+  console.log(currentQuestion);
+
   return (
     <Box>
-      <Typography variant="h5" sx={{ paddingBottom: "25px" }}>{currentQuestion.title}</Typography>
+      <Typography variant="h5" sx={{ paddingBottom: "25px" }}>
+        {currentQuestion.title}
+      </Typography>
       <Typography>{currentQuestion.content.text}</Typography>
       <Box
         sx={{
@@ -24,11 +28,10 @@ export const Page = ({ currentQuestion }: PageProps) => {
           marginTop: "20px",
         }}
       >
-        {currentQuestion.content.picture && (
+        {currentQuestion.content.useImage ? (
-            <Box sx={{borderRadius: "12px",
+          <Box sx={{ borderRadius: "12px", border: "1px solid #9A9AAF", overflow: "hidden" }}>
-                border: "1px solid #9A9AAF", overflow: "hidden" }}>
             <img
-                    src={currentQuestion.content.picture}
+              src={currentQuestion.content.back}
               alt=""
               style={{
                 display: "block",
@@ -38,9 +41,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
               }}
             />
           </Box>
-
+        ) : (
-        )}
-        {currentQuestion.content.video && (
           <video
             src={currentQuestion.content.video}
             controls

src/pages/startPage/ModalInfoWhyCantCreate.tsx

@@ -1,49 +1,44 @@
-import { Box, Modal, Typography, Divider } from "@mui/material"
+import { Box, Modal, Typography, Divider } from "@mui/material";
 
 import { useUiTools } from "@root/uiTools/store";
 import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
 import { useLayoutEffect } from "react";
 
 export const ModalInfoWhyCantCreate = () => {
-
   const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
 
   return (
-        <Modal
+    <Modal open={openModalInfoWhyCantCreate} onClose={() => updateModalInfoWhyCantCreate(false)}>
-            open={openModalInfoWhyCantCreate}
+      <Box
-            onClose={() => updateModalInfoWhyCantCreate(false)}
+        sx={{
-        >
+          position: "absolute" as "absolute",
-            <Box sx={{
+          top: "50%",
-                position: 'absolute' as 'absolute',
+          left: "50%",
-                top: '50%',
+          transform: "translate(-50%, -50%)",
-                left: '50%',
+          maxWidth: "620px",
-                transform: 'translate(-50%, -50%)',
+          width: "100%",
-                maxWidth: '620px',
+          bgcolor: "background.paper",
-                width: '100%',
+          borderRadius: "12px",
-                bgcolor: 'background.paper',
-                borderRadius: '12px',
 
           boxShadow: 24,
           p: "25px",
           minHeight: "60vh",
           maxHeight: "90vh",
-                overflow: "auto"
+          overflow: "auto",
         }}
       >
-                {
+        {Object.values(whyCantCreatePublic).map((data) => {
-                    Object.values(whyCantCreatePublic).map((data) => {
           return (
             <Box>
               <Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
-                                {
+              {data.problems.map((problem) => (
-                                    data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>)
+                <Typography p="5px 0">{problem}</Typography>
-                                }
+              ))}
-                                <Divider/>
+              <Divider />
             </Box>
-                        )
+          );
-                    })
+        })}
-                }
       </Box>
     </Modal>
-    )
+  );
-}
+};

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -1,10 +1,20 @@
-import { Box, Button, LinearProgress, Paper, Typography, FormControl, Select as MuiSelect, MenuItem, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  LinearProgress,
+  Paper,
+  Typography,
+  FormControl,
+  Select as MuiSelect,
+  MenuItem,
+  useTheme,
+} from "@mui/material";
 import { useQuestionsStore } from "@root/questions/store";
 import {
   decrementCurrentQuestionIndex,
   incrementCurrentQuestionIndex,
   useQuizPreviewStore,
-    setCurrentQuestionIndex
+  setCurrentQuestionIndex,
 } from "@root/quizPreview";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
 import { useEffect } from "react";
@@ -25,19 +35,12 @@ import ArrowDownIcon from "@icons/ArrowDownIcon";
 
 export default function QuizPreviewLayout() {
   const theme = useTheme();
-    const questions = useQuestionsStore(state => state.questions);
+  const questions = useQuestionsStore((state) => state.questions);
-    const currentQuizStep = useQuizPreviewStore(
+  const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex);
-        (state) => state.currentQuestionIndex
-    );
 
-    const nonDeletedQuizQuestions = questions.filter(
+  const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted);
-        (question) => !question.deleted
+  const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
-    );
+  const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
-    const maxCurrentQuizStep =
-        nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
-    const currentProgress = Math.floor(
-        (currentQuizStep / maxCurrentQuizStep) * 100
-    );
 
   const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
 
@@ -84,19 +87,13 @@ export default function QuizPreviewLayout() {
         }}
       >
         <Box sx={{ marginBottom: "10px" }}>
-                    <FormControl
+          <FormControl fullWidth size="small" sx={{ width: "100%", minWidth: "200px", height: "48px" }}>
-                        fullWidth
-                        size="small"
-                        sx={{ width: "100%", minWidth: "200px", height: "48px" }}
-                    >
             <MuiSelect
               id="category-select"
               variant="outlined"
               value={currentQuizStep}
               placeholder="Заголовок вопроса"
-                            onChange={({ target }) =>
+              onChange={({ target }) => setCurrentQuestionIndex(window.Number(target.value))}
-                                setCurrentQuestionIndex(window.Number(target.value))
-                            }
               sx={{
                 height: "48px",
                 borderRadius: "8px",
@@ -138,8 +135,7 @@ export default function QuizPreviewLayout() {
               }}
               IconComponent={(props) => <ArrowDownIcon {...props} />}
             >
-                            {Object.values(questions).map(
+              {Object.values(questions).map(({ id, title }, index) => (
-                                ({ id, title }, index) => (
                 <MenuItem
                   key={id}
                   value={index}
@@ -154,8 +150,7 @@ export default function QuizPreviewLayout() {
                 >
                   {`${index + 1}. ${title}`}
                 </MenuItem>
-                                )
+              ))}
-                            )}
             </MuiSelect>
           </FormControl>
         </Box>
@@ -170,8 +165,7 @@ export default function QuizPreviewLayout() {
           >
             <Typography>
               {nonDeletedQuizQuestions.length > 0
-                                ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
+                ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
-                                }`
                 : "Нет вопросов"}
             </Typography>
             {nonDeletedQuizQuestions.length > 0 && (
@@ -218,23 +212,33 @@ export default function QuizPreviewLayout() {
   );
 }
 
-function QuestionPreviewComponent({ question }: {
+function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) {
-    question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined;
-}) {
   if (!question || question.type === null) return null;
 
   switch (question.type) {
-        case "variant": return <Variant question={question} />;
+    case "variant":
-        case "images": return <Images question={question} />;
+      return <Variant question={question} />;
-        case "varimg": return <Varimg question={question} />;
+    case "images":
-        case "emoji": return <Emoji question={question} />;
+      return <Images question={question} />;
-        case "text": return <Text question={question} />;
+    case "varimg":
-        case "select": return <Select question={question} />;
+      return <Varimg question={question} />;
-        case "date": return <Date question={question} />;
+    case "emoji":
-        case "number": return <Number question={question} />;
+      return <Emoji question={question} />;
-        case "file": return <File question={question} />;
+    case "text":
-        case "page": return <Page question={question} />;
+      return <Text question={question} />;
-        case "rating": return <Rating question={question} />;
+    case "select":
-        default: notReachable(question);
+      return <Select question={question} />;
+    case "date":
+      return <Date question={question} />;
+    case "number":
+      return <Number question={question} />;
+    case "file":
+      return <File question={question} />;
+    case "page":
+      return <Page question={question} />;
+    case "rating":
+      return <Rating question={question} />;
+    default:
+      notReachable(question);
   }
 }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx

@@ -1,4 +1,5 @@
 import { Box, Typography } from "@mui/material";
+import YoutubeEmbedIframe from "@ui_kit/StartPagePreview/YoutubeEmbedIframe";
 
 import type { QuizQuestionPage } from "model/questionTypes/page";
 
@@ -7,6 +8,7 @@ interface Props {
 }
 
 export default function Page({ question }: Props) {
+  console.log(question);
   return (
     <Box
       sx={{
@@ -16,13 +18,17 @@ export default function Page({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>
-      <Typography data-cy="question-text" sx={{ paddingBottom: "20px" }}>{question.content.text}</Typography>
+        {question.title}
-      {question.content.picture && (
+      </Typography>
-          <Box sx={{borderRadius: "12px",
+
-              border: "1px solid #9A9AAF", width: "100%", overflow: "hidden"}}>
+      <Typography data-cy="question-text" sx={{ paddingBottom: "20px" }}>
+        {question.content.text}
+      </Typography>
+
+      {question.content.useImage ? (
         <img
-                src={question.content.picture}
+          src={question.content.back}
           alt=""
           style={{
             display: "block",
@@ -31,7 +37,8 @@ export default function Page({ question }: Props) {
             objectFit: "contain",
           }}
         />
-          </Box>
+      ) : (
+        <YoutubeEmbedIframe containerSX={{ width: "100%", height: "50vh" }} videoUrl={question.content.video} />
       )}
     </Box>
   );