новый свр

This commit is contained in:
Nastya 2025-06-15 12:58:15 +03:00
parent 770966ab4f
commit 1ee85347ee
8 changed files with 755 additions and 339 deletions

@ -1,11 +1,78 @@
import useSWR from "swr"; import useSWR from "swr";
import { getQuizData } from "./quizRelase"; import { getQuizData, getFirstQuizData } from "./quizRelase";
import { useEffect, useState } from "react";
import { initDataManager, statusOfQuiz } from "@/utils/hooks/useQuestionFlowControl";
import { addQuestions, setQuizData, useQuizStore } from "@/stores/useQuizStore";
export function useQuizData(quizId: string, preview: boolean = false) { /*
return useSWR(preview ? null : ["quizData", quizId], (params) => getQuizData({ quizId: params[1] }), { У хука есть три режмиа работы: "line" | "branch" | "ai"
revalidateOnFocus: false, Для branch и line единовременно запрашиваются ВСЕ данные (пока что это количество на 100 штук. Позже нужно впилить доп запросы чтобы получить все вопросы.)
revalidateOnReconnect: false, Для ai идёт последовательный запрос данных. При первом попадании на result - блокируется возможность запрашивать новые данные
shouldRetryOnError: false, */
refreshInterval: 0,
}); export function useQuizData(quizId: string, preview: boolean) {
const { quizStep } = useQuizStore();
const [page, setPage] = useState(0);
const [needFullLoad, setNeedFullLoad] = useState(false);
useEffect(() => {
if (quizStep > page) setPage(quizStep);
}, [quizStep]);
return useSWR(
preview ? null : ["quizData", quizId, page, needFullLoad],
async ([, id, currentPage, fullLoad]) => {
// Первый запрос - получаем статус
if (currentPage === 0 && !fullLoad) {
const firstData = await getQuizData({
quizId: id,
limit: 1,
page: currentPage,
needConfig: true,
});
initDataManager({
status: firstData.settings.status,
haveRoot: firstData.settings.cfg.haveRoot,
});
setQuizData(firstData);
// Определяем нужно ли загружать все данные
if (["line", "branch"].includes(firstData.status)) {
setNeedFullLoad(true); // Триггерит новый запрос через изменение ключа
return firstData;
}
return firstData;
}
// Полная загрузка для line/branch
if (fullLoad) {
const allQuestions = await getQuestionsData({
quizId: id,
limit: 100,
page: 0,
needConfig: false,
});
addQuestions(allQuestions);
return allQuestions;
}
// Для AI режима - последовательная загрузка
const allQuestions = await getQuestionsData({
quizId: id,
page: currentPage,
limit: 1,
needConfig: false,
});
return allQuestions;
},
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
}
);
} }

