fix: useYandexMetrics
This commit is contained in:
IlyaDoronin
parent
2ee1a72259
commit
21ee974680
@ -14,115 +14,133 @@ import { StartPageViewPublication } from "./StartPageViewPublication";
|
||||
import NextButton from "./tools/NextButton";
|
||||
import PrevButton from "./tools/PrevButton";
|
||||
import QuestionSelect from "./QuestionSelect";
|
||||
import {useYandexMetrica} from "@utils/hooks/useYandexMetrica.tsx";
|
||||
import { useYandexMetrics } from "@/utils/hooks/useYandexMetrics";
|
||||
|
||||
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 {
|
||||
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();
|
||||
useYandexMetrics(settings?.cfg?.yandexMetricNumber);
|
||||
|
||||
const isAnswer = answers.some(ans => ans.questionId === currentQuestion?.id);
|
||||
const isAnswer = answers.some(
|
||||
(ans) => ans.questionId === currentQuestion?.id
|
||||
);
|
||||
|
||||
const yandexMetricNumber = settings?.cfg?.yandexMetricNumber
|
||||
useYandexMetrica(yandexMetricNumber);
|
||||
useEffect(
|
||||
function setFaviconAndTitle() {
|
||||
if (!changeFaviconAndTitle) return;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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]
|
||||
);
|
||||
|
||||
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";
|
||||
|
||||
if (!currentQuestion) return (
|
||||
<ThemeProvider
|
||||
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
||||
>
|
||||
<Typography textAlign={"center"} mt="50px">Вопрос не выбран</Typography>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
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);
|
||||
}
|
||||
if (recentlyCompleted) throw new Error("Quiz already completed");
|
||||
if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
|
||||
currentQuizStep = "question";
|
||||
|
||||
if (!currentQuestion)
|
||||
return (
|
||||
<ThemeProvider
|
||||
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
||||
>
|
||||
{quizStepElement}
|
||||
</ThemeProvider>
|
||||
<ThemeProvider
|
||||
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
|
||||
>
|
||||
<Typography textAlign={"center"} mt="50px">
|
||||
Вопрос не выбран
|
||||
</Typography>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const useYandexMetrica = (yandexMetricNumber: number | undefined) => {
|
||||
useEffect(() => {
|
||||
if (yandexMetricNumber) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.innerHTML = `
|
||||
export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
|
||||
useEffect(() => {
|
||||
if (
|
||||
typeof yandexMetricNumber === "number" &&
|
||||
!Number.isNaN(yandexMetricNumber)
|
||||
) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.innerHTML = `
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
@ -19,11 +22,11 @@ export const useYandexMetrica = (yandexMetricNumber: number | undefined) => {
|
||||
webvisor:true
|
||||
});
|
||||
`;
|
||||
document.body.appendChild(script);
|
||||
document.body.appendChild(script);
|
||||
|
||||
const noscript = document.createElement("noscript");
|
||||
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
|
||||
document.body.appendChild(noscript);
|
||||
}
|
||||
}, [yandexMetricNumber]);
|
||||
const noscript = document.createElement("noscript");
|
||||
noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
|
||||
document.body.appendChild(noscript);
|
||||
}
|
||||
}, [yandexMetricNumber]);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user