publish 1.0.4

QuizAnswerer determines its size by itself

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<number>(() => window.innerWidth);
+    const rootContainerRef = useRef<HTMLDivElement>(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 (
-        <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
+        <RootContainerWidthContext.Provider value={rootContainerWidth}>
-            <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
+            <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
-                <ThemeProvider theme={lightTheme}>
+                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
-                    <SnackbarProvider
+                    <ThemeProvider theme={lightTheme}>
-                        preventDuplicate={true}
+                        <SnackbarProvider
-                        style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
+                            preventDuplicate={true}
-                    >
+                            style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
-                        <CssBaseline />
-                        <ErrorBoundary
-                            FallbackComponent={ApologyPage}
-                            onError={handleComponentError}
                         >
-                            <ViewPublicationPage />
+                            <CssBaseline />
-                        </ErrorBoundary>
+                            <Box
-                    </SnackbarProvider>
+                                ref={rootContainerRef}
-                </ThemeProvider>
+                                sx={{
-            </LocalizationProvider>
+                                    width: "100%",
-        </QuizDataContext.Provider>
+                                    height: "100%",
+                                }}
+                            >
+                                <ErrorBoundary
+                                    FallbackComponent={ApologyPage}
+                                    onError={handleComponentError}
+                                >
+                                    <ViewPublicationPage />
+                                </ErrorBoundary>
+                            </Box>
+                        </SnackbarProvider>
+                    </ThemeProvider>
+                </LocalizationProvider>
+            </QuizDataContext.Provider>
+        </RootContainerWidthContext.Provider>
     );
 } 

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",

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<number>(() => 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 <LoadingSkeleton />;
     if (error) return <ApologyPage error={error} />;
     if (!data) throw new Error("Quiz data is null");
 
     return (
-        <RootContainerWidthContext.Provider value={rootContainerSize}>
+        <Box sx={{
-            <Box sx={{
+            height: "100dvh",
-                height: "100dvh",
+        }}>
-            }}>
+            <QuizAnswerer
-                <QuizAnswerer quizSettings={data} quizId={quizId} />
+                quizSettings={data}
-            </Box>
+                quizId={quizId}
-        </RootContainerWidthContext.Provider>
+            />
+        </Box>
     );
 }

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<number>(() => window.innerWidth);
-    const rootContainerRef = useRef<HTMLDivElement>(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 <LoadingSkeleton />;
     if (error) return <ApologyPage error={error} />;
     if (!data) throw new Error("Quiz data is null");
 
     return (
-        <RootContainerWidthContext.Provider value={rootContainerSize}>
+        <QuizAnswerer
-            <Box
+            quizSettings={data}
-                ref={rootContainerRef}
+            quizId={quizId}
-                sx={{
+        />
-                    width: "100%",
-                    height: "100%",
-                }}
-            >
-                <QuizAnswerer quizSettings={data} quizId={quizId} />
-            </Box>
-        </RootContainerWidthContext.Provider>
     );
 }