@ -21,6 +21,7 @@ import { HelmetProvider } from "react-helmet-async";
import "moment/dist/locale/ru"; import "moment/dist/locale/ru";
import { useQuizStore, setQuizData, addquizid } from "@/stores/useQuizStore"; import { useQuizStore, setQuizData, addquizid } from "@/stores/useQuizStore";
import { initDataManager } from "@/utils/hooks/useQuestionFlowControl";
moment.locale("ru"); moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
@ -32,16 +33,7 @@ type Props = {
className?: string; className?: string;
disableGlobalCss?: boolean; disableGlobalCss?: boolean;
}; };
function isQuizSettingsValid(data: any): data is QuizSettings {
return (
data &&
Array.isArray(data.questions) &&
data.settings &&
typeof data.cnt === "number" &&
typeof data.recentlyCompleted === "boolean" &&
typeof data.show_badge === "boolean"
);
}
function QuizAnswererInner({ function QuizAnswererInner({
quizSettings, quizSettings,
quizId, quizId,
@ -78,17 +70,15 @@ function QuizAnswererInner({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log("got data"); //Хук на случай если данные переданы нам сразу, а не "нам нужно их запросить"
console.log(quizSettings); if (quizSettings !== undefined) {
console.log(data); setQuizData(quizSettings);
const quiz = quizSettings || data; initDataManager({
console.log("quiz"); status: quizSettings.settings.status,
console.log(quiz); haveRoot: quizSettings.settings.cfg.haveRoot,
if (quiz !== undefined) { });
console.log("is not undefined");
setQuizData(quiz);
} }
}, [quizSettings, data]); }, [quizSettings]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);

@ -42,6 +42,8 @@ export type FCField = {
used: boolean; used: boolean;
}; };
export type Status = "start" | "stop" | "ai";
export type QuizSettingsConfig = { export type QuizSettingsConfig = {
fp: boolean; fp: boolean;
rep: boolean; rep: boolean;
@ -51,7 +53,7 @@ export type QuizSettingsConfig = {
delay: number; delay: number;
pausable: boolean; pausable: boolean;
cfg: QuizConfig; cfg: QuizConfig;
status: "start" | "stop" | "ai"; status: Status;
}; };
export type QuizSettings = { export type QuizSettings = {

@ -7,6 +7,7 @@ export type QuizStore = QuizSettings & {
quizId: string; quizId: string;
preview: boolean; preview: boolean;
changeFaviconAndTitle: boolean; changeFaviconAndTitle: boolean;
quizStep: number;
}; };
export const useQuizStore = create<QuizStore>(() => ({ export const useQuizStore = create<QuizStore>(() => ({
@ -18,6 +19,7 @@ export const useQuizStore = create<QuizStore>(() => ({
cnt: 0, cnt: 0,
recentlyCompleted: false, recentlyCompleted: false,
show_badge: false, show_badge: false,
quizStep: 0,
})); }));
export const setQuizData = (data: QuizSettings) => { export const setQuizData = (data: QuizSettings) => {
@ -25,10 +27,10 @@ export const setQuizData = (data: QuizSettings) => {
console.log(data); console.log(data);
useQuizStore.setState((state: QuizStore) => ({ ...state, ...data })); useQuizStore.setState((state: QuizStore) => ({ ...state, ...data }));
}; };
export const addQuestion = (newQuestion: AnyTypedQuizQuestion) => export const addQuestions = (newQuestions: AnyTypedQuizQuestion[]) =>
useQuizStore.setState( useQuizStore.setState(
produce((state: QuizStore) => { produce((state: QuizStore) => {
state.questions.push(newQuestion); state.questions.push(...newQuestions);
}) })
); );
export const addquizid = (id: string) => export const addquizid = (id: string) =>
@ -37,3 +39,9 @@ export const addquizid = (id: string) =>
state.quizId = id; state.quizId = id;
}) })
); );
export const changeQuizStep = (step: number) =>
useQuizStore.setState(
produce((state: QuizStore) => {
state.quizStep += step;
})
);

@ -0,0 +1,308 @@
import { useCallback, useDebugValue, useEffect, useMemo, useState } from "react";
import { enqueueSnackbar } from "notistack";
import moment from "moment";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
import { useQuizStore } from "@/stores/useQuizStore";
import { useQuizViewStore } from "@stores/quizView";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { useQuizGetNext } from "@/api/useQuizGetNext";
let isgetting = false;
export function useBranchingQuiz() {
//Получаем инфо о квизе и список вопросов.
const { loadMoreQuestions } = useQuizGetNext();
const { settings, questions, quizId, cnt } = useQuizStore();
useEffect(() => {
console.log("useQuestionFlowControl useEffect");
console.log(questions);
}, [questions]);
console.log(questions);
//Когда квиз линейный, не ветвящийся, мы идём по вопросам по их порядковому номеру. Это их page.
//За корректность page отвечает конструктор квизов. Интересный факт, если в конструкторе удалить из середины вопрос, то случится куча запросов изменения вопросов с изменением этого page
const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page);
}, [questions]);
//React сам будет менять визуал - главное говорить из какого вопроса ему брать инфо. Изменение этой переменной меняет визуал.
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
const [headAI, setHeadAI] = useState(0);
//Список ответов на вопрос. Мы записываем ответы локально, параллельно отправляя на бек информацию о ответах
const answers = useQuizViewStore((state) => state.answers);
//Список засчитанных баллов для балловых квизов
const pointsSum = useQuizViewStore((state) => state.pointsSum);
//Текущий шаг "startpage" | "question" | "contactform"
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
//Получение возможности управлять состоянием метрик
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
//Изменение стейта (переменной currentQuestionId) ведёт к пересчёту что же за объект сейчас используется. Мы каждый раз просто ищем в списке
const currentQuestion = sortedQuestions.find((question) => question.id === currentQuestionId) ?? sortedQuestions[0];
console.log("currentQuestion");
console.log(currentQuestion);
console.log("filted");
console.log(sortedQuestions.find((question) => question.id === currentQuestionId));
//Индекс текущего вопроса только если квиз линейный
const linearQuestionIndex = //: number | null
currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? sortedQuestions.indexOf(currentQuestion)
: null;
//Индекс первого вопроса
function getFirstQuestionId() {
//: string | null
if (sortedQuestions.length === 0) return null; //Если нету сортированного списка, то и не рыпаемся
if (settings.cfg.haveRoot) {
// Если есть ветвление, то settings.cfg.haveRoot будет заполнен
//Если заполнен, то дерево растёт с root и это 1 вопрос :)
const nextQuestion = sortedQuestions.find(
//Функция ищет первое совпадение по массиву
(question) => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) return null;
return nextQuestion.id;
}
//Если не возникло исключительных ситуаций - первый вопрос - нулевой элемент сортированного массива
return sortedQuestions[0].id;
}
const nextQuestionIdPointsLogic = useCallback(() => {
return sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
}, [sortedQuestions]);
//Анализируем какой вопрос должен быть следующим. Это главная логика
const nextQuestionIdMainLogic = useCallback(() => {
//Список ответов данных этому вопросу. Вернёт QuestionAnswer | undefined
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
//Если questionAnswer не undefined и ответ на вопрос не является временем:
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
//Вопрос типизации. Получаем список строк ответов на этот вопрос
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
//цикл. Перебираем список условий .main и обзываем их переменной branchingRule
for (const branchingRule of currentQuestion.content.rule.main) {
// Перебираем список ответов. Если хоть один ответ из списка совпадает с прописанным правилом из условий - этот вопрос нужный нам. Его и дадимкак следующий
if (userAnswers.some((answer) => branchingRule.rules[0].answers.includes(answer))) {
return branchingRule.next;
}
}
}
//Не помню что это, но чёт при первом взгляде оно true только у результатов
if (!currentQuestion.required) {
//Готовим себе дефолтный путь
const defaultNextQuestionId = currentQuestion.content.rule.default;
//Если строка не пустая и не пробел. (Обычно при получении данных мы сразу чистим пустые строки только с пробелом на просто пустые строки. Это прост доп защита)
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
["date", "page", "text", "number"].includes(currentQuestion.type) &&
currentQuestion.content.rule.children.length === 1
)
return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
return sortedQuestions.find((q) => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
//Анализ следующего вопроса. Это логика для вопроса с баллами
const nextQuestionId = useMemo(() => {
if (settings.cfg.score) {
return nextQuestionIdPointsLogic();
}
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score, questions]);
//Поиск предыдущго вопроса либо по индексу либо по id родителя
const prevQuestion =
linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: sortedQuestions.find(
(q) =>
q.id === currentQuestion?.content.rule.parentId || q.content.id === currentQuestion?.content.rule.parentId
);
//Анализ результата по количеству баллов
const findResultPointsLogic = useCallback(() => {
//Отбираем из массива только тип резулт И результы с информацией о ожидаемых баллах И те результы, чьи суммы баллов меньше или равны насчитанным баллам юзера
const results = sortedQuestions.filter(
(e) => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum
);
//Создаём массив строк из результатов. У кого есть инфо о баллах - дают свои, остальные 0
const numbers = results.map((e) =>
e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
);
//Извлекаем самое большое число
const indexOfNext = Math.max(...numbers);
//Отдаём индекс нужного нам результата
return results[numbers.indexOf(indexOfNext)];
}, [pointsSum, sortedQuestions]);
//Ищем следующий вопрос (не его индекс, или id). Сам вопрос
const nextQuestion = useMemo(() => {
let next;
if (settings.cfg.score) {
//Ессли квиз балловый
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1]; //ищем по индексу
if (next?.type === "result" || next == undefined) next = findResultPointsLogic(); //если в поисках пришли к результату - считаем нужный
}
} else {
//иначе
if (linearQuestionIndex !== null) {
//для линейных ищем по индексу
next =
sortedQuestions[linearQuestionIndex + 1] ??
sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
} else {
// для нелинейных ищем по вычесленному id
next = sortedQuestions.find((q) => q.id === nextQuestionId || q.content.id === nextQuestionId);
}
}
return next;
}, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
//Показать визуалом юзеру результат
const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
//Записать в переменную ид текущего вопроса
setCurrentQuestionId(nextQuestion.id);
//Смотрим по настройкам показывать ли вообще форму контактов. Показывать ли страницу результатов до или после формы контактов (ФК)
if (
settings.cfg.showfc !== false &&
(settings.cfg.resultInfo.showResultForm === "after" || isResultQuestionEmpty(nextQuestion))
)
setCurrentQuizStep("contactform");
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm, settings.cfg.showfc]);
//рычаг управления из визуала в эту функцию
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
}
setCurrentQuizStep("question");
}, [currentQuestion, setCurrentQuizStep]);
//рычаг управления из визуала в эту функцию
const moveToPrevQuestion = useCallback(() => {
if (!prevQuestion) throw new Error("Previous question not found");
if (settings.status === "ai" && headAI > 0) setHeadAI((old) => old--);
setCurrentQuestionId(prevQuestion.id);
}, [prevQuestion]);
//рычаг управления из визуала в эту функцию
const moveToNextQuestion = useCallback(async () => {
// Если есть следующий вопрос в уже загруженных - используем его
if (nextQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
if (nextQuestion.type === "result") return showResult();
setCurrentQuestionId(nextQuestion.id);
return;
}
// Если следующего нет - загружаем новый
try {
const newQuestion = await loadMoreQuestions();
console.log("Ффункция некст вопрос получила его с бека: ");
console.log(newQuestion);
if (newQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
console.log("МЫ ПАЛУЧИЛИ НОВЫЙ ВОПРОС");
console.log(newQuestion);
console.log("typeof newQuestion.id");
console.log(typeof newQuestion.id);
setCurrentQuestionId(newQuestion.id);
setHeadAI((old) => old++);
}
} catch (error) {
enqueueSnackbar("Ошибка загрузки следующего вопроса");
}
}, [
currentQuestion.id,
nextQuestion,
showResult,
vkMetrics,
yandexMetrics,
linearQuestionIndex,
loadMoreQuestions,
questions,
]);
//рычаг управления из визуала в эту функцию
const setQuestion = useCallback(
(questionId: string) => {
const question = sortedQuestions.find((q) => q.id === questionId);
if (!question) return;
setCurrentQuestionId(question.id);
},
[sortedQuestions]
);
//Анализ дисаблить ли кнопки навигации
const isPreviousButtonEnabled = Boolean(prevQuestion);
//Анализ дисаблить ли кнопки навигации
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
return hasAnswer;
}
console.log(linearQuestionIndex);
console.log(questions.length);
console.log(cnt);
if (linearQuestionIndex !== null && questions.length < cnt) return true;
return Boolean(nextQuestion);
}, [answers, currentQuestion, nextQuestion]);
useDebugValue({
linearQuestionIndex,
currentQuestion: currentQuestion,
prevQuestion: prevQuestion,
nextQuestion: nextQuestion,
});
return {
currentQuestion,
currentQuestionStepNumber:
settings.status === "ai" ? null : linearQuestionIndex === null ? null : linearQuestionIndex + 1,
nextQuestion,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
setQuestion,
};
}

