89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import {Button, ThemeProvider, useTheme} 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";
|
|
import PrevButton from "./tools/PrevButton";
|
|
import NextButton from "./tools/NextButton";
|
|
|
|
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={ <PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion}/>}
|
|
nextButton={<NextButton isNextButtonEnabled={isNextButtonEnabled} moveToNextQuestion={moveToNextQuestion}/>}
|
|
/>
|
|
);
|
|
break;
|
|
}
|
|
case "contactform": {
|
|
quizStepElement = (
|
|
<ContactForm
|
|
currentQuestion={currentQuestion}
|
|
onShowResult={showResultAfterContactForm}
|
|
/>
|
|
);
|
|
break;
|
|
}
|
|
default:
|
|
notReachable(currentQuizStep);
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider
|
|
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
|
>
|
|
{quizStepElement}
|
|
</ThemeProvider>
|
|
);
|
|
}
|