add quizId as App prop and widget param

This commit is contained in:
nflnkr 2024-01-31 17:39:50 +03:00
parent 1e3fc3ae26
commit 3f43b1bfaa
3 changed files with 20 additions and 18 deletions

@ -9,14 +9,18 @@ import { ViewPage } from "./pages/ViewPublicationPage";
import lightTheme from "./utils/themes/light"; import lightTheme from "./utils/themes/light";
const defaultQuizId = "ef836ff8-35b1-4031-9acf-af5766bac2b2";
moment.locale("ru"); moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
interface Props { interface Props {
widget?: boolean; widget?: boolean;
quizId?: string;
} }
export default function App({ widget = false }: Props) { export default function App({ widget = false, quizId }: Props) {
quizId ??= defaultQuizId;
return ( return (
<SWRConfig value={{ <SWRConfig value={{
@ -30,20 +34,20 @@ export default function App({ widget = false }: Props) {
style={{ backgroundColor: lightTheme.palette.brightPurple.main }} style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
> >
<CssBaseline /> <CssBaseline />
{widget ? {widget ? (
<Box sx={{ <Box sx={{
width: "100%", width: "100%",
height: "100%", height: "100%",
}}> }}>
<ViewPage /> <ViewPage quizId={quizId} />
</Box> </Box>
: ) : (
<Box sx={{ <Box sx={{
height: "100dvh", height: "100dvh",
}}> }}>
<ViewPage /> <ViewPage quizId={quizId} />
</Box> </Box>
} )}
</SnackbarProvider> </SnackbarProvider>
</ThemeProvider> </ThemeProvider>
</LocalizationProvider> </LocalizationProvider>

@ -12,19 +12,15 @@ import { ApologyPage } from "./ApologyPage";
import { Question } from "./Question"; import { Question } from "./Question";
import { StartPageViewPublication } from "./StartPageViewPublication"; import { StartPageViewPublication } from "./StartPageViewPublication";
import { parseQuizData } from "@model/api/getQuizData"; import { parseQuizData } from "@model/api/getQuizData";
import { replaceSpacesToEmptyLines } from "./tools/replaceSpacesToEmptyLines"; import { replaceSpacesToEmptyLines } from "./tools/replaceSpacesToEmptyLines";
const QID = type Props = {
import.meta.env.PROD ? quizId: string;
window.location.pathname.replace(/\//g, '') };
:
"ef836ff8-35b1-4031-9acf-af5766bac2b2";
export const ViewPage = ({ quizId }: Props) => {
export const ViewPage = () => { const { isLoading, error } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
const { isLoading, error } = useSWR(["quizData", QID], params => getQuizData(params[1]), {
onSuccess: setQuizData, onSuccess: setQuizData,
}); });
const { settings, items, recentlyСompleted } = useQuestionsStore(); const { settings, items, recentlyСompleted } = useQuestionsStore();

@ -5,15 +5,16 @@ import App from "./App";
let root: Root | undefined = undefined; let root: Root | undefined = undefined;
const widget = { const widget = {
create({ selector }: { create({ selector, quizId }: {
selector: string; selector: string;
quizId: string;
}) { }) {
const element = document.getElementById(selector); const element = document.getElementById(selector);
if (!element) throw new Error("Element for widget doesn't exist"); if (!element) throw new Error("Element for widget doesn't exist");
root = createRoot(element); root = createRoot(element);
root.render(<App widget />); root.render(<App widget quizId={quizId} />);
}, },
unmount() { unmount() {
if (root) root.unmount(); if (root) root.unmount();
@ -27,7 +28,8 @@ export default widget;
import widget from ".../widget.js"; import widget from ".../widget.js";
widget.create({ widget.create({
selector: "widget-container" selector: "widget-container",
quizId: "...",
}) })
</script> </script>
*/ */