From a448ddfffa929d3f1aeea3a5916dbfe1efa43e44 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 21 Dec 2023 01:59:28 +0300 Subject: [PATCH] update --- src/pages/ViewPublicationPage/Question.tsx | 6 +- .../ViewPublicationPage/questions/Page.tsx | 39 +- .../startPage/ModalInfoWhyCantCreate.tsx | 75 ++-- src/ui_kit/QuizPreview/QuizPreviewLayout.tsx | 414 +++++++++--------- .../QuizPreviewQuestionTypes/Page.tsx | 39 +- 5 files changed, 289 insertions(+), 284 deletions(-) diff --git a/src/pages/ViewPublicationPage/Question.tsx b/src/pages/ViewPublicationPage/Question.tsx index ff251329..7533f99a 100644 --- 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(); + const [currentQuestion, setCurrentQuestion] = useState(); const [showContactForm, setShowContactForm] = useState(false); const [showResultForm, setShowResultForm] = useState(false); @@ -62,8 +61,7 @@ export const Question = ({ questions }: QuestionProps) => { if (!currentQuestion) return <>не смог отобразить вопрос; - const QuestionComponent = - QUESTIONS_MAP[currentQuestion.type as Exclude]; + const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude]; return ( diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index 619aea4b..c04e606b 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -12,10 +12,14 @@ export const Page = ({ currentQuestion }: PageProps) => { const { answers } = useQuizViewStore(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; + console.log(currentQuestion); + return ( - {currentQuestion.title} - {currentQuestion.content.text} + + {currentQuestion.title} + + {currentQuestion.content.text} { marginTop: "20px", }} > - {currentQuestion.content.picture && ( - - - - - )} - {currentQuestion.content.video && ( + {currentQuestion.content.useImage ? ( + + + + ) : ( + + ); +}; diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index 3c4ed097..003d76b7 100644 --- 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 + decrementCurrentQuestionIndex, + incrementCurrentQuestionIndex, + useQuizPreviewStore, + setCurrentQuestionIndex, } from "@root/quizPreview"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; import { useEffect } from "react"; @@ -24,217 +34,211 @@ import { notReachable } from "../../utils/notReachable"; 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 theme = useTheme(); + 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]; + const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; - useEffect( - function resetCurrentQuizStep() { - if (currentQuizStep > maxCurrentQuizStep) { - decrementCurrentQuestionIndex(); - } - }, - [currentQuizStep, maxCurrentQuizStep] - ); + useEffect( + function resetCurrentQuizStep() { + if (currentQuizStep > maxCurrentQuizStep) { + decrementCurrentQuestionIndex(); + } + }, + [currentQuizStep, maxCurrentQuizStep] + ); - return ( - + + + + + + + setCurrentQuestionIndex(window.Number(target.value))} + sx={{ + height: "48px", + borderRadius: "8px", + "& .MuiOutlinedInput-notchedOutline": { + border: `1px solid ${theme.palette.brightPurple.main} !important`, + }, + }} + MenuProps={{ + PaperProps: { + sx: { + mt: "8px", + p: "4px", + borderRadius: "8px", + border: "1px solid #EEE4FC", + boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", + }, + }, + MenuListProps: { + sx: { + py: 0, + display: "flex", + flexDirection: "column", + gap: "8px", + "& .Mui-selected": { + backgroundColor: theme.palette.background.default, + color: theme.palette.brightPurple.main, + }, + }, + }, + }} + inputProps={{ + sx: { + color: theme.palette.brightPurple.main, + display: "flex", + alignItems: "center", + px: "9px", + gap: "20px", + }, + }} + IconComponent={(props) => } + > + {Object.values(questions).map(({ id, title }, index) => ( + + {`${index + 1}. ${title}`} + + ))} + + + + + - + + {nonDeletedQuizQuestions.length > 0 + ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}` + : "Нет вопросов"} + + {nonDeletedQuizQuestions.length > 0 && ( + + )} + + + + - - - - - - ); + Далее + + + + + + ); } -function QuestionPreviewComponent({ question }: { - question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined; -}) { - if (!question || question.type === null) return null; +function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) { + if (!question || question.type === null) return null; - switch (question.type) { - case "variant": return ; - case "images": return ; - case "varimg": return ; - case "emoji": return ; - case "text": return ; - case "select": return ; + case "date": + return ; + case "number": + return ; + case "file": + return ; + case "page": + return ; + case "rating": + return ; + default: + notReachable(question); + } } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx index 4567eee6..1f4559e1 100644 --- 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 ( - {question.title} - {question.content.text} - {question.content.picture && ( - - - + + {question.title} + + + + {question.content.text} + + + {question.content.useImage ? ( + + ) : ( + )} );