@ -0,0 +1,306 @@
import { useCallback, useDebugValue, useEffect, useMemo, useState } from "react";
import { enqueueSnackbar } from "notistack";
import moment from "moment";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
import { useQuizStore } from "@/stores/useQuizStore";
import { useQuizViewStore } from "@stores/quizView";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { useQuizGetNext } from "@/api/useQuizGetNext";
export function useLinearQuiz() {
//Получаем инфо о квизе и список вопросов.
const { loadMoreQuestions } = useQuizGetNext();
const { settings, questions, quizId, cnt } = useQuizStore();
useEffect(() => {
console.log("useQuestionFlowControl useEffect");
console.log(questions);
}, [questions]);
console.log(questions);
//Когда квиз линейный, не ветвящийся, мы идём по вопросам по их порядковому номеру. Это их page.
//За корректность page отвечает конструктор квизов. Интересный факт, если в конструкторе удалить из середины вопрос, то случится куча запросов изменения вопросов с изменением этого page
const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page);
}, [questions]);
//React сам будет менять визуал - главное говорить из какого вопроса ему брать инфо. Изменение этой переменной меняет визуал.
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
const [headAI, setHeadAI] = useState(0);
//Список ответов на вопрос. Мы записываем ответы локально, параллельно отправляя на бек информацию о ответах
const answers = useQuizViewStore((state) => state.answers);
//Список засчитанных баллов для балловых квизов
const pointsSum = useQuizViewStore((state) => state.pointsSum);
//Текущий шаг "startpage" | "question" | "contactform"
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
//Получение возможности управлять состоянием метрик
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
//Изменение стейта (переменной currentQuestionId) ведёт к пересчёту что же за объект сейчас используется. Мы каждый раз просто ищем в списке
const currentQuestion = sortedQuestions.find((question) => question.id === currentQuestionId) ?? sortedQuestions[0];
console.log("currentQuestion");
console.log(currentQuestion);
console.log("filted");
console.log(sortedQuestions.find((question) => question.id === currentQuestionId));
//Индекс текущего вопроса только если квиз линейный
const linearQuestionIndex = //: number | null
currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? sortedQuestions.indexOf(currentQuestion)
: null;
//Индекс первого вопроса
function getFirstQuestionId() {
//: string | null
if (sortedQuestions.length === 0) return null; //Если нету сортированного списка, то и не рыпаемся
if (settings.cfg.haveRoot) {
// Если есть ветвление, то settings.cfg.haveRoot будет заполнен
//Если заполнен, то дерево растёт с root и это 1 вопрос :)
const nextQuestion = sortedQuestions.find(
//Функция ищет первое совпадение по массиву
(question) => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) return null;
return nextQuestion.id;
}
//Если не возникло исключительных ситуаций - первый вопрос - нулевой элемент сортированного массива
return sortedQuestions[0].id;
}
const nextQuestionIdPointsLogic = useCallback(() => {
return sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
}, [sortedQuestions]);
//Анализируем какой вопрос должен быть следующим. Это главная логика
const nextQuestionIdMainLogic = useCallback(() => {
//Список ответов данных этому вопросу. Вернёт QuestionAnswer | undefined
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
//Если questionAnswer не undefined и ответ на вопрос не является временем:
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
//Вопрос типизации. Получаем список строк ответов на этот вопрос
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
//цикл. Перебираем список условий .main и обзываем их переменной branchingRule
for (const branchingRule of currentQuestion.content.rule.main) {
// Перебираем список ответов. Если хоть один ответ из списка совпадает с прописанным правилом из условий - этот вопрос нужный нам. Его и дадимкак следующий
if (userAnswers.some((answer) => branchingRule.rules[0].answers.includes(answer))) {
return branchingRule.next;
}
}
}
//Не помню что это, но чёт при первом взгляде оно true только у результатов
if (!currentQuestion.required) {
//Готовим себе дефолтный путь
const defaultNextQuestionId = currentQuestion.content.rule.default;
//Если строка не пустая и не пробел. (Обычно при получении данных мы сразу чистим пустые строки только с пробелом на просто пустые строки. Это прост доп защита)
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
["date", "page", "text", "number"].includes(currentQuestion.type) &&
currentQuestion.content.rule.children.length === 1
)
return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
return sortedQuestions.find((q) => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
//Анализ следующего вопроса. Это логика для вопроса с баллами
const nextQuestionId = useMemo(() => {
if (settings.cfg.score) {
return nextQuestionIdPointsLogic();
}
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score, questions]);
//Поиск предыдущго вопроса либо по индексу либо по id родителя
const prevQuestion =
linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: sortedQuestions.find(
(q) =>
q.id === currentQuestion?.content.rule.parentId || q.content.id === currentQuestion?.content.rule.parentId
);
//Анализ результата по количеству баллов
const findResultPointsLogic = useCallback(() => {
//Отбираем из массива только тип резулт И результы с информацией о ожидаемых баллах И те результы, чьи суммы баллов меньше или равны насчитанным баллам юзера
const results = sortedQuestions.filter(
(e) => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum
);
//Создаём массив строк из результатов. У кого есть инфо о баллах - дают свои, остальные 0
const numbers = results.map((e) =>
e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
);
//Извлекаем самое большое число
const indexOfNext = Math.max(...numbers);
//Отдаём индекс нужного нам результата
return results[numbers.indexOf(indexOfNext)];
}, [pointsSum, sortedQuestions]);
//Ищем следующий вопрос (не его индекс, или id). Сам вопрос
const nextQuestion = useMemo(() => {
let next;
if (settings.cfg.score) {
//Ессли квиз балловый
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1]; //ищем по индексу
if (next?.type === "result" || next == undefined) next = findResultPointsLogic(); //если в поисках пришли к результату - считаем нужный
}
} else {
//иначе
if (linearQuestionIndex !== null) {
//для линейных ищем по индексу
next =
sortedQuestions[linearQuestionIndex + 1] ??
sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
} else {
// для нелинейных ищем по вычесленному id
next = sortedQuestions.find((q) => q.id === nextQuestionId || q.content.id === nextQuestionId);
}
}
return next;
}, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
//Показать визуалом юзеру результат
const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
//Записать в переменную ид текущего вопроса
setCurrentQuestionId(nextQuestion.id);
//Смотрим по настройкам показывать ли вообще форму контактов. Показывать ли страницу результатов до или после формы контактов (ФК)
if (
settings.cfg.showfc !== false &&
(settings.cfg.resultInfo.showResultForm === "after" || isResultQuestionEmpty(nextQuestion))
)
setCurrentQuizStep("contactform");
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm, settings.cfg.showfc]);
//рычаг управления из визуала в эту функцию
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
}
setCurrentQuizStep("question");
}, [currentQuestion, setCurrentQuizStep]);
//рычаг управления из визуала в эту функцию
const moveToPrevQuestion = useCallback(() => {
if (!prevQuestion) throw new Error("Previous question not found");
if (settings.status === "ai" && headAI > 0) setHeadAI((old) => old--);
setCurrentQuestionId(prevQuestion.id);
}, [prevQuestion]);
//рычаг управления из визуала в эту функцию
const moveToNextQuestion = useCallback(async () => {
// Если есть следующий вопрос в уже загруженных - используем его
if (nextQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
if (nextQuestion.type === "result") return showResult();
setCurrentQuestionId(nextQuestion.id);
return;
}
// Если следующего нет - загружаем новый
try {
const newQuestion = await loadMoreQuestions();
console.log("Ффункция некст вопрос получила его с бека: ");
console.log(newQuestion);
if (newQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
console.log("МЫ ПАЛУЧИЛИ НОВЫЙ ВОПРОС");
console.log(newQuestion);
console.log("typeof newQuestion.id");
console.log(typeof newQuestion.id);
setCurrentQuestionId(newQuestion.id);
setHeadAI((old) => old++);
}
} catch (error) {
enqueueSnackbar("Ошибка загрузки следующего вопроса");
}
}, [
currentQuestion.id,
nextQuestion,
showResult,
vkMetrics,
yandexMetrics,
linearQuestionIndex,
loadMoreQuestions,
questions,
]);
//рычаг управления из визуала в эту функцию
const setQuestion = useCallback(
(questionId: string) => {
const question = sortedQuestions.find((q) => q.id === questionId);
if (!question) return;
setCurrentQuestionId(question.id);
},
[sortedQuestions]
);
//Анализ дисаблить ли кнопки навигации
const isPreviousButtonEnabled = Boolean(prevQuestion);
//Анализ дисаблить ли кнопки навигации
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
return hasAnswer;
}
console.log(linearQuestionIndex);
console.log(questions.length);
console.log(cnt);
if (linearQuestionIndex !== null && questions.length < cnt) return true;
return Boolean(nextQuestion);
}, [answers, currentQuestion, nextQuestion]);
useDebugValue({
linearQuestionIndex,
currentQuestion: currentQuestion,
prevQuestion: prevQuestion,
nextQuestion: nextQuestion,
});
return {
currentQuestion,
currentQuestionStepNumber:
settings.status === "ai" ? null : linearQuestionIndex === null ? null : linearQuestionIndex + 1,
nextQuestion,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
setQuestion,
};
}

