41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { startTransition, useEffect, useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import QuizAnswerer from "./QuizAnswerer";
|
|
import { QuizIdContext } from "./contexts/QuizIdContext";
|
|
import { RootContainerWidthContext } from "./contexts/RootContainerWidthContext";
|
|
|
|
const defaultQuizId = "48471ba0-a639-4be2-91e3-50149c4b73af"; // branching
|
|
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header
|
|
// const defaultQuizId = "a9d31460-132a-4479-a3f0-90241498b6f9"; // linear
|
|
|
|
export default function App() {
|
|
const quizId = useParams().quizId ?? defaultQuizId;
|
|
const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
|
|
|
|
useEffect(() => {
|
|
const handleWindowResize = () => {
|
|
startTransition(() => {
|
|
setRootContainerSize(window.innerWidth);
|
|
});
|
|
};
|
|
window.addEventListener("resize", handleWindowResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleWindowResize);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<RootContainerWidthContext.Provider value={rootContainerSize}>
|
|
<QuizIdContext.Provider value={quizId}>
|
|
<Box sx={{
|
|
height: "100dvh",
|
|
}}>
|
|
<QuizAnswerer />
|
|
</Box>
|
|
</QuizIdContext.Provider>
|
|
</RootContainerWidthContext.Provider>
|
|
);
|
|
}
|