119 lines
4.6 KiB
TypeScript
119 lines
4.6 KiB
TypeScript
import { sendAnswer } from "@api/quizRelase";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
import { ThemeProvider } from "@mui/material";
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
|
import { notReachable } from "@utils/notReachable";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
import "https://markknol.github.io/console-log-viewer/console-log-viewer.js";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { ReactElement, useEffect } from "react";
|
|
import { ContactForm } from "./ContactForm";
|
|
import { Question } from "./Question";
|
|
import { ResultForm } from "./ResultForm";
|
|
import { StartPageViewPublication } from "./StartPageViewPublication";
|
|
import NextButton from "./tools/NextButton";
|
|
import PrevButton from "./tools/PrevButton";
|
|
import QuestionSelect from "./QuestionSelect";
|
|
|
|
export default function ViewPublicationPage() {
|
|
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizData();
|
|
const answers = useQuizViewStore(state => state.answers);
|
|
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
|
|
const {
|
|
currentQuestion,
|
|
currentQuestionStepNumber,
|
|
isNextButtonEnabled,
|
|
isPreviousButtonEnabled,
|
|
moveToPrevQuestion,
|
|
moveToNextQuestion,
|
|
showResultAfterContactForm,
|
|
setQuestion,
|
|
} = useQuestionFlowControl();
|
|
|
|
const isAnswer = answers.some(ans => ans.questionId === currentQuestion.id);
|
|
|
|
useEffect(function setFaviconAndTitle() {
|
|
if (!changeFaviconAndTitle) return;
|
|
|
|
const link = document.querySelector('link[rel="icon"]');
|
|
if (link && settings.cfg.startpage.favIcon) {
|
|
link.setAttribute("href", settings.cfg.startpage.favIcon);
|
|
}
|
|
|
|
document.title = settings.name;
|
|
}, [changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name]);
|
|
|
|
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={async () => {
|
|
if (!isAnswer) {
|
|
try {
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: "",
|
|
qid: quizId,
|
|
preview
|
|
});
|
|
} catch (e) {
|
|
enqueueSnackbar("ответ не был засчитан");
|
|
}
|
|
}
|
|
moveToNextQuestion();
|
|
}}
|
|
/>
|
|
}
|
|
questionSelect={
|
|
<QuestionSelect
|
|
selectedQuestion={currentQuestion}
|
|
setQuestion={setQuestion}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
break;
|
|
}
|
|
case "contactform": {
|
|
quizStepElement = (
|
|
<ContactForm
|
|
currentQuestion={currentQuestion}
|
|
onShowResult={showResultAfterContactForm}
|
|
/>
|
|
);
|
|
break;
|
|
}
|
|
default:
|
|
notReachable(currentQuizStep);
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider
|
|
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
|
>
|
|
{quizStepElement}
|
|
</ThemeProvider>
|
|
);
|
|
}
|