114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
import { Button, ThemeProvider } from "@mui/material";
|
||
import { useQuizViewStore } from "@stores/quizView";
|
||
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
||
import { useQuizData } from "@contexts/QuizDataContext";
|
||
import { notReachable } from "@utils/notReachable";
|
||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||
import { ReactElement, useEffect } from "react";
|
||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||
import { ContactForm } from "./ContactForm";
|
||
import { Question } from "./Question";
|
||
import { ResultForm } from "./ResultForm";
|
||
import { StartPageViewPublication } from "./StartPageViewPublication";
|
||
|
||
export default function ViewPublicationPage() {
|
||
const { settings, recentlyCompleted } = useQuizData();
|
||
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
|
||
const isMobileMini = useRootContainerSize() < 382;
|
||
const {
|
||
currentQuestion,
|
||
currentQuestionStepNumber,
|
||
isNextButtonEnabled,
|
||
isPreviousButtonEnabled,
|
||
moveToPrevQuestion,
|
||
moveToNextQuestion,
|
||
showResultAfterContactForm,
|
||
} = useQuestionFlowControl();
|
||
|
||
useEffect(
|
||
function setFaviconAndTitle() {
|
||
const link = document.querySelector('link[rel="icon"]');
|
||
if (link && settings.cfg.startpage.favIcon) {
|
||
link.setAttribute("href", settings.cfg.startpage.favIcon);
|
||
}
|
||
|
||
document.title = settings.name;
|
||
},
|
||
[settings]
|
||
);
|
||
|
||
if (recentlyCompleted) throw new Error("Quiz already completed");
|
||
if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
|
||
currentQuizStep = "question";
|
||
|
||
let quizStepElement: ReactElement;
|
||
switch (currentQuizStep) {
|
||
case "startpage": {
|
||
quizStepElement = <StartPageViewPublication />;
|
||
break;
|
||
}
|
||
case "question": {
|
||
if (currentQuestion.type === "result") {
|
||
quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
|
||
break;
|
||
}
|
||
|
||
quizStepElement = (
|
||
<Question
|
||
currentQuestion={currentQuestion}
|
||
currentQuestionStepNumber={currentQuestionStepNumber}
|
||
prevButton={
|
||
<Button
|
||
disabled={!isPreviousButtonEnabled}
|
||
variant="contained"
|
||
sx={{
|
||
fontSize: "16px",
|
||
padding: "10px 15px",
|
||
color: "#FFFFFF",
|
||
border: "1px solid #9A9AAF",
|
||
background: "rgba(154,154,175, 0.2)",
|
||
"&:disabled": {
|
||
color: "#9A9AAF",
|
||
},
|
||
}}
|
||
onClick={moveToPrevQuestion}
|
||
>
|
||
{isMobileMini ? "←" : "← Назад"}
|
||
</Button>
|
||
}
|
||
nextButton={
|
||
<Button
|
||
disabled={!isNextButtonEnabled}
|
||
variant="contained"
|
||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||
onClick={moveToNextQuestion}
|
||
>
|
||
Далее →
|
||
</Button>
|
||
}
|
||
/>
|
||
);
|
||
break;
|
||
}
|
||
case "contactform": {
|
||
quizStepElement = (
|
||
<ContactForm
|
||
currentQuestion={currentQuestion}
|
||
onShowResult={showResultAfterContactForm}
|
||
/>
|
||
);
|
||
break;
|
||
}
|
||
default:
|
||
notReachable(currentQuizStep);
|
||
}
|
||
|
||
return (
|
||
<ThemeProvider
|
||
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
||
>
|
||
{quizStepElement}
|
||
</ThemeProvider>
|
||
);
|
||
}
|