119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { Box } from "@mui/material";
|
||
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { getQuestionByContentId } from "@root/questions/actions";
|
||
|
||
import { Variant } from "./questions/Variant";
|
||
import { Images } from "./questions/Images";
|
||
import { Varimg } from "./questions/Varimg";
|
||
import { Emoji } from "./questions/Emoji";
|
||
import { Text } from "./questions/Text";
|
||
import { Select } from "./questions/Select";
|
||
import { Date } from "./questions/Date";
|
||
import { Number } from "./questions/Number";
|
||
import { File } from "./questions/File";
|
||
import { Page } from "./questions/Page";
|
||
import { Rating } from "./questions/Rating";
|
||
import { Footer } from "./Footer";
|
||
import { ContactForm } from "./ContactForm";
|
||
import { ResultForm } from "./ResultForm";
|
||
import { ResultQuestion } from "./ResultQuestion";
|
||
|
||
import type { QuestionType } from "../../model/question/question";
|
||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||
|
||
type QuestionProps = {
|
||
questions: AnyTypedQuizQuestion[];
|
||
};
|
||
|
||
const QUESTIONS_MAP: any = {
|
||
variant: Variant,
|
||
images: Images,
|
||
varimg: Varimg,
|
||
emoji: Emoji,
|
||
text: Text,
|
||
select: Select,
|
||
date: Date,
|
||
number: Number,
|
||
file: File,
|
||
page: Page,
|
||
rating: Rating,
|
||
};
|
||
|
||
export const Question = ({ questions }: QuestionProps) => {
|
||
const quiz = useCurrentQuiz();
|
||
const [currentQuestion, setCurrentQuestion] =
|
||
useState<AnyTypedQuizQuestion>();
|
||
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
||
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
||
|
||
useEffect(() => {
|
||
const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
|
||
|
||
if (nextQuestion?.type) {
|
||
setCurrentQuestion(nextQuestion);
|
||
|
||
return;
|
||
}
|
||
|
||
setCurrentQuestion(questions[0]);
|
||
}, []);
|
||
|
||
if (!currentQuestion) return <>не смог отобразить вопрос</>;
|
||
|
||
const QuestionComponent =
|
||
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
|
||
|
||
console.log("showResultForm " , showResultForm)
|
||
return (
|
||
<Box>
|
||
{!showContactForm && !showResultForm && (
|
||
<Box
|
||
sx={{
|
||
minHeight: "calc(100vh - 75px)",
|
||
width: "100%",
|
||
maxWidth: "1440px",
|
||
padding: "40px 25px 20px",
|
||
margin: "0 auto",
|
||
}}
|
||
>
|
||
<QuestionComponent currentQuestion={currentQuestion} />
|
||
</Box>
|
||
)}
|
||
{showResultForm && quiz?.config.resultInfo.when === "before" && (
|
||
<ResultForm
|
||
currentQuestion={currentQuestion}
|
||
showContactForm={showContactForm}
|
||
setShowContactForm={setShowContactForm}
|
||
setShowResultForm={setShowResultForm}
|
||
/>
|
||
)}
|
||
{showContactForm && (
|
||
<ContactForm
|
||
currentQuestion={currentQuestion}
|
||
showResultForm={showResultForm}
|
||
setShowContactForm={setShowContactForm}
|
||
setShowResultForm={setShowResultForm}
|
||
/>
|
||
)}
|
||
{showResultForm && quiz?.config.resultInfo.when === "after" && (
|
||
<ResultForm
|
||
currentQuestion={currentQuestion}
|
||
showContactForm={showContactForm}
|
||
setShowContactForm={setShowContactForm}
|
||
setShowResultForm={setShowResultForm}
|
||
/>
|
||
)}
|
||
{!showContactForm && !showResultForm && (
|
||
<Footer
|
||
question={currentQuestion}
|
||
setCurrentQuestion={setCurrentQuestion}
|
||
setShowContactForm={setShowContactForm}
|
||
setShowResultForm={setShowResultForm}
|
||
/>
|
||
)}
|
||
</Box>
|
||
);
|
||
};
|