diff --git a/lib/components/QuizAnswerer.tsx b/lib/components/QuizAnswerer.tsx index cb464e7..de57c47 100644 --- a/lib/components/QuizAnswerer.tsx +++ b/lib/components/QuizAnswerer.tsx @@ -22,6 +22,9 @@ import { HelmetProvider } from "react-helmet-async"; import "moment/dist/locale/ru"; import { useQuizStore, setQuizData, addquizid } from "@/stores/useQuizStore"; import { initDataManager, statusOfQuiz } from "@/utils/hooks/useQuestionFlowControl"; + +console.log("🚀 QuizAnswerer: Component module loaded"); + moment.locale("ru"); const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; @@ -42,6 +45,13 @@ function QuizAnswererInner({ className, disableGlobalCss = false, }: Props) { + console.log("🔧 QuizAnswererInner: Component function called with props:", { + quizId, + preview, + changeFaviconAndTitle, + disableGlobalCss, + }); + const [quizViewStore] = useState(createQuizViewStore); const [rootContainerWidth, setRootContainerWidth] = useState(() => window.innerWidth); const rootContainerRef = useRef(null); @@ -51,18 +61,21 @@ function QuizAnswererInner({ const r = useQuizStore(); const { settings, questions } = useQuizStore(); + console.log("🔍 QuizAnswererInner: Component state initialized"); + useEffect(() => { + console.log("🔧 QuizAnswererInner: addquizid effect triggered"); addquizid(quizId); }, []); useEffect(() => { - console.log(settings); - console.log(questions); - console.log("r"); - console.log(r); + console.log("🔍 QuizAnswererInner: Debug effect - settings:", settings); + console.log("🔍 QuizAnswererInner: Debug effect - questions:", questions); + console.log("🔍 QuizAnswererInner: Debug effect - r:", r); }, [questions, settings]); useEffect(() => { + console.log("🔧 QuizAnswererInner: Metrics effect triggered"); setTimeout(() => { vkMetrics.quizOpened(); yandexMetrics.quizOpened(); @@ -72,7 +85,7 @@ function QuizAnswererInner({ useEffect(() => { //Хук на случай если данные переданы нам сразу, а не "нам нужно их запросить" if (quizSettings !== undefined) { - console.log("QuizAnswerer: calling setQuizData with quizSettings"); + console.log("🔧 QuizAnswererInner: setQuizData effect triggered with quizSettings"); setQuizData(quizSettings); initDataManager({ status: quizSettings.settings.status, @@ -82,6 +95,7 @@ function QuizAnswererInner({ }, [quizSettings]); useLayoutEffect(() => { + console.log("🔧 QuizAnswererInner: Layout effect triggered"); if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); }, []); @@ -98,19 +112,44 @@ function QuizAnswererInner({ }; }, []); + console.log("🔍 QuizAnswererInner: About to render, current state:"); + console.log("🔍 QuizAnswererInner: isLoading:", isLoading); + console.log("🔍 QuizAnswererInner: error:", error); + console.log("🔍 QuizAnswererInner: settings keys count:", Object.keys(settings).length); + console.log("🔍 QuizAnswererInner: questions length:", questions.length); + console.log("settings"); console.log(settings); - if (isLoading && !questions.length) return ; + if (isLoading && !questions.length) { + console.log("🔍 QuizAnswererInner: Rendering LoadingSkeleton"); + return ; + } console.log("error"); console.log(error); - if (error) return ; + if (error) { + console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to error"); + return ; + } - if (Object.keys(settings).length == 0) return ; - if (questions.length === 0) return ; + if (Object.keys(settings).length == 0) { + console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to empty settings"); + return ; + } + if (questions.length === 0) { + console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to no questions"); + return ; + } - if (questions.length === 1 && settings.cfg.noStartPage && statusOfQuiz != "ai") + if (questions.length === 1 && settings.cfg.noStartPage && statusOfQuiz != "ai") { + console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to quiz is empty"); return ; - if (!quizId) return ; + } + if (!quizId) { + console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to no quiz id"); + return ; + } + + console.log("🔍 QuizAnswererInner: Rendering main quiz container"); const quizContainer = ( { const theme = useTheme(); const { questions, settings } = useQuizStore(); const questionsAmount = questions.filter(({ type }) => type !== "result").length; - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); + + // Диагностика i18n в Footer + console.log("🔍 Footer: useTranslation called"); + console.log("🔍 Footer: i18n instance:", i18n); + console.log("🔍 Footer: i18n.isInitialized:", i18n.isInitialized); + console.log("🔍 Footer: i18n.language:", i18n.language); + console.log("🔍 Footer: Testing translations:"); + console.log("🔍 Footer: t('Step'):", t("Step")); + console.log("🔍 Footer: t('of'):", t("of")); + console.log("🔍 Footer: t('Prev'):", t("Prev")); + console.log("🔍 Footer: t('Next'):", t("Next")); return ( state.answers); const ownVariants = useQuizViewStore((state) => state.ownVariants); @@ -42,7 +46,12 @@ export default function ViewPublicationPage() { useYandexMetrics(settings?.cfg?.yandexMetricsNumber, preview); useVKMetrics(settings?.cfg?.vkMetricsNumber, preview); + console.log("🔍 ViewPublicationPage: Component state initialized"); + console.log("🔍 ViewPublicationPage: currentQuizStep:", currentQuizStep); + console.log("🔍 ViewPublicationPage: currentQuestion:", currentQuestion); + useEffect(() => { + console.log("🔧 ViewPublicationPage: unscreen effect triggered"); const root = document.getElementById("root"); const overlay = document.getElementById("hideoverlay"); @@ -70,7 +79,8 @@ export default function ViewPublicationPage() { if (settings.cfg.antifraud && recentlyCompleted) throw new Error("Quiz already completed"); if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question"; - if (!currentQuestion) + if (!currentQuestion) { + console.log("🔍 ViewPublicationPage: No current question, rendering error"); return ( ); + } const currentAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id); + console.log("🔍 ViewPublicationPage: About to render quiz step:", currentQuizStep); + let quizStepElement: ReactElement; switch (currentQuizStep) { case "startpage": { + console.log("🔍 ViewPublicationPage: Rendering startpage"); quizStepElement = ; break; } case "question": { if (currentQuestion.type === "result") { + console.log("🔍 ViewPublicationPage: Rendering result form"); quizStepElement = ; break; } + console.log("🔍 ViewPublicationPage: Rendering question"); quizStepElement = ( { const path = window.location.pathname; @@ -10,11 +14,12 @@ const getLanguageFromURL = (): string => { const langMatch = path.match(/^\/(en|ru|uz)(\/|$)/i); if (langMatch) { - //console.log("Язык из URL:", langMatch[1]); - return langMatch[1].toLowerCase(); + const detectedLang = langMatch[1].toLowerCase(); + console.log("🔍 Main i18n: Detected language from URL:", detectedLang, "path:", path); + return detectedLang; } - //console.log('Язык не указан в URL, используем "ru"'); + console.log('🔍 Main i18n: Language not specified in URL, using "ru"'); return "ru"; // Жёсткий фолбэк }; @@ -46,11 +51,11 @@ i18n caches: [], // Не использовать localStorage }, parseMissingKeyHandler: (key) => { - console.warn("Missing translation:", key); + console.warn("⚠️ Main i18n: Missing translation:", key); return key; // Вернёт ключ вместо ошибки }, missingKeyHandler: (lngs, ns, key) => { - console.error("🚨 Missing i18n key:", { + console.error("🚨 Main i18n: Missing i18n key:", { key, languages: lngs, namespace: ns, @@ -59,34 +64,41 @@ i18n }, }) .then(() => { - console.log("i18n initialized. Current language:", i18n.language); - console.log("Loading translations from:", `/locales/${i18n.language}.json`); + console.log("✅ Main i18n: Initialization completed successfully"); + console.log("🔍 Main i18n: Current language:", i18n.language); + console.log("🔍 Main i18n: Loading translations from:", `/locales/${i18n.language}.json`); + console.log("🔍 Main i18n: i18n.isInitialized:", i18n.isInitialized); + console.log("🔍 Main i18n: i18n.store.data:", i18n.store.data); }) .catch((err) => { - console.error("Ошибка i18n:", err); + console.error("❌ Main i18n: Initialization failed:", err); }); // 3. Логирование всех событий i18n.on("languageChanged", (lng) => { - console.log("Язык изменён на:", lng); + console.log("🔄 Main i18n: Language changed to:", lng); +}); + +i18n.on("initialized", (options) => { + console.log("🎯 Main i18n: Initialized event fired with options:", options); }); i18n.on("failedLoading", (lng, ns, msg) => { - console.error(`Ошибка загрузки ${lng}.json:`, msg); + console.error(`💥 Main i18n: Failed loading ${lng}.json:`, msg); // Если не удалось загрузить русский, пробуем английский if (lng === "ru") { - console.log("Пробуем загрузить английский язык как fallback"); + console.log("🔄 Main i18n: Trying to load English as fallback"); i18n.changeLanguage("en"); } }); i18n.on("loaded", (loaded) => { - console.log("Переводы загружены:", loaded); + console.log("📦 Main i18n: Translations loaded:", loaded); }); i18n.on("missingKey", (lngs, namespace, key, res) => { - console.warn("Отсутствует ключ перевода:", { lngs, namespace, key, res }); + console.warn("⚠️ Main i18n: Missing key event:", { lngs, namespace, key, res }); }); export default i18n; diff --git a/src/i18n/i18nWidget.ts b/src/i18n/i18nWidget.ts index f02af5d..04e8984 100644 --- a/src/i18n/i18nWidget.ts +++ b/src/i18n/i18nWidget.ts @@ -5,7 +5,9 @@ import { initReactI18next } from "react-i18next"; const getLanguageFromURL = (): string => { const path = window.location.pathname; const langMatch = path.match(/^\/(en|ru|uz)(\/|$)/i); - return langMatch ? langMatch[1].toLowerCase() : "ru"; // Фолбэк на 'ru' + const detectedLang = langMatch ? langMatch[1].toLowerCase() : "ru"; // Фолбэк на 'ru' + console.log("🔍 Widget i18n: Detected language from URL:", detectedLang, "path:", path); + return detectedLang; }; // 2. Локали, встроенные прямо в конфиг @@ -199,6 +201,10 @@ const r = { }, }; +console.log("🚀 Widget i18n: Starting initialization..."); +console.log("🔍 Widget i18n: i18next instance before init:", i18n); +console.log("🔍 Widget i18n: i18next isInitialized before init:", i18n.isInitialized); + // 3. Конфигурация i18n без Backend i18n .use(initReactI18next) @@ -220,11 +226,11 @@ i18n caches: [], }, parseMissingKeyHandler: (key) => { - console.warn("Missing translation:", key); + console.warn("⚠️ Widget i18n: Missing translation key:", key); return key; }, missingKeyHandler: (lngs, ns, key) => { - console.error("🚨 Missing i18n key:", { + console.error("🚨 Widget i18n: Missing i18n key:", { key, languages: lngs, namespace: ns, @@ -233,21 +239,53 @@ i18n }, }) .then(() => { - console.log("i18n initialized. Current language:", i18n.language); - console.log("Available languages:", i18n.languages); - console.log("Available keys for ru:", Object.keys(r.ru)); - console.log("Available keys for en:", Object.keys(r.en)); - console.log("Available keys for uz:", Object.keys(r.uz)); - console.log("Looking for keys: Step, of, Prev, Next"); - console.log("Step in ru:", r.ru.Step); - console.log("of in ru:", r.ru.of); - console.log("Prev in ru:", r.ru.Prev); - console.log("Next in ru:", r.ru.Next); + console.log("✅ Widget i18n: Initialization completed successfully"); + console.log("🔍 Widget i18n: Current language:", i18n.language); + console.log("🔍 Widget i18n: Available languages:", i18n.languages); + console.log("🔍 Widget i18n: Available keys for ru:", Object.keys(r.ru)); + console.log("🔍 Widget i18n: Available keys for en:", Object.keys(r.en)); + console.log("🔍 Widget i18n: Available keys for uz:", Object.keys(r.uz)); + console.log("🔍 Widget i18n: Looking for keys: Step, of, Prev, Next"); + console.log("🔍 Widget i18n: Step in ru:", r.ru.Step); + console.log("🔍 Widget i18n: of in ru:", r.ru.of); + console.log("🔍 Widget i18n: Prev in ru:", r.ru.Prev); + console.log("🔍 Widget i18n: Next in ru:", r.ru.Next); + + // Проверяем, что ключи доступны через i18n + console.log("🔍 Widget i18n: Testing translations through i18n:"); + console.log("🔍 Widget i18n: t('Step'):", i18n.t("Step")); + console.log("🔍 Widget i18n: t('of'):", i18n.t("of")); + console.log("🔍 Widget i18n: t('Prev'):", i18n.t("Prev")); + console.log("🔍 Widget i18n: t('Next'):", i18n.t("Next")); + + // Проверяем состояние i18n + console.log("🔍 Widget i18n: i18n.isInitialized:", i18n.isInitialized); + console.log("🔍 Widget i18n: i18n.store.data:", i18n.store.data); + console.log("🔍 Widget i18n: i18n.store.options:", i18n.store.options); + }) + .catch((error) => { + console.error("❌ Widget i18n: Initialization failed:", error); }); // 4. Логирование событий i18n.on("languageChanged", (lng) => { - console.log("Language changed to:", lng); + console.log("🔄 Widget i18n: Language changed to:", lng); +}); + +i18n.on("initialized", (options) => { + console.log("🎯 Widget i18n: Initialized event fired with options:", options); +}); + +i18n.on("loaded", (loaded) => { + console.log("📦 Widget i18n: Loaded event fired:", loaded); +}); + +i18n.on("failedLoading", (lng, ns, msg) => { + console.error("💥 Widget i18n: Failed loading:", { lng, ns, msg }); +}); + +i18n.on("missingKey", (lngs, namespace, key, res) => { + console.warn("⚠️ Widget i18n: Missing key event:", { lngs, namespace, key, res }); }); export default i18n; diff --git a/src/main.tsx b/src/main.tsx index 48b5bbc..ea5912d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,8 +2,14 @@ import { createRoot } from "react-dom/client"; import { RouteObject, RouterProvider, createBrowserRouter } from "react-router-dom"; import App from "./App"; import { StrictMode, lazy } from "react"; + +console.log("🚀 Main: Starting main application..."); +console.log("🔍 Main: About to import main i18n..."); + import "./i18n/i18n"; +console.log("✅ Main: Main i18n imported successfully"); + const routes: RouteObject[] = [ { path: "/", @@ -38,8 +44,12 @@ const router = createBrowserRouter(routes); const root = createRoot(document.getElementById("root")!); +console.log("🔧 Main: About to render application..."); + root.render( ); + +console.log("✅ Main: Application rendered successfully"); diff --git a/src/widget.tsx b/src/widget.tsx index 97c62d8..79a827d 100644 --- a/src/widget.tsx +++ b/src/widget.tsx @@ -2,8 +2,14 @@ import QuizAnswerer from "@/components/QuizAnswerer"; import { createRoot } from "react-dom/client"; // eslint-disable-next-line react-refresh/only-export-components export * from "./widgets"; + +console.log("🚀 Widget: Starting widget initialization..."); +console.log("🔍 Widget: About to import i18nWidget..."); + import "./i18n/i18nWidget"; +console.log("✅ Widget: i18nWidget imported successfully"); + // old widget const widget = { create({ @@ -15,11 +21,18 @@ const widget = { quizId: string; changeFaviconAndTitle: boolean; }) { - const element = document.getElementById(selector); - if (!element) throw new Error("Element for widget doesn't exist"); + console.log("🔧 Widget: create() called with:", { selector, quizId, changeFaviconAndTitle }); + const element = document.getElementById(selector); + if (!element) { + console.error("❌ Widget: Element for widget doesn't exist:", selector); + throw new Error("Element for widget doesn't exist"); + } + + console.log("✅ Widget: Element found, creating root..."); const root = createRoot(element); + console.log("🔧 Widget: Rendering QuizAnswerer component..."); root.render( ); + console.log("✅ Widget: QuizAnswerer component rendered successfully"); }, }; +console.log("✅ Widget: Widget object created and exported"); + export default widget;