update

2023-12-21 01:59:28 +03:00 · 2023-12-21 01:59:28 +03:00 · a448ddfffa
commit a448ddfffa
parent 9bdf5bf678
5 changed files with 289 additions and 284 deletions
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -43,8 +43,7 @@ const QUESTIONS_MAP: any = {

 export const Question = ({ questions }: QuestionProps) => {
  const quiz = useCurrentQuiz();
-  const [currentQuestion, setCurrentQuestion] =
-    useState<AnyTypedQuizQuestion>();
+  const [currentQuestion, setCurrentQuestion] = 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 =
-    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
+  const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];

  return (
    <Box>
--- a/src/pages/ViewPublicationPage/questions/Page.tsx
+++ b/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 && (
-            <Box sx={{borderRadius: "12px",
-                border: "1px solid #9A9AAF", overflow: "hidden" }}>
+        {currentQuestion.content.useImage ? (
+          <Box sx={{ borderRadius: "12px", 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
--- a/src/pages/startPage/ModalInfoWhyCantCreate.tsx
+++ b/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
-            open={openModalInfoWhyCantCreate}
-            onClose={() => updateModalInfoWhyCantCreate(false)}
-        >
-            <Box sx={{
-                position: 'absolute' as 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                maxWidth: '620px',
-                width: '100%',
-                bgcolor: 'background.paper',
-                borderRadius: '12px',
+    <Modal open={openModalInfoWhyCantCreate} onClose={() => updateModalInfoWhyCantCreate(false)}>
+      <Box
+        sx={{
+          position: "absolute" as "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          maxWidth: "620px",
+          width: "100%",
+          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) => <Typography p="5px 0">{problem}</Typography>)
-                                }
-                                <Divider/>
+              {data.problems.map((problem) => (
+                <Typography p="5px 0">{problem}</Typography>
+              ))}
+              <Divider />
            </Box>
-                        )
-                    })
-                }
+          );
+        })}
      </Box>
    </Modal>
-    )
-}
+  );
+};
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/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 currentQuizStep = useQuizPreviewStore(
-        (state) => state.currentQuestionIndex
-    );
+  const questions = useQuestionsStore((state) => state.questions);
+  const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex);

-    const nonDeletedQuizQuestions = questions.filter(
-        (question) => !question.deleted
-    );
-    const maxCurrentQuizStep =
-        nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
-    const currentProgress = Math.floor(
-        (currentQuizStep / maxCurrentQuizStep) * 100
-    );
+  const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted);
+  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
-                        fullWidth
-                        size="small"
-                        sx={{ width: "100%", minWidth: "200px", height: "48px" }}
-                    >
+          <FormControl fullWidth size="small" sx={{ width: "100%", minWidth: "200px", height: "48px" }}>
            <MuiSelect
              id="category-select"
              variant="outlined"
              value={currentQuizStep}
              placeholder="Заголовок вопроса"
-                            onChange={({ target }) =>
-                                setCurrentQuestionIndex(window.Number(target.value))
-                            }
+              onChange={({ target }) => 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(
-                                ({ id, title }, index) => (
+              {Object.values(questions).map(({ 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 }: {
-    question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined;
-}) {
+function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) {
  if (!question || question.type === null) return null;

  switch (question.type) {
-        case "variant": return <Variant question={question} />;
-        case "images": return <Images question={question} />;
-        case "varimg": return <Varimg question={question} />;
-        case "emoji": return <Emoji question={question} />;
-        case "text": return <Text question={question} />;
-        case "select": 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);
+    case "variant":
+      return <Variant question={question} />;
+    case "images":
+      return <Images question={question} />;
+    case "varimg":
+      return <Varimg question={question} />;
+    case "emoji":
+      return <Emoji question={question} />;
+    case "text":
+      return <Text question={question} />;
+    case "select":
+      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);
  }
 }
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
+++ b/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 data-cy="question-text" sx={{ paddingBottom: "20px" }}>{question.content.text}</Typography>
-      {question.content.picture && (
-          <Box sx={{borderRadius: "12px",
-              border: "1px solid #9A9AAF", width: "100%", overflow: "hidden"}}>
+      <Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>
+        {question.title}
+      </Typography>
+
+      <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>
  );