diff --git a/lib/components/QuizAnswerer.tsx b/lib/components/QuizAnswerer.tsx index 7e4c2f2..376c87d 100644 --- a/lib/components/QuizAnswerer.tsx +++ b/lib/components/QuizAnswerer.tsx @@ -1,6 +1,6 @@ import { QuizDataContext } from "@contexts/QuizDataContext"; import { QuizSettings } from "@model/settingsData"; -import { CssBaseline, ThemeProvider } from "@mui/material"; +import { Box, CssBaseline, 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'; @@ -11,6 +11,8 @@ import { SnackbarProvider } from 'notistack'; import { ErrorBoundary } from "react-error-boundary"; import { ApologyPage } from "./ViewPublicationPage/ApologyPage"; import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage"; +import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext"; +import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react"; moment.locale("ru"); @@ -23,25 +25,54 @@ type Props = { }; export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) { + const [rootContainerWidth, setRootContainerWidth] = useState(() => window.innerWidth); + const rootContainerRef = useRef(null); + + useLayoutEffect(() => { + if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); + }, []); + + useEffect(() => { + const handleWindowResize = () => { + startTransition(() => { + if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth); + }); + }; + window.addEventListener("resize", handleWindowResize); + + return () => { + window.removeEventListener("resize", handleWindowResize); + }; + }, []); return ( - - - - - - + + + + - - - - - - + + + + + + + + + + + ); } diff --git a/package.json b/package.json index bfcda90..f6a0fc5 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@frontend/squzanswerer", - "version": "1.0.3", + "version": "1.0.4", "type": "module", "main": "./dist-package/index.js", "module": "./dist-package/index.js", diff --git a/src/App.tsx b/src/App.tsx index fb43140..ec0278a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,6 @@ import { getQuizData } from "@api/quizRelase"; -import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext"; import { Box } from "@mui/material"; import LoadingSkeleton from "@ui_kit/LoadingSkeleton"; -import { startTransition, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import useSWR from "swr"; import QuizAnswerer from "../lib/components/QuizAnswerer"; @@ -14,7 +12,6 @@ const defaultQuizId = "d354ba89-0bd3-4d5e-a8ce-88d6f387f3fc"; //looooong header export default function App() { const quizId = useParams().quizId ?? defaultQuizId; - const [rootContainerSize, setRootContainerSize] = useState(() => window.innerWidth); const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), { revalidateOnFocus: false, revalidateOnReconnect: false, @@ -22,30 +19,18 @@ export default function App() { refreshInterval: 0, }); - useEffect(() => { - const handleWindowResize = () => { - startTransition(() => { - setRootContainerSize(window.innerWidth); - }); - }; - window.addEventListener("resize", handleWindowResize); - - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, []); - if (isLoading) return ; if (error) return ; if (!data) throw new Error("Quiz data is null"); return ( - - - - - + + + ); } diff --git a/src/WidgetApp.tsx b/src/WidgetApp.tsx index 69e8074..7f5a370 100644 --- a/src/WidgetApp.tsx +++ b/src/WidgetApp.tsx @@ -1,8 +1,5 @@ import { getQuizData } from "@api/quizRelase"; -import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext"; -import { Box } from "@mui/material"; import LoadingSkeleton from "@ui_kit/LoadingSkeleton"; -import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react"; import useSWR from "swr"; import QuizAnswerer from "../lib/components/QuizAnswerer"; import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage"; @@ -13,8 +10,6 @@ interface Props { } export default function WidgetApp({ quizId }: Props) { - const [rootContainerSize, setRootContainerSize] = useState(() => window.innerWidth); - const rootContainerRef = useRef(null); const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), { revalidateOnFocus: false, revalidateOnReconnect: false, @@ -22,38 +17,14 @@ export default function WidgetApp({ quizId }: Props) { refreshInterval: 0, }); - useLayoutEffect(() => { - if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth); - }, []); - - useEffect(() => { - const handleWindowResize = () => { - startTransition(() => { - if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth); - }); - }; - window.addEventListener("resize", handleWindowResize); - - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, []); - if (isLoading) return ; if (error) return ; if (!data) throw new Error("Quiz data is null"); return ( - - - - - + ); }