use antifraud setting from quiz config

rename quiz settings context consumer hook
This commit is contained in:
nflnkr 2024-05-31 20:56:17 +03:00
parent 6c2e44ca66
commit 22b3682848
36 changed files with 135 additions and 135 deletions

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 { ErrorBoundary } from "react-error-boundary";
import useSWR from "swr";
import { SnackbarProvider } from "notistack";
import moment from "moment";
import { Box, ScopedCssBaseline, CssBaseline, ThemeProvider } from "@mui/material";
import { useQuizData } from "@/api/hooks";
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
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 { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
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 lightTheme from "@utils/themes/light";
import type { QuizSettings } from "@model/settingsData";
import moment from "moment";
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");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
@ -49,16 +42,7 @@ function QuizAnswererInner({
const [quizViewStore] = useState(createQuizViewStore);
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
const rootContainerRef = useRef<HTMLDivElement>(null);
const { data, error, isLoading } = useSWR(
quizSettings ? null : ["quizData", quizId],
(params) => getQuizData(params[1]),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
}
);
const { data, error, isLoading } = useQuizData(quizId);
const vkMetrics = useVkMetricsGoals(quizSettings?.settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber);
@ -67,6 +51,7 @@ function QuizAnswererInner({
vkMetrics.quizOpened();
yandexMetrics.quizOpened();
}, 4000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useLayoutEffect(() => {
@ -88,6 +73,7 @@ function QuizAnswererInner({
if (isLoading) return <LoadingSkeleton />;
if (error) return <ApologyPage error={error} />;
if (!data) return <LoadingSkeleton />;
quizSettings ??= data;
if (!quizSettings) throw new Error("Quiz data is null");
@ -114,7 +100,7 @@ function QuizAnswererInner({
return (
<QuizViewContext.Provider value={quizViewStore}>
<RootContainerWidthContext.Provider value={rootContainerWidth}>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
<QuizSettingsContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
{disableGlobalCss ? (
<ScopedCssBaseline
sx={{
@ -128,7 +114,7 @@ function QuizAnswererInner({
) : (
<CssBaseline>{quizContainer}</CssBaseline>
)}
</QuizDataContext.Provider>
</QuizSettingsContext.Provider>
</RootContainerWidthContext.Provider>
</QuizViewContext.Provider>
);

@ -8,7 +8,7 @@ import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inpu
import { ContactTextBlock } from "./ContactTextBlock";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { sendFC, SendFCParams } from "@api/quizRelase";
@ -32,7 +32,7 @@ type Props = {
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
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 [name, setName] = useState("");

@ -1,6 +1,6 @@
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
import { useQuizData } from "@contexts/QuizDataContext.ts";
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import { useIMask } from "react-imask";
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
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) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 600;
const { settings } = useQuizData();
const { settings } = useQuizSettings();
const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
const { ref } = useIMask({ mask });
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 EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
@ -32,7 +32,7 @@ export const Inputs = ({
adress,
setAdress,
}: InputsProps) => {
const { settings } = useQuizData();
const { settings } = useQuizSettings();
const FC = settings.cfg.formContact.fields;
if (!FC) return null;

@ -1,7 +1,7 @@
import { ReactNode } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import Stepper from "@ui_kit/Stepper";
@ -13,7 +13,7 @@ type FooterProps = {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme();
const { questions, settings } = useQuizData();
const { questions, settings } = useQuizSettings();
const questionsAmount = questions.filter(({ type }) => type !== "result").length;
return (

@ -15,7 +15,7 @@ import { Varimg } from "./questions/Varimg";
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { notReachable } from "@utils/notReachable";
@ -40,7 +40,7 @@ export const Question = ({
questionSelect,
}: Props) => {
const theme = useTheme();
const { settings, show_badge } = useQuizData();
const { settings, show_badge } = useQuizSettings();
return (
<Box

@ -1,4 +1,4 @@
import { useQuizData } from "@/contexts/QuizDataContext";
import { useQuizSettings } from "@/contexts/QuizDataContext";
import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared";
import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material";
@ -9,7 +9,7 @@ interface Props {
export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) {
const theme = useTheme();
const { questions, preview } = useQuizData();
const { questions, preview } = useQuizSettings();
if (!preview) return null;

@ -4,7 +4,7 @@ import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@/stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
@ -25,7 +25,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge, quizId } = useQuizData();
const { settings, show_badge, quizId } = useQuizSettings();
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
const spec = settings.cfg.spec;
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);

@ -1,7 +1,7 @@
import { Box } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -22,7 +22,7 @@ type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100;
const { settings } = useQuizData();
const { settings } = useQuizSettings();
return (
<Box
@ -169,7 +169,7 @@ const ExpandedLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundB
const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData();
const { settings } = useQuizSettings();
return (
<Box
sx={{

@ -1,6 +1,6 @@
import { Box } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -18,7 +18,7 @@ type StartPageMobileProps = {
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
const { settings } = useQuizData();
const { settings } = useQuizSettings();
return (
<Box
@ -161,7 +161,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
);
const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: MobileLayoutProps) => {
const { settings } = useQuizData();
const { settings } = useQuizSettings();
return (
<Box
sx={{

@ -2,7 +2,7 @@ import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useUADevice } from "@utils/hooks/useUADevice";
@ -19,7 +19,7 @@ import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings, show_badge, quizId, questions } = useQuizData();
const { settings, show_badge, quizId, questions } = useQuizSettings();
const { isMobileDevice } = useUADevice();
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);

@ -1,5 +1,5 @@
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { ThemeProvider, Typography } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
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";
export default function ViewPublicationPage() {
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizData();
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers);
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
const {
@ -50,7 +50,7 @@ export default function ViewPublicationPage() {
[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 (!currentQuestion)

@ -6,7 +6,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@/stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -21,7 +21,7 @@ type DateProps = {
export const Date = ({ currentQuestion }: DateProps) => {
const [isSending, setIsSending] = useState<boolean>(false);
const { settings, quizId, preview } = useQuizData();
const { settings, quizId, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers);
const { updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();

@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import RadioCheck from "@ui_kit/RadioCheck";
@ -25,7 +25,7 @@ type 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 { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();

@ -3,7 +3,7 @@ import { Box, ButtonBase, Skeleton, Typography, useTheme } from "@mui/material";
import { enqueueSnackbar } from "notistack";
import { sendAnswer, sendFile } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizViewStore } from "@stores/quizView";
@ -27,7 +27,7 @@ type UploadFileProps = {
};
export const UploadFile = ({ currentQuestion, setModalWarningType, isSending, setIsSending }: UploadFileProps) => {
const { quizId, preview } = useQuizData();
const { quizId, preview } = useQuizSettings();
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState<boolean>(false);
const theme = useTheme();
const answers = useQuizViewStore((state) => state.answers);

@ -1,7 +1,7 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useQuizViewStore } from "@stores/quizView";
import CloseBold from "@icons/CloseBold";
@ -14,7 +14,7 @@ type UploadedFileProps = {
};
export const UploadedFile = ({ currentQuestion, setIsSending }: UploadedFileProps) => {
const { quizId, preview } = useQuizData();
const { quizId, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers);
const { updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import RadioCheck from "@ui_kit/RadioCheck";
@ -22,8 +22,7 @@ type ImagesProps = {
};
export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => {
const { quizId, preview } = useQuizData();
const { settings } = useQuizData();
const { settings, quizId, preview } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers);
const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
const theme = useTheme();

@ -11,7 +11,7 @@ import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
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 type { ChangeEvent, SyntheticEvent } from "react";
@ -28,7 +28,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
const [reversedMaxRange, setReversedMaxRange] = useState<string>("100000000000");
const { settings, quizId, preview } = useQuizData();
const { settings, quizId, preview } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme();

@ -5,7 +5,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import FlagIcon from "@icons/questionsPage/FlagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini";
@ -54,7 +54,7 @@ type RatingProps = {
export const Rating = ({ currentQuestion }: RatingProps) => {
const [isSending, setIsSending] = useState<boolean>(false);
const { quizId, preview } = useQuizData();
const { quizId, preview } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme();

@ -6,7 +6,7 @@ import { Select as SelectComponent } from "@/components/ViewPublicationPage/tool
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -18,7 +18,7 @@ type SelectProps = {
export const Select = ({ currentQuestion }: SelectProps) => {
const [isSending, setIsSending] = useState<boolean>(false);
const { quizId, settings, preview } = useQuizData();
const { quizId, settings, preview } = useQuizSettings();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
const answers = useQuizViewStore((state) => state.answers);
const theme = useTheme();

@ -3,7 +3,7 @@ import { Box, Typography, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import { Answer, useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -19,7 +19,7 @@ interface TextNormalProps {
}
export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => {
const { settings } = useQuizData();
const { settings } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state);
const isMobile = useRootContainerSize() < 650;
const theme = useTheme();

@ -1,7 +1,7 @@
import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { Answer, useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -46,7 +46,7 @@ interface TextSpecialProps {
}
export const TextSpecial = ({ currentQuestion, answer, inputHC, stepNumber }: TextSpecialProps) => {
const { settings } = useQuizData();
const { settings } = useQuizSettings();
const { updateAnswer } = useQuizViewStore((state) => state);
const isHorizontal = ORIENTATION[Number(stepNumber) - 1].horizontal;
const theme = useTheme();

@ -7,7 +7,7 @@ import { TextNormal } from "./TextNormal";
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import type { QuizQuestionText } from "@model/questionTypes/text";
@ -18,8 +18,7 @@ type TextProps = {
export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
const [isSending, setIsSending] = useState<boolean>(false);
const { settings, preview } = useQuizData();
const { quizId } = useQuizData();
const { settings, preview, quizId } = useQuizSettings();
const answers = useQuizViewStore((state) => state.answers);
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -34,7 +34,7 @@ export const VariantItem = ({
isSending: boolean;
setIsSending: (a: boolean) => void;
}) => {
const { settings, quizId, preview } = useQuizData();
const { settings, quizId, preview } = useQuizSettings();
const theme = useTheme();
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);

@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
@ -24,7 +24,7 @@ type 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 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 { useQuizData } from "@contexts/QuizDataContext";
interface Props {
isNextButtonEnabled: boolean;
@ -8,8 +8,8 @@ interface Props {
}
export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
const theme = useTheme();
const { settings } = useQuizData();
const { settings } = useQuizSettings();
return (
<Button
disabled={!isNextButtonEnabled}

@ -1,7 +1,7 @@
import { Button, useTheme } from "@mui/material";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
interface Props {
isPreviousButtonEnabled: boolean;
@ -10,7 +10,7 @@ interface Props {
export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
const theme = useTheme();
const { settings } = useQuizData();
const { settings } = useQuizSettings();
const isMobileMini = useRootContainerSize() < 382;
return (
<Button

@ -1,17 +1,18 @@
import { QuizSettings } from "@model/settingsData";
import { createContext, useContext } from "react";
type QuizData = QuizSettings & {
quizId: string;
preview: boolean;
changeFaviconAndTitle: boolean;
};
export const QuizDataContext = createContext<QuizData | null>(null);
export const useQuizData = () => {
const quizData = useContext(QuizDataContext);
if (quizData === null) throw new Error("QuizData context is null");
return quizData;
export const QuizSettingsContext = createContext<
| (QuizSettings & {
quizId: string;
preview: boolean;
changeFaviconAndTitle: boolean;
})
| null
>(null);
export const useQuizSettings = () => {
const quizSettings = useContext(QuizSettingsContext);
if (quizSettings === null) throw new Error("QuizSettings context is null");
return quizSettings;
};

@ -110,6 +110,8 @@ export interface QuizConfig {
law?: string;
};
meta: string;
antifraud: boolean;
showfc: boolean;
yandexMetricsNumber: number | undefined;
vkMetricsNumber: number | undefined;
}

@ -3,7 +3,7 @@ import { enqueueSnackbar } from "notistack";
import moment from "moment";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
import { useQuizData } from "@contexts/QuizDataContext";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { useQuizViewStore } from "@stores/quizView";
@ -11,7 +11,7 @@ import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
export function useQuestionFlowControl() {
const { settings, questions } = useQuizData();
const { settings, questions } = useQuizSettings();
const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page);
}, [questions]);

@ -1,3 +1,4 @@
import { useQuizData } from "@/api/hooks";
import { BannerWidgetComponentProps } from "@/model/widget/banner";
import lightTheme from "@/utils/themes/light";
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 QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
const PADDING = 10;
@ -35,7 +35,7 @@ export default function QuizBanner({
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
const isQuizCompleted = useQuizCompletionStatus(quizId);
const { data: quizData } = useQuizData(quizId);
const preventQuizAutoShowRef = useRef<boolean>(false);
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -81,6 +81,10 @@ export default function QuizBanner({
}
if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return createPortal(
<ThemeProvider theme={lightTheme}>
@ -171,7 +175,7 @@ export default function QuizBanner({
{quizHeaderText}
</Typography>
</Box>
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
{showButtonFlash && <RunningStripe />}
</Button>
<IconButton
onClick={onWidgetClose}

@ -1,10 +1,10 @@
import { useQuizData } from "@/api/hooks";
import { ButtonWidgetComponentProps } from "@/model/widget/button";
import lightTheme from "@/utils/themes/light";
import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react";
import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
export default function OpenQuizButton({
quizId,
@ -23,7 +23,7 @@ export default function OpenQuizButton({
}: ButtonWidgetComponentProps) {
const isMobile = useMediaQuery("(max-width: 600px)");
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isQuizCompleted = useQuizCompletionStatus(quizId);
const { data: quizData } = useQuizData(quizId);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const preventQuizAutoShowRef = useRef<boolean>(false);
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -70,6 +70,10 @@ export default function OpenQuizButton({
}
if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return (
<ThemeProvider theme={lightTheme}>
@ -108,7 +112,7 @@ export default function OpenQuizButton({
]}
>
{buttonText}
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
{showButtonFlash && <RunningStripe />}
</Button>
<QuizDialog
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 QuizDialog from "../shared/QuizDialog";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { useMediaQuery } from "@mui/material";
import { PopupWidgetComponentProps } from "@/model/widget/popup";
export default function QuizPopup({
quizId,
@ -14,8 +14,8 @@ export default function QuizPopup({
}: PopupWidgetComponentProps) {
const initialIsQuizShown = autoShowQuizTime !== null || openOnLeaveAttempt ? false : true;
const { data: quizData } = useQuizData(quizId);
const [isQuizShown, setIsQuizShown] = useState<boolean>(initialIsQuizShown);
const isQuizCompleted = useQuizCompletionStatus(quizId);
const isMobile = useMediaQuery("(max-width: 600px)");
const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@ -54,6 +54,9 @@ export default function QuizPopup({
[openOnLeaveAttempt]
);
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
if (isQuizCompleted) 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 { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react";
@ -5,8 +7,6 @@ import { createPortal } from "react-dom";
import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import { SideWidgetComponentProps } from "@/model/widget/side";
const PADDING = 10;
const WIDGET_DEFAULT_WIDTH = "600px";
@ -26,7 +26,7 @@ export default function QuizSideButton({
}: SideWidgetComponentProps) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isMobile = useMediaQuery("(max-width: 600px)");
const isQuizCompleted = useQuizCompletionStatus(quizId);
const { data: quizData } = useQuizData(quizId);
const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
const preventQuizAutoShowRef = useRef<boolean>(false);
@ -53,6 +53,10 @@ export default function QuizSideButton({
}
if (hideOnMobile && isMobile) return null;
if (!quizData) return null;
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
const showButtonFlash = isQuizCompleted && isFlashEnabled;
return createPortal(
<ThemeProvider theme={lightTheme}>
@ -113,7 +117,7 @@ export default function QuizSideButton({
]}
>
Пройти квиз
{!isQuizCompleted && isFlashEnabled && <RunningStripe />}
{showButtonFlash && <RunningStripe />}
</Button>
</Fade>
</ThemeProvider>,