use antifraud setting from quiz config
rename quiz settings context consumer hook
This commit is contained in:
parent
6c2e44ca66
commit
22b3682848
11
lib/api/hooks.ts
Normal file
11
lib/api/hooks.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
import { getQuizData } from "./quizRelase";
|
||||||
|
|
||||||
|
export function useQuizData(quizId: string) {
|
||||||
|
return useSWR(["quizData", quizId], (params) => getQuizData(params[1]), {
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
revalidateOnReconnect: false,
|
||||||
|
shouldRetryOnError: false,
|
||||||
|
refreshInterval: 0,
|
||||||
|
});
|
||||||
|
}
|
@ -1,30 +1,23 @@
|
|||||||
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
|
import { useQuizData } from "@/api/hooks";
|
||||||
import { ErrorBoundary } from "react-error-boundary";
|
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
|
||||||
import useSWR from "swr";
|
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
|
||||||
import { SnackbarProvider } from "notistack";
|
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||||
import moment from "moment";
|
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||||
import { Box, ScopedCssBaseline, CssBaseline, ThemeProvider } from "@mui/material";
|
import { QuizSettingsContext } from "@contexts/QuizDataContext";
|
||||||
|
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
||||||
|
import type { QuizSettings } from "@model/settingsData";
|
||||||
|
import { Box, CssBaseline, ScopedCssBaseline, ThemeProvider } from "@mui/material";
|
||||||
import { LocalizationProvider } from "@mui/x-date-pickers";
|
import { LocalizationProvider } from "@mui/x-date-pickers";
|
||||||
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
|
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
|
||||||
import { ruRU } from "@mui/x-date-pickers/locales";
|
import { ruRU } from "@mui/x-date-pickers/locales";
|
||||||
|
|
||||||
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
|
|
||||||
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
|
|
||||||
|
|
||||||
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
|
|
||||||
|
|
||||||
import { getQuizData } from "@/api/quizRelase";
|
|
||||||
|
|
||||||
import { QuizDataContext } from "@contexts/QuizDataContext";
|
|
||||||
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
|
||||||
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
|
|
||||||
|
|
||||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
|
||||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
|
||||||
import { handleComponentError } from "@utils/handleComponentError";
|
import { handleComponentError } from "@utils/handleComponentError";
|
||||||
import lightTheme from "@utils/themes/light";
|
import lightTheme from "@utils/themes/light";
|
||||||
|
import moment from "moment";
|
||||||
import type { QuizSettings } from "@model/settingsData";
|
import { SnackbarProvider } from "notistack";
|
||||||
|
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||||
|
import { ErrorBoundary } from "react-error-boundary";
|
||||||
|
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
|
||||||
|
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
|
||||||
|
|
||||||
moment.locale("ru");
|
moment.locale("ru");
|
||||||
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
|
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
|
||||||
@ -49,16 +42,7 @@ function QuizAnswererInner({
|
|||||||
const [quizViewStore] = useState(createQuizViewStore);
|
const [quizViewStore] = useState(createQuizViewStore);
|
||||||
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
|
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
|
||||||
const rootContainerRef = useRef<HTMLDivElement>(null);
|
const rootContainerRef = useRef<HTMLDivElement>(null);
|
||||||
const { data, error, isLoading } = useSWR(
|
const { data, error, isLoading } = useQuizData(quizId);
|
||||||
quizSettings ? null : ["quizData", quizId],
|
|
||||||
(params) => getQuizData(params[1]),
|
|
||||||
{
|
|
||||||
revalidateOnFocus: false,
|
|
||||||
revalidateOnReconnect: false,
|
|
||||||
shouldRetryOnError: false,
|
|
||||||
refreshInterval: 0,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const vkMetrics = useVkMetricsGoals(quizSettings?.settings.cfg.vkMetricsNumber);
|
const vkMetrics = useVkMetricsGoals(quizSettings?.settings.cfg.vkMetricsNumber);
|
||||||
const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber);
|
const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber);
|
||||||
|
|
||||||
@ -67,6 +51,7 @@ function QuizAnswererInner({
|
|||||||
vkMetrics.quizOpened();
|
vkMetrics.quizOpened();
|
||||||
yandexMetrics.quizOpened();
|
yandexMetrics.quizOpened();
|
||||||
}, 4000);
|
}, 4000);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
@ -88,6 +73,7 @@ function QuizAnswererInner({
|
|||||||
|
|
||||||
if (isLoading) return <LoadingSkeleton />;
|
if (isLoading) return <LoadingSkeleton />;
|
||||||
if (error) return <ApologyPage error={error} />;
|
if (error) return <ApologyPage error={error} />;
|
||||||
|
if (!data) return <LoadingSkeleton />;
|
||||||
|
|
||||||
quizSettings ??= data;
|
quizSettings ??= data;
|
||||||
if (!quizSettings) throw new Error("Quiz data is null");
|
if (!quizSettings) throw new Error("Quiz data is null");
|
||||||
@ -114,7 +100,7 @@ function QuizAnswererInner({
|
|||||||
return (
|
return (
|
||||||
<QuizViewContext.Provider value={quizViewStore}>
|
<QuizViewContext.Provider value={quizViewStore}>
|
||||||
<RootContainerWidthContext.Provider value={rootContainerWidth}>
|
<RootContainerWidthContext.Provider value={rootContainerWidth}>
|
||||||
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
|
<QuizSettingsContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
|
||||||
{disableGlobalCss ? (
|
{disableGlobalCss ? (
|
||||||
<ScopedCssBaseline
|
<ScopedCssBaseline
|
||||||
sx={{
|
sx={{
|
||||||
@ -128,7 +114,7 @@ function QuizAnswererInner({
|
|||||||
) : (
|
) : (
|
||||||
<CssBaseline>{quizContainer}</CssBaseline>
|
<CssBaseline>{quizContainer}</CssBaseline>
|
||||||
)}
|
)}
|
||||||
</QuizDataContext.Provider>
|
</QuizSettingsContext.Provider>
|
||||||
</RootContainerWidthContext.Provider>
|
</RootContainerWidthContext.Provider>
|
||||||
</QuizViewContext.Provider>
|
</QuizViewContext.Provider>
|
||||||
);
|
);
|
||||||
|
@ -8,7 +8,7 @@ import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inpu
|
|||||||
import { ContactTextBlock } from "./ContactTextBlock";
|
import { ContactTextBlock } from "./ContactTextBlock";
|
||||||
|
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { sendFC, SendFCParams } from "@api/quizRelase";
|
import { sendFC, SendFCParams } from "@api/quizRelase";
|
||||||
|
|
||||||
@ -32,7 +32,7 @@ type Props = {
|
|||||||
|
|
||||||
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { settings, questions, quizId, show_badge, preview } = useQuizData();
|
const { settings, questions, quizId, show_badge, preview } = useQuizSettings();
|
||||||
|
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext.ts";
|
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
|
||||||
import { useIMask } from "react-imask";
|
import { useIMask } from "react-imask";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
|
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
|
||||||
import { FC, useState } from "react";
|
import { FC, useState } from "react";
|
||||||
@ -21,7 +21,7 @@ const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
|||||||
export const CustomInput = ({ title, desc, Icon, onChange, isPhone }: InputProps) => {
|
export const CustomInput = ({ title, desc, Icon, onChange, isPhone }: InputProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useRootContainerSize() < 600;
|
const isMobile = useRootContainerSize() < 600;
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
|
const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
|
||||||
const { ref } = useIMask({ mask });
|
const { ref } = useIMask({ mask });
|
||||||
return (
|
return (
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { useQuizData } from "@contexts/QuizDataContext.ts";
|
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
|
||||||
import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
|
import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
|
||||||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
|
import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
|
||||||
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
|
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
|
||||||
@ -32,7 +32,7 @@ export const Inputs = ({
|
|||||||
adress,
|
adress,
|
||||||
setAdress,
|
setAdress,
|
||||||
}: InputsProps) => {
|
}: InputsProps) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
const FC = settings.cfg.formContact.fields;
|
const FC = settings.cfg.formContact.fields;
|
||||||
|
|
||||||
if (!FC) return null;
|
if (!FC) return null;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import { Box, Typography, useTheme } from "@mui/material";
|
import { Box, Typography, useTheme } from "@mui/material";
|
||||||
|
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import Stepper from "@ui_kit/Stepper";
|
import Stepper from "@ui_kit/Stepper";
|
||||||
|
|
||||||
@ -13,7 +13,7 @@ type FooterProps = {
|
|||||||
|
|
||||||
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { questions, settings } = useQuizData();
|
const { questions, settings } = useQuizSettings();
|
||||||
const questionsAmount = questions.filter(({ type }) => type !== "result").length;
|
const questionsAmount = questions.filter(({ type }) => type !== "result").length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -15,7 +15,7 @@ import { Varimg } from "./questions/Varimg";
|
|||||||
|
|
||||||
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
|
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||||
|
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||||||
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
||||||
import { notReachable } from "@utils/notReachable";
|
import { notReachable } from "@utils/notReachable";
|
||||||
@ -40,7 +40,7 @@ export const Question = ({
|
|||||||
questionSelect,
|
questionSelect,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { settings, show_badge } = useQuizData();
|
const { settings, show_badge } = useQuizSettings();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { useQuizData } from "@/contexts/QuizDataContext";
|
import { useQuizSettings } from "@/contexts/QuizDataContext";
|
||||||
import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared";
|
import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared";
|
||||||
import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material";
|
import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material";
|
||||||
|
|
||||||
@ -9,7 +9,7 @@ interface Props {
|
|||||||
|
|
||||||
export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) {
|
export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { questions, preview } = useQuizData();
|
const { questions, preview } = useQuizSettings();
|
||||||
|
|
||||||
if (!preview) return null;
|
if (!preview) return null;
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { Box, Button, Link, Typography, useTheme } from "@mui/material";
|
|||||||
import { useQuizViewStore } from "@/stores/quizView";
|
import { useQuizViewStore } from "@/stores/quizView";
|
||||||
|
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
||||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||||
@ -25,7 +25,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useRootContainerSize() < 650;
|
const isMobile = useRootContainerSize() < 650;
|
||||||
const isTablet = useRootContainerSize() < 1000;
|
const isTablet = useRootContainerSize() < 1000;
|
||||||
const { settings, show_badge, quizId } = useQuizData();
|
const { settings, show_badge, quizId } = useQuizSettings();
|
||||||
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
|
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
|
||||||
const spec = settings.cfg.spec;
|
const spec = settings.cfg.spec;
|
||||||
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
|
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Box } from "@mui/material";
|
import { Box } from "@mui/material";
|
||||||
|
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { notReachable } from "@utils/notReachable";
|
import { notReachable } from "@utils/notReachable";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
@ -22,7 +22,7 @@ type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
|
|||||||
const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
|
const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
|
||||||
const size = useRootContainerSize();
|
const size = useRootContainerSize();
|
||||||
const isTablet = size >= 700 && size < 1100;
|
const isTablet = size >= 700 && size < 1100;
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -169,7 +169,7 @@ const ExpandedLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundB
|
|||||||
|
|
||||||
const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
|
const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
|
||||||
const isTablet = useRootContainerSize() < 1100;
|
const isTablet = useRootContainerSize() < 1100;
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Box } from "@mui/material";
|
import { Box } from "@mui/material";
|
||||||
|
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { notReachable } from "@utils/notReachable";
|
import { notReachable } from "@utils/notReachable";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
@ -18,7 +18,7 @@ type StartPageMobileProps = {
|
|||||||
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
|
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
|
||||||
|
|
||||||
const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
|
const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -161,7 +161,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
|
|||||||
);
|
);
|
||||||
|
|
||||||
const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
|
const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -2,7 +2,7 @@ import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui
|
|||||||
|
|
||||||
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
|
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
|
||||||
|
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
import { useUADevice } from "@utils/hooks/useUADevice";
|
import { useUADevice } from "@utils/hooks/useUADevice";
|
||||||
@ -19,7 +19,7 @@ import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
|
|||||||
|
|
||||||
export const StartPageViewPublication = () => {
|
export const StartPageViewPublication = () => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { settings, show_badge, quizId, questions } = useQuizData();
|
const { settings, show_badge, quizId, questions } = useQuizSettings();
|
||||||
const { isMobileDevice } = useUADevice();
|
const { isMobileDevice } = useUADevice();
|
||||||
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
|
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { ThemeProvider, Typography } from "@mui/material";
|
import { ThemeProvider, Typography } from "@mui/material";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
||||||
@ -18,7 +18,7 @@ import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
|
|||||||
import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
|
import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
|
||||||
|
|
||||||
export default function ViewPublicationPage() {
|
export default function ViewPublicationPage() {
|
||||||
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizData();
|
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizSettings();
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
|
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
|
||||||
const {
|
const {
|
||||||
@ -50,7 +50,7 @@ export default function ViewPublicationPage() {
|
|||||||
[changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name]
|
[changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name]
|
||||||
);
|
);
|
||||||
|
|
||||||
if (recentlyCompleted) throw new Error("Quiz already completed");
|
if (settings.cfg.antifraud && recentlyCompleted) throw new Error("Quiz already completed");
|
||||||
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
|
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
|
||||||
|
|
||||||
if (!currentQuestion)
|
if (!currentQuestion)
|
||||||
|
@ -6,7 +6,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@/stores/quizView";
|
import { useQuizViewStore } from "@/stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ type DateProps = {
|
|||||||
|
|
||||||
export const Date = ({ currentQuestion }: DateProps) => {
|
export const Date = ({ currentQuestion }: DateProps) => {
|
||||||
const [isSending, setIsSending] = useState<boolean>(false);
|
const [isSending, setIsSending] = useState<boolean>(false);
|
||||||
const { settings, quizId, preview } = useQuizData();
|
const { settings, quizId, preview } = useQuizSettings();
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
|
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
import RadioCheck from "@ui_kit/RadioCheck";
|
import RadioCheck from "@ui_kit/RadioCheck";
|
||||||
@ -25,7 +25,7 @@ type EmojiVariantProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const EmojiVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: EmojiVariantProps) => {
|
export const EmojiVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: EmojiVariantProps) => {
|
||||||
const { quizId, settings, preview } = useQuizData();
|
const { quizId, settings, preview } = useQuizSettings();
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -3,7 +3,7 @@ import { Box, ButtonBase, Skeleton, Typography, useTheme } from "@mui/material";
|
|||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
|
|
||||||
import { sendAnswer, sendFile } from "@api/quizRelase";
|
import { sendAnswer, sendFile } from "@api/quizRelase";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ type UploadFileProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const UploadFile = ({ currentQuestion, setModalWarningType, isSending, setIsSending }: UploadFileProps) => {
|
export const UploadFile = ({ currentQuestion, setModalWarningType, isSending, setIsSending }: UploadFileProps) => {
|
||||||
const { quizId, preview } = useQuizData();
|
const { quizId, preview } = useQuizSettings();
|
||||||
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState<boolean>(false);
|
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState<boolean>(false);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
|
|
||||||
import CloseBold from "@icons/CloseBold";
|
import CloseBold from "@icons/CloseBold";
|
||||||
@ -14,7 +14,7 @@ type UploadedFileProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
|
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
|
||||||
const { quizId, preview } = useQuizData();
|
const { quizId, preview } = useQuizSettings();
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
import RadioCheck from "@ui_kit/RadioCheck";
|
import RadioCheck from "@ui_kit/RadioCheck";
|
||||||
@ -22,8 +22,7 @@ type ImagesProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => {
|
export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => {
|
||||||
const { quizId, preview } = useQuizData();
|
const { settings, quizId, preview } = useQuizSettings();
|
||||||
const { settings } = useQuizData();
|
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
|
const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -11,7 +11,7 @@ import { sendAnswer } from "@api/quizRelase";
|
|||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import type { QuizQuestionNumber } from "@model/questionTypes/number";
|
import type { QuizQuestionNumber } from "@model/questionTypes/number";
|
||||||
|
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
import type { ChangeEvent, SyntheticEvent } from "react";
|
import type { ChangeEvent, SyntheticEvent } from "react";
|
||||||
@ -28,7 +28,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
|||||||
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
|
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
|
||||||
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
|
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
|
||||||
const [reversedMaxRange, setReversedMaxRange] = useState<string>("100000000000");
|
const [reversedMaxRange, setReversedMaxRange] = useState<string>("100000000000");
|
||||||
const { settings, quizId, preview } = useQuizData();
|
const { settings, quizId, preview } = useQuizSettings();
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -5,7 +5,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import FlagIcon from "@icons/questionsPage/FlagIcon";
|
import FlagIcon from "@icons/questionsPage/FlagIcon";
|
||||||
import StarIconMini from "@icons/questionsPage/StarIconMini";
|
import StarIconMini from "@icons/questionsPage/StarIconMini";
|
||||||
@ -54,7 +54,7 @@ type RatingProps = {
|
|||||||
|
|
||||||
export const Rating = ({ currentQuestion }: RatingProps) => {
|
export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||||
const [isSending, setIsSending] = useState<boolean>(false);
|
const [isSending, setIsSending] = useState<boolean>(false);
|
||||||
const { quizId, preview } = useQuizData();
|
const { quizId, preview } = useQuizSettings();
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -6,7 +6,7 @@ import { Select as SelectComponent } from "@/components/ViewPublicationPage/tool
|
|||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ type SelectProps = {
|
|||||||
|
|
||||||
export const Select = ({ currentQuestion }: SelectProps) => {
|
export const Select = ({ currentQuestion }: SelectProps) => {
|
||||||
const [isSending, setIsSending] = useState<boolean>(false);
|
const [isSending, setIsSending] = useState<boolean>(false);
|
||||||
const { quizId, settings, preview } = useQuizData();
|
const { quizId, settings, preview } = useQuizSettings();
|
||||||
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -3,7 +3,7 @@ import { Box, Typography, useTheme } from "@mui/material";
|
|||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||||||
|
|
||||||
import { Answer, useQuizViewStore } from "@stores/quizView";
|
import { Answer, useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
@ -19,7 +19,7 @@ interface TextNormalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => {
|
export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const isMobile = useRootContainerSize() < 650;
|
const isMobile = useRootContainerSize() < 650;
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
||||||
|
|
||||||
import { Answer, useQuizViewStore } from "@stores/quizView";
|
import { Answer, useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
@ -46,7 +46,7 @@ interface TextSpecialProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const TextSpecial = ({ currentQuestion, answer, inputHC, stepNumber }: TextSpecialProps) => {
|
export const TextSpecial = ({ currentQuestion, answer, inputHC, stepNumber }: TextSpecialProps) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
const { updateAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer } = useQuizViewStore((state) => state);
|
||||||
const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal;
|
const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal;
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
@ -7,7 +7,7 @@ import { TextNormal } from "./TextNormal";
|
|||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import type { QuizQuestionText } from "@model/questionTypes/text";
|
import type { QuizQuestionText } from "@model/questionTypes/text";
|
||||||
|
|
||||||
@ -18,8 +18,7 @@ type TextProps = {
|
|||||||
|
|
||||||
export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
|
export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
|
||||||
const [isSending, setIsSending] = useState<boolean>(false);
|
const [isSending, setIsSending] = useState<boolean>(false);
|
||||||
const { settings, preview } = useQuizData();
|
const { settings, preview, quizId } = useQuizSettings();
|
||||||
const { quizId } = useQuizData();
|
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
@ -34,7 +34,7 @@ export const VariantItem = ({
|
|||||||
isSending: boolean;
|
isSending: boolean;
|
||||||
setIsSending: (a: boolean) => void;
|
setIsSending: (a: boolean) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { settings, quizId, preview } = useQuizData();
|
const { settings, quizId, preview } = useQuizSettings();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
|
|
||||||
import { sendAnswer } from "@api/quizRelase";
|
import { sendAnswer } from "@api/quizRelase";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
|
|
||||||
@ -24,7 +24,7 @@ type VarimgVariantProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const VarimgVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: VarimgVariantProps) => {
|
export const VarimgVariant = ({ currentQuestion, variant, index, isSending, setIsSending }: VarimgVariantProps) => {
|
||||||
const { settings, quizId, preview } = useQuizData();
|
const { settings, quizId, preview } = useQuizSettings();
|
||||||
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
||||||
const answers = useQuizViewStore((state) => state.answers);
|
const answers = useQuizViewStore((state) => state.answers);
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Button, useTheme } from "@mui/material";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
import { Button } from "@mui/material";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isNextButtonEnabled: boolean;
|
isNextButtonEnabled: boolean;
|
||||||
@ -8,8 +8,8 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
|
export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
|
||||||
const theme = useTheme();
|
const { settings } = useQuizSettings();
|
||||||
const { settings } = useQuizData();
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
disabled={!isNextButtonEnabled}
|
disabled={!isNextButtonEnabled}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Button, useTheme } from "@mui/material";
|
import { Button, useTheme } from "@mui/material";
|
||||||
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
||||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isPreviousButtonEnabled: boolean;
|
isPreviousButtonEnabled: boolean;
|
||||||
@ -10,7 +10,7 @@ interface Props {
|
|||||||
|
|
||||||
export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
|
export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizSettings();
|
||||||
const isMobileMini = useRootContainerSize() < 382;
|
const isMobileMini = useRootContainerSize() < 382;
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
|
@ -1,17 +1,18 @@
|
|||||||
import { QuizSettings } from "@model/settingsData";
|
import { QuizSettings } from "@model/settingsData";
|
||||||
import { createContext, useContext } from "react";
|
import { createContext, useContext } from "react";
|
||||||
|
|
||||||
type QuizData = QuizSettings & {
|
export const QuizSettingsContext = createContext<
|
||||||
quizId: string;
|
| (QuizSettings & {
|
||||||
preview: boolean;
|
quizId: string;
|
||||||
changeFaviconAndTitle: boolean;
|
preview: boolean;
|
||||||
};
|
changeFaviconAndTitle: boolean;
|
||||||
|
})
|
||||||
export const QuizDataContext = createContext<QuizData | null>(null);
|
| null
|
||||||
|
>(null);
|
||||||
export const useQuizData = () => {
|
|
||||||
const quizData = useContext(QuizDataContext);
|
export const useQuizSettings = () => {
|
||||||
if (quizData === null) throw new Error("QuizData context is null");
|
const quizSettings = useContext(QuizSettingsContext);
|
||||||
|
if (quizSettings === null) throw new Error("QuizSettings context is null");
|
||||||
return quizData;
|
|
||||||
|
return quizSettings;
|
||||||
};
|
};
|
||||||
|
@ -110,6 +110,8 @@ export interface QuizConfig {
|
|||||||
law?: string;
|
law?: string;
|
||||||
};
|
};
|
||||||
meta: string;
|
meta: string;
|
||||||
|
antifraud: boolean;
|
||||||
|
showfc: boolean;
|
||||||
yandexMetricsNumber: number | undefined;
|
yandexMetricsNumber: number | undefined;
|
||||||
vkMetricsNumber: number | undefined;
|
vkMetricsNumber: number | undefined;
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
||||||
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
|
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
|
||||||
import { useQuizData } from "@contexts/QuizDataContext";
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
||||||
|
|
||||||
import { useQuizViewStore } from "@stores/quizView";
|
import { useQuizViewStore } from "@stores/quizView";
|
||||||
|
|
||||||
@ -11,7 +11,7 @@ import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
|
|||||||
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
|
||||||
|
|
||||||
export function useQuestionFlowControl() {
|
export function useQuestionFlowControl() {
|
||||||
const { settings, questions } = useQuizData();
|
const { settings, questions } = useQuizSettings();
|
||||||
const sortedQuestions = useMemo(() => {
|
const sortedQuestions = useMemo(() => {
|
||||||
return [...questions].sort((a, b) => a.page - b.page);
|
return [...questions].sort((a, b) => a.page - b.page);
|
||||||
}, [questions]);
|
}, [questions]);
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { useQuizData } from "@/api/hooks";
|
||||||
import { BannerWidgetComponentProps } from "@/model/widget/banner";
|
import { BannerWidgetComponentProps } from "@/model/widget/banner";
|
||||||
import lightTheme from "@/utils/themes/light";
|
import lightTheme from "@/utils/themes/light";
|
||||||
import { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material";
|
import { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material";
|
||||||
@ -6,7 +7,6 @@ import { createPortal } from "react-dom";
|
|||||||
import BannerIcon from "../shared/BannerIcon";
|
import BannerIcon from "../shared/BannerIcon";
|
||||||
import QuizDialog from "../shared/QuizDialog";
|
import QuizDialog from "../shared/QuizDialog";
|
||||||
import RunningStripe from "../shared/RunningStripe";
|
import RunningStripe from "../shared/RunningStripe";
|
||||||
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
|
|
||||||
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
|
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
|
||||||
|
|
||||||
const PADDING = 10;
|
const PADDING = 10;
|
||||||
@ -35,7 +35,7 @@ export default function QuizBanner({
|
|||||||
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
||||||
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
||||||
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
|
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
|
||||||
const isQuizCompleted = useQuizCompletionStatus(quizId);
|
const { data: quizData } = useQuizData(quizId);
|
||||||
const preventQuizAutoShowRef = useRef<boolean>(false);
|
const preventQuizAutoShowRef = useRef<boolean>(false);
|
||||||
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
||||||
|
|
||||||
@ -81,6 +81,10 @@ export default function QuizBanner({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (hideOnMobile && isMobile) return null;
|
if (hideOnMobile && isMobile) return null;
|
||||||
|
if (!quizData) return null;
|
||||||
|
|
||||||
|
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||||
|
const showButtonFlash = isQuizCompleted && isFlashEnabled;
|
||||||
|
|
||||||
return createPortal(
|
return createPortal(
|
||||||
<ThemeProvider theme={lightTheme}>
|
<ThemeProvider theme={lightTheme}>
|
||||||
@ -171,7 +175,7 @@ export default function QuizBanner({
|
|||||||
{quizHeaderText}
|
{quizHeaderText}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
|
{showButtonFlash && <RunningStripe />}
|
||||||
</Button>
|
</Button>
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={onWidgetClose}
|
onClick={onWidgetClose}
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
|
import { useQuizData } from "@/api/hooks";
|
||||||
import { ButtonWidgetComponentProps } from "@/model/widget/button";
|
import { ButtonWidgetComponentProps } from "@/model/widget/button";
|
||||||
import lightTheme from "@/utils/themes/light";
|
import lightTheme from "@/utils/themes/light";
|
||||||
import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
|
import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import QuizDialog from "../shared/QuizDialog";
|
import QuizDialog from "../shared/QuizDialog";
|
||||||
import RunningStripe from "../shared/RunningStripe";
|
import RunningStripe from "../shared/RunningStripe";
|
||||||
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
|
|
||||||
|
|
||||||
export default function OpenQuizButton({
|
export default function OpenQuizButton({
|
||||||
quizId,
|
quizId,
|
||||||
@ -23,7 +23,7 @@ export default function OpenQuizButton({
|
|||||||
}: ButtonWidgetComponentProps) {
|
}: ButtonWidgetComponentProps) {
|
||||||
const isMobile = useMediaQuery("(max-width: 600px)");
|
const isMobile = useMediaQuery("(max-width: 600px)");
|
||||||
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
||||||
const isQuizCompleted = useQuizCompletionStatus(quizId);
|
const { data: quizData } = useQuizData(quizId);
|
||||||
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
||||||
const preventQuizAutoShowRef = useRef<boolean>(false);
|
const preventQuizAutoShowRef = useRef<boolean>(false);
|
||||||
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
||||||
@ -70,6 +70,10 @@ export default function OpenQuizButton({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (hideOnMobile && isMobile) return null;
|
if (hideOnMobile && isMobile) return null;
|
||||||
|
if (!quizData) return null;
|
||||||
|
|
||||||
|
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||||
|
const showButtonFlash = isQuizCompleted && isFlashEnabled;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={lightTheme}>
|
<ThemeProvider theme={lightTheme}>
|
||||||
@ -108,7 +112,7 @@ export default function OpenQuizButton({
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
{buttonText}
|
{buttonText}
|
||||||
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
|
{showButtonFlash && <RunningStripe />}
|
||||||
</Button>
|
</Button>
|
||||||
<QuizDialog
|
<QuizDialog
|
||||||
open={isQuizShown}
|
open={isQuizShown}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
|
import { useQuizData } from "@/api/hooks";
|
||||||
|
import { PopupWidgetComponentProps } from "@/model/widget/popup";
|
||||||
|
import { useMediaQuery } from "@mui/material";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import QuizDialog from "../shared/QuizDialog";
|
import QuizDialog from "../shared/QuizDialog";
|
||||||
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
|
|
||||||
import { useMediaQuery } from "@mui/material";
|
|
||||||
import { PopupWidgetComponentProps } from "@/model/widget/popup";
|
|
||||||
|
|
||||||
export default function QuizPopup({
|
export default function QuizPopup({
|
||||||
quizId,
|
quizId,
|
||||||
@ -14,8 +14,8 @@ export default function QuizPopup({
|
|||||||
}: PopupWidgetComponentProps) {
|
}: PopupWidgetComponentProps) {
|
||||||
const initialIsQuizShown = autoShowQuizTime !== null || openOnLeaveAttempt ? false : true;
|
const initialIsQuizShown = autoShowQuizTime !== null || openOnLeaveAttempt ? false : true;
|
||||||
|
|
||||||
|
const { data: quizData } = useQuizData(quizId);
|
||||||
const [isQuizShown, setIsQuizShown] = useState<boolean>(initialIsQuizShown);
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(initialIsQuizShown);
|
||||||
const isQuizCompleted = useQuizCompletionStatus(quizId);
|
|
||||||
const isMobile = useMediaQuery("(max-width: 600px)");
|
const isMobile = useMediaQuery("(max-width: 600px)");
|
||||||
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
|
||||||
|
|
||||||
@ -54,6 +54,9 @@ export default function QuizPopup({
|
|||||||
[openOnLeaveAttempt]
|
[openOnLeaveAttempt]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (!quizData) return null;
|
||||||
|
|
||||||
|
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||||
if (isQuizCompleted) return null;
|
if (isQuizCompleted) return null;
|
||||||
if (hideOnMobile && isMobile) return null;
|
if (hideOnMobile && isMobile) return null;
|
||||||
|
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
export function useQuizCompletionStatus(quizId: string): boolean {
|
|
||||||
return useMemo(() => {
|
|
||||||
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
|
||||||
|
|
||||||
if (typeof sessions[quizId] === "number" && Date.now() - sessions[quizId] < 86400000) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}, [quizId]);
|
|
||||||
}
|
|
@ -1,3 +1,5 @@
|
|||||||
|
import { useQuizData } from "@/api/hooks";
|
||||||
|
import { SideWidgetComponentProps } from "@/model/widget/side";
|
||||||
import lightTheme from "@/utils/themes/light";
|
import lightTheme from "@/utils/themes/light";
|
||||||
import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
|
import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
@ -5,8 +7,6 @@ import { createPortal } from "react-dom";
|
|||||||
import QuizDialog from "../shared/QuizDialog";
|
import QuizDialog from "../shared/QuizDialog";
|
||||||
import RunningStripe from "../shared/RunningStripe";
|
import RunningStripe from "../shared/RunningStripe";
|
||||||
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
|
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
|
||||||
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
|
|
||||||
import { SideWidgetComponentProps } from "@/model/widget/side";
|
|
||||||
|
|
||||||
const PADDING = 10;
|
const PADDING = 10;
|
||||||
const WIDGET_DEFAULT_WIDTH = "600px";
|
const WIDGET_DEFAULT_WIDTH = "600px";
|
||||||
@ -26,7 +26,7 @@ export default function QuizSideButton({
|
|||||||
}: SideWidgetComponentProps) {
|
}: SideWidgetComponentProps) {
|
||||||
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
||||||
const isMobile = useMediaQuery("(max-width: 600px)");
|
const isMobile = useMediaQuery("(max-width: 600px)");
|
||||||
const isQuizCompleted = useQuizCompletionStatus(quizId);
|
const { data: quizData } = useQuizData(quizId);
|
||||||
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
|
||||||
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
|
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
|
||||||
const preventQuizAutoShowRef = useRef<boolean>(false);
|
const preventQuizAutoShowRef = useRef<boolean>(false);
|
||||||
@ -53,6 +53,10 @@ export default function QuizSideButton({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (hideOnMobile && isMobile) return null;
|
if (hideOnMobile && isMobile) return null;
|
||||||
|
if (!quizData) return null;
|
||||||
|
|
||||||
|
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||||
|
const showButtonFlash = isQuizCompleted && isFlashEnabled;
|
||||||
|
|
||||||
return createPortal(
|
return createPortal(
|
||||||
<ThemeProvider theme={lightTheme}>
|
<ThemeProvider theme={lightTheme}>
|
||||||
@ -113,7 +117,7 @@ export default function QuizSideButton({
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
Пройти квиз
|
Пройти квиз
|
||||||
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
|
{showButtonFlash && <RunningStripe />}
|
||||||
</Button>
|
</Button>
|
||||||
</Fade>
|
</Fade>
|
||||||
</ThemeProvider>,
|
</ThemeProvider>,
|
||||||
|
Loading…
Reference in New Issue
Block a user