@ -1,310 +1,45 @@
import { useCallback, useDebugValue, useEffect, useMemo, useState } from "react"; import { useBranchingQuiz } from "./FlowControlLogic/useBranchingQuiz";
import { enqueueSnackbar } from "notistack"; import { useLinearQuiz } from "./FlowControlLogic/useLinearQuiz";
import moment from "moment"; import { useAIQuiz } from "./FlowControlLogic/useAIQuiz";
import { Status } from "@/model/settingsData";
import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData"; interface StatusData {
import { useQuizStore } from "@/stores/useQuizStore"; status: Status;
haveRoot: string | null;
import { useQuizViewStore } from "@stores/quizView";
import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { AnyTypedQuizQuestion } from "@/index";
import { getQuizData } from "@/api/quizRelase";
import { useQuizGetNext } from "@/api/useQuizGetNext";
let isgetting = false;
export function useQuestionFlowControl() {
//Получаем инфо о квизе и список вопросов.
const { loadMoreQuestions } = useQuizGetNext();
const { settings, questions, quizId, cnt } = useQuizStore();
useEffect(() => {
console.log("useQuestionFlowControl useEffect");
console.log(questions);
}, [questions]);
console.log(questions);
//Когда квиз линейный, не ветвящийся, мы идём по вопросам по их порядковому номеру. Это их page.
//За корректность page отвечает конструктор квизов. Интересный факт, если в конструкторе удалить из середины вопрос, то случится куча запросов изменения вопросов с изменением этого page
const sortedQuestions = useMemo(() => {
return [...questions].sort((a, b) => a.page - b.page);
}, [questions]);
//React сам будет менять визуал - главное говорить из какого вопроса ему брать инфо. Изменение этой переменной меняет визуал.
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
const [headAI, setHeadAI] = useState(0);
//Список ответов на вопрос. Мы записываем ответы локально, параллельно отправляя на бек информацию о ответах
const answers = useQuizViewStore((state) => state.answers);
//Список засчитанных баллов для балловых квизов
const pointsSum = useQuizViewStore((state) => state.pointsSum);
//Текущий шаг "startpage" | "question" | "contactform"
const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
//Получение возможности управлять состоянием метрик
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
//Изменение стейта (переменной currentQuestionId) ведёт к пересчёту что же за объект сейчас используется. Мы каждый раз просто ищем в списке
const currentQuestion = sortedQuestions.find((question) => question.id === currentQuestionId) ?? sortedQuestions[0];
console.log("currentQuestion");
console.log(currentQuestion);
console.log("filted");
console.log(sortedQuestions.find((question) => question.id === currentQuestionId));
//Индекс текущего вопроса только если квиз линейный
const linearQuestionIndex = //: number | null
currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? sortedQuestions.indexOf(currentQuestion)
: null;
//Индекс первого вопроса
function getFirstQuestionId() {
//: string | null
if (sortedQuestions.length === 0) return null; //Если нету сортированного списка, то и не рыпаемся
if (settings.cfg.haveRoot) {
// Если есть ветвление, то settings.cfg.haveRoot будет заполнен
//Если заполнен, то дерево растёт с root и это 1 вопрос :)
const nextQuestion = sortedQuestions.find(
//Функция ищет первое совпадение по массиву
(question) => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) return null;
return nextQuestion.id;
}
//Если не возникло исключительных ситуаций - первый вопрос - нулевой элемент сортированного массива
return sortedQuestions[0].id;
}
const nextQuestionIdPointsLogic = useCallback(() => {
return sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
}, [sortedQuestions]);
//Анализируем какой вопрос должен быть следующим. Это главная логика
const nextQuestionIdMainLogic = useCallback(() => {
//Список ответов данных этому вопросу. Вернёт QuestionAnswer | undefined
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
//Если questionAnswer не undefined и ответ на вопрос не является временем:
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
//Вопрос типизации. Получаем список строк ответов на этот вопрос
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
//цикл. Перебираем список условий .main и обзываем их переменной branchingRule
for (const branchingRule of currentQuestion.content.rule.main) {
// Перебираем список ответов. Если хоть один ответ из списка совпадает с прописанным правилом из условий - этот вопрос нужный нам. Его и дадимкак следующий
if (userAnswers.some((answer) => branchingRule.rules[0].answers.includes(answer))) {
return branchingRule.next;
}
}
}
//Не помню что это, но чёт при первом взгляде оно true только у результатов
if (!currentQuestion.required) {
//Готовим себе дефолтный путь
const defaultNextQuestionId = currentQuestion.content.rule.default;
//Если строка не пустая и не пробел. (Обычно при получении данных мы сразу чистим пустые строки только с пробелом на просто пустые строки. Это прост доп защита)
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
["date", "page", "text", "number"].includes(currentQuestion.type) &&
currentQuestion.content.rule.children.length === 1
)
return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
return sortedQuestions.find((q) => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
})?.id;
}, [answers, currentQuestion, sortedQuestions]);
//Анализ следующего вопроса. Это логика для вопроса с баллами
const nextQuestionId = useMemo(() => {
if (settings.cfg.score) {
return nextQuestionIdPointsLogic();
}
return nextQuestionIdMainLogic();
}, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score, questions]);
//Поиск предыдущго вопроса либо по индексу либо по id родителя
const prevQuestion =
linearQuestionIndex !== null
? sortedQuestions[linearQuestionIndex - 1]
: sortedQuestions.find(
(q) =>
q.id === currentQuestion?.content.rule.parentId || q.content.id === currentQuestion?.content.rule.parentId
);
//Анализ результата по количеству баллов
const findResultPointsLogic = useCallback(() => {
//Отбираем из массива только тип резулт И результы с информацией о ожидаемых баллах И те результы, чьи суммы баллов меньше или равны насчитанным баллам юзера
const results = sortedQuestions.filter(
(e) => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum
);
//Создаём массив строк из результатов. У кого есть инфо о баллах - дают свои, остальные 0
const numbers = results.map((e) =>
e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
);
//Извлекаем самое большое число
const indexOfNext = Math.max(...numbers);
//Отдаём индекс нужного нам результата
return results[numbers.indexOf(indexOfNext)];
}, [pointsSum, sortedQuestions]);
//Ищем следующий вопрос (не его индекс, или id). Сам вопрос
const nextQuestion = useMemo(() => {
let next;
if (settings.cfg.score) {
//Ессли квиз балловый
if (linearQuestionIndex !== null) {
next = sortedQuestions[linearQuestionIndex + 1]; //ищем по индексу
if (next?.type === "result" || next == undefined) next = findResultPointsLogic(); //если в поисках пришли к результату - считаем нужный
}
} else {
//иначе
if (linearQuestionIndex !== null) {
//для линейных ищем по индексу
next =
sortedQuestions[linearQuestionIndex + 1] ??
sortedQuestions.find((question) => question.type === "result" && question.content.rule.parentId === "line");
} else {
// для нелинейных ищем по вычесленному id
next = sortedQuestions.find((q) => q.id === nextQuestionId || q.content.id === nextQuestionId);
}
}
return next;
}, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
//Показать визуалом юзеру результат
const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
//Записать в переменную ид текущего вопроса
setCurrentQuestionId(nextQuestion.id);
//Смотрим по настройкам показывать ли вообще форму контактов. Показывать ли страницу результатов до или после формы контактов (ФК)
if (
settings.cfg.showfc !== false &&
(settings.cfg.resultInfo.showResultForm === "after" || isResultQuestionEmpty(nextQuestion))
)
setCurrentQuizStep("contactform");
}, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm, settings.cfg.showfc]);
//рычаг управления из визуала в эту функцию
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
if (isResultQuestionEmpty(currentQuestion)) {
enqueueSnackbar("Данные отправлены");
return;
}
setCurrentQuizStep("question");
}, [currentQuestion, setCurrentQuizStep]);
//рычаг управления из визуала в эту функцию
const moveToPrevQuestion = useCallback(() => {
if (!prevQuestion) throw new Error("Previous question not found");
if (settings.status === "ai" && headAI > 0) setHeadAI((old) => old--);
setCurrentQuestionId(prevQuestion.id);
}, [prevQuestion]);
//рычаг управления из визуала в эту функцию
const moveToNextQuestion = useCallback(async () => {
// Если есть следующий вопрос в уже загруженных - используем его
if (nextQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
if (nextQuestion.type === "result") return showResult();
setCurrentQuestionId(nextQuestion.id);
return;
}
// Если следующего нет - загружаем новый
try {
const newQuestion = await loadMoreQuestions();
console.log("Ффункция некст вопрос получила его с бека: ");
console.log(newQuestion);
if (newQuestion) {
vkMetrics.questionPassed(currentQuestion.id);
yandexMetrics.questionPassed(currentQuestion.id);
console.log("МЫ ПАЛУЧИЛИ НОВЫЙ ВОПРОС");
console.log(newQuestion);
console.log("typeof newQuestion.id");
console.log(typeof newQuestion.id);
setCurrentQuestionId(newQuestion.id);
setHeadAI((old) => old++);
}
} catch (error) {
enqueueSnackbar("Ошибка загрузки следующего вопроса");
}
}, [
currentQuestion.id,
nextQuestion,
showResult,
vkMetrics,
yandexMetrics,
linearQuestionIndex,
loadMoreQuestions,
questions,
]);
//рычаг управления из визуала в эту функцию
const setQuestion = useCallback(
(questionId: string) => {
const question = sortedQuestions.find((q) => q.id === questionId);
if (!question) return;
setCurrentQuestionId(question.id);
},
[sortedQuestions]
);
//Анализ дисаблить ли кнопки навигации
const isPreviousButtonEnabled = Boolean(prevQuestion);
//Анализ дисаблить ли кнопки навигации
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
return hasAnswer;
}
console.log(linearQuestionIndex);
console.log(questions.length);
console.log(cnt);
if (linearQuestionIndex !== null && questions.length < cnt) return true;
return Boolean(nextQuestion);
}, [answers, currentQuestion, nextQuestion]);
useDebugValue({
linearQuestionIndex,
currentQuestion: currentQuestion,
prevQuestion: prevQuestion,
nextQuestion: nextQuestion,
});
return {
currentQuestion,
currentQuestionStepNumber:
settings.status === "ai" ? null : linearQuestionIndex === null ? null : linearQuestionIndex + 1,
nextQuestion,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
setQuestion,
};
} }
// выбор способа управления в зависимости от статуса
let cachedManager: () => ReturnType<typeof useLinearQuiz>;
export let statusOfQuiz: "line" | "branch" | "ai";
function analyicStatus({ status, haveRoot }: StatusData) {
if (status === "ai") statusOfQuiz = "ai";
if (status === "start") {
// Если есть ветвление, то settings.cfg.haveRoot будет заполнен
if (haveRoot) statusOfQuiz = "branch";
else statusOfQuiz = "line";
} else throw new Error("quiz is inactive");
}
export const initDataManager = (data: StatusData) => {
analyicStatus(data);
switch (statusOfQuiz) {
case "line":
cachedManager = useLinearQuiz;
break;
case "branch":
cachedManager = useBranchingQuiz;
break;
case "ai":
cachedManager = useAIQuiz;
break;
}
};
// Главный хук (интерфейс для потребителей)
export const useQuestionFlowControl = () => {
if (!cachedManager) {
throw new Error("DataManager not initialized! Call initDataManager() first.");
}
return cachedManager();
};