QuizAnswerer component does not fetch data, but receives it as props
WidgetApp and App components fetch quiz data
This commit is contained in:
nflnkr
parent
d147ca97f8
commit
06515a64f9
@ -1,7 +1,9 @@
|
||||
import { GetQuizDataResponse } from "@model/api/getQuizData";
|
||||
import { GetQuizDataResponse, parseQuizData } from "@model/api/getQuizData";
|
||||
import axios from "axios";
|
||||
|
||||
import type { AxiosError } from "axios";
|
||||
import { replaceSpacesToEmptyLines } from "../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
|
||||
let SESSIONS = "";
|
||||
|
||||
@ -57,6 +59,24 @@ export async function getData(quizId: string): Promise<{
|
||||
}
|
||||
}
|
||||
|
||||
export async function getQuizData(quizId: string) {
|
||||
const response = await getData(quizId);
|
||||
const quizDataResponse = response.data;
|
||||
|
||||
if (response.error) {
|
||||
throw new Error(response.error);
|
||||
}
|
||||
if (!quizDataResponse) {
|
||||
throw new Error("Quiz not found");
|
||||
}
|
||||
|
||||
const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse));
|
||||
|
||||
const res = JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings;
|
||||
res.recentlyCompleted = response.isRecentlyCompleted;
|
||||
return res;
|
||||
}
|
||||
|
||||
export function sendAnswer({ questionId, body, qid }: any) {
|
||||
const formData = new FormData();
|
||||
|
||||
|
||||
@ -1,29 +1,31 @@
|
||||
import { QuizDataContext } from "@contexts/QuizDataContext";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import { 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';
|
||||
import ErrorBoundaryFallback from "@ui_kit/ErrorBoundaryFallback";
|
||||
import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
|
||||
import { handleComponentError } from "@utils/handleComponentError";
|
||||
import lightTheme from "@utils/themes/light";
|
||||
import moment from "moment";
|
||||
import { SnackbarProvider } from 'notistack';
|
||||
import { Suspense } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import { SWRConfig } from "swr";
|
||||
import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
|
||||
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
|
||||
import lightTheme from "@utils/themes/light";
|
||||
|
||||
|
||||
moment.locale("ru");
|
||||
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
|
||||
|
||||
export default function QuizAnswerer() {
|
||||
type Props = {
|
||||
quizSettings: QuizSettings;
|
||||
quizId: string;
|
||||
preview?: boolean;
|
||||
};
|
||||
|
||||
export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) {
|
||||
|
||||
return (
|
||||
<SWRConfig value={{
|
||||
revalidateOnFocus: false,
|
||||
shouldRetryOnError: false,
|
||||
}}>
|
||||
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
|
||||
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SnackbarProvider
|
||||
@ -32,16 +34,14 @@ export default function QuizAnswerer() {
|
||||
>
|
||||
<CssBaseline />
|
||||
<ErrorBoundary
|
||||
FallbackComponent={ErrorBoundaryFallback}
|
||||
FallbackComponent={ApologyPage}
|
||||
onError={handleComponentError}
|
||||
>
|
||||
<Suspense fallback={<LoadingSkeleton />}>
|
||||
<ViewPublicationPage />
|
||||
</Suspense>
|
||||
<ViewPublicationPage />
|
||||
</ErrorBoundary>
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</LocalizationProvider>
|
||||
</SWRConfig>
|
||||
</QuizDataContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { FallbackProps } from "react-error-boundary";
|
||||
|
||||
type Props = {
|
||||
message: string;
|
||||
};
|
||||
type Props = Partial<FallbackProps>;
|
||||
|
||||
export const ApologyPage = ({ message }: Props) => {
|
||||
export const ApologyPage = ({ error }: Props) => {
|
||||
let message = "Что-то пошло не так";
|
||||
|
||||
if (error.message === "No questions found") message = "Нет созданных вопросов";
|
||||
if (error.message === "Quiz already completed") message = "Вы уже прошли этот опрос";
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -17,9 +20,9 @@ export const ApologyPage = ({ message }: Props) => {
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: "center"
|
||||
textAlign: "center",
|
||||
}}
|
||||
>{message || "Что-то пошло не так"}</Typography>
|
||||
>{message}</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,11 +12,10 @@ import { sendFC } from "@api/quizRelase";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||
@ -29,8 +28,7 @@ type Props = {
|
||||
|
||||
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
const theme = useTheme();
|
||||
const qid = useQuizId();
|
||||
const { settings, questions } = useQuizData();
|
||||
const { settings, questions, quizId } = useQuizData();
|
||||
|
||||
const [ready, setReady] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
@ -74,13 +72,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
await sendFC({
|
||||
questionId: currentQuestion.id,
|
||||
body: body,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
||||
localStorage.setItem(
|
||||
"sessions",
|
||||
JSON.stringify({ ...sessions, [qid]: new Date().getTime() })
|
||||
JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
|
||||
);
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
@ -116,15 +114,15 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
&& adress.length === 0
|
||||
) return enqueueSnackbar("Пожалуйста, заполните поля");
|
||||
|
||||
//почта валидна, хоть одно поле заполнено
|
||||
setFire(true);
|
||||
//почта валидна, хоть одно поле заполнено
|
||||
setFire(true);
|
||||
try {
|
||||
await inputHC();
|
||||
fireOnce.current = false;
|
||||
const sessions: any = JSON.parse(
|
||||
localStorage.getItem("sessions") || "{}"
|
||||
);
|
||||
sessions[qid] = Date.now();
|
||||
sessions[quizId] = Date.now();
|
||||
localStorage.setItem(
|
||||
"sessions",
|
||||
JSON.stringify(sessions)
|
||||
@ -243,7 +241,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||
</Button>
|
||||
}
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
|
||||
type FooterProps = {
|
||||
stepNumber: number | null;
|
||||
|
||||
@ -17,7 +17,7 @@ import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
|
||||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||||
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { notReachable } from "@utils/notReachable";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
|
||||
@ -5,7 +5,7 @@ import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import { setCurrentQuizStep } from "@stores/quizView";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Button, ThemeProvider } from "@mui/material";
|
||||
import { useQuizViewStore } from "@stores/quizView";
|
||||
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { notReachable } from "@utils/notReachable";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { ReactElement, useEffect } from "react";
|
||||
@ -37,7 +37,7 @@ export default function ViewPublicationPage() {
|
||||
|
||||
if (recentlyCompleted) throw new Error("Quiz already completed");
|
||||
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
|
||||
|
||||
|
||||
let quizStepElement: ReactElement;
|
||||
switch (currentQuizStep) {
|
||||
case "startpage": {
|
||||
|
||||
@ -10,8 +10,7 @@ import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type DateProps = {
|
||||
currentQuestion: QuizQuestionDate;
|
||||
@ -19,8 +18,7 @@ type DateProps = {
|
||||
|
||||
export const Date = ({ currentQuestion }: DateProps) => {
|
||||
const theme = useTheme();
|
||||
const qid = useQuizId();
|
||||
const { settings } = useQuizData();
|
||||
const { settings, quizId } = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
@ -62,7 +60,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: moment(date).format("YYYY.MM.DD"),
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
|
||||
@ -16,8 +16,8 @@ import RadioIcon from "@ui_kit/RadioIcon";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type EmojiProps = {
|
||||
currentQuestion: QuizQuestionEmoji;
|
||||
@ -25,7 +25,7 @@ type EmojiProps = {
|
||||
|
||||
export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
const theme = useTheme();
|
||||
const qid = useQuizId();
|
||||
const quizId = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const { answer } =
|
||||
answers.find(
|
||||
@ -120,7 +120,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
@ -142,7 +142,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
|
||||
@ -17,9 +17,9 @@ import type { UploadFileType } from "@model/questionTypes/file";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type { DragEvent } from "react";
|
||||
import { useState, type ChangeEvent } from "react";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type FileProps = {
|
||||
currentQuestion: QuizQuestionFile;
|
||||
@ -118,7 +118,7 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
|
||||
export const File = ({ currentQuestion }: FileProps) => {
|
||||
const theme = useTheme();
|
||||
const { answers } = useQuizViewStore();
|
||||
const qid = useQuizId();
|
||||
const quizId = useQuizData();
|
||||
const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");
|
||||
|
||||
const answer = answers.find(
|
||||
@ -147,14 +147,14 @@ export const File = ({ currentQuestion }: FileProps) => {
|
||||
file: file,
|
||||
name: file.name
|
||||
},
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: `https://storage.yandexcloud.net/squizanswer/${qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
|
||||
qid,
|
||||
body: `https://storage.yandexcloud.net/squizanswer/${quizId}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
|
||||
@ -13,16 +13,16 @@ import RadioIcon from "@ui_kit/RadioIcon";
|
||||
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type ImagesProps = {
|
||||
currentQuestion: QuizQuestionImages;
|
||||
};
|
||||
|
||||
export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
const qid = useQuizId();
|
||||
const quizId =useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const theme = useTheme();
|
||||
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
|
||||
@ -74,7 +74,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
@ -95,7 +95,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
|
||||
@ -11,446 +11,444 @@ import { sendAnswer } from "@api/quizRelase";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type { QuizQuestionNumber } from "@model/questionTypes/number";
|
||||
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useQuizId } from "@contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||
|
||||
import type { ChangeEvent, SyntheticEvent } from "react";
|
||||
|
||||
type NumberProps = {
|
||||
currentQuestion: QuizQuestionNumber;
|
||||
currentQuestion: QuizQuestionNumber;
|
||||
};
|
||||
|
||||
export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
const qid = useQuizId();
|
||||
const { settings } = useQuizData();
|
||||
const [inputValue, setInputValue] = useState<string>("0");
|
||||
const [minRange, setMinRange] = useState<string>("0");
|
||||
const [maxRange, setMaxRange] = useState<string>("100000000000");
|
||||
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
|
||||
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
|
||||
const [reversedMaxRange, setReversedMaxRange] =
|
||||
useState<string>("100000000000");
|
||||
const theme = useTheme();
|
||||
const { answers } = useQuizViewStore();
|
||||
const { settings, quizId } = useQuizData();
|
||||
const [inputValue, setInputValue] = useState<string>("0");
|
||||
const [minRange, setMinRange] = useState<string>("0");
|
||||
const [maxRange, setMaxRange] = useState<string>("100000000000");
|
||||
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
|
||||
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
|
||||
const [reversedMaxRange, setReversedMaxRange] =
|
||||
useState<string>("100000000000");
|
||||
const theme = useTheme();
|
||||
const { answers } = useQuizViewStore();
|
||||
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const [minBorder, maxBorder] = currentQuestion.content.range
|
||||
.split("—")
|
||||
.map(window.Number);
|
||||
const min = minBorder < maxBorder ? minBorder : maxBorder;
|
||||
const max = minBorder < maxBorder ? maxBorder : minBorder;
|
||||
const reversed = minBorder > maxBorder;
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const [minBorder, maxBorder] = currentQuestion.content.range
|
||||
.split("—")
|
||||
.map(window.Number);
|
||||
const min = minBorder < maxBorder ? minBorder : maxBorder;
|
||||
const max = minBorder < maxBorder ? maxBorder : minBorder;
|
||||
const reversed = minBorder > maxBorder;
|
||||
|
||||
const sendAnswerToBackend = async (value: string, noUpdate = false) => {
|
||||
try {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: value,
|
||||
qid,
|
||||
});
|
||||
const sendAnswerToBackend = async (value: string, noUpdate = false) => {
|
||||
try {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: value,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
if (!noUpdate) {
|
||||
updateAnswer(currentQuestion.id, value, 0);
|
||||
}
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
};
|
||||
|
||||
const updateValueDebounced = useDebouncedCallback(async (value: string) => {
|
||||
if (reversed) {
|
||||
const newValue =
|
||||
window.Number(value) < window.Number(min)
|
||||
? String(min)
|
||||
: window.Number(value) > window.Number(max)
|
||||
? String(max)
|
||||
: value;
|
||||
|
||||
setReversedInputValue(newValue);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
String(max + min - window.Number(newValue)),
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(String(window.Number(newValue)), true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const newValue =
|
||||
window.Number(value) < window.Number(minRange)
|
||||
? minRange
|
||||
: window.Number(value) > window.Number(maxRange)
|
||||
? maxRange
|
||||
: value;
|
||||
|
||||
setInputValue(newValue);
|
||||
await sendAnswerToBackend(newValue);
|
||||
}, 1000);
|
||||
const updateMinRangeDebounced = useDebouncedCallback(
|
||||
async (value: string, crowded = false) => {
|
||||
if (reversed) {
|
||||
const newMinRange = crowded
|
||||
? window.Number(value.split("—")[1])
|
||||
: max + min - window.Number(value.split("—")[0]) < min
|
||||
? min
|
||||
: max + min - window.Number(value.split("—")[0]);
|
||||
|
||||
const newMinValue =
|
||||
window.Number(value.split("—")[0]) > max
|
||||
? String(max)
|
||||
: value.split("—")[0];
|
||||
|
||||
setReversedMinRange(
|
||||
crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
|
||||
);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
`${newMinRange}—${value.split("—")[1]}`,
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(
|
||||
`${newMinValue}—${value.split("—")[1]}`,
|
||||
true
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const newMinValue = crowded
|
||||
? maxRange
|
||||
: window.Number(value.split("—")[0]) < min
|
||||
? String(min)
|
||||
: value.split("—")[0];
|
||||
|
||||
setMinRange(newMinValue);
|
||||
await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
|
||||
},
|
||||
1000
|
||||
);
|
||||
const updateMaxRangeDebounced = useDebouncedCallback(
|
||||
async (value: string, crowded = false) => {
|
||||
if (reversed) {
|
||||
const newMaxRange = crowded
|
||||
? window.Number(value.split("—")[1])
|
||||
: max + min - window.Number(value.split("—")[1]) > max
|
||||
? max
|
||||
: max + min - window.Number(value.split("—")[1]);
|
||||
|
||||
const newMaxValue =
|
||||
window.Number(value.split("—")[1]) < min
|
||||
? String(min)
|
||||
: value.split("—")[1];
|
||||
|
||||
setReversedMaxRange(
|
||||
crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
|
||||
);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
`${value.split("—")[0]}—${newMaxRange}`,
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(
|
||||
`${value.split("—")[0]}—${newMaxValue}`,
|
||||
true
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const newMaxValue = crowded
|
||||
? minRange
|
||||
: window.Number(value.split("—")[1]) > max
|
||||
? String(max)
|
||||
: value.split("—")[1];
|
||||
|
||||
setMaxRange(newMaxValue);
|
||||
await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
|
||||
},
|
||||
1000
|
||||
);
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
)?.answer as string;
|
||||
|
||||
const sliderValue =
|
||||
answer ||
|
||||
(reversed
|
||||
? max + min - currentQuestion.content.start + "—" + max
|
||||
: currentQuestion.content.start + "—" + max);
|
||||
|
||||
useEffect(() => {
|
||||
if (answer) {
|
||||
if (answer.includes("—")) {
|
||||
if (reversed) {
|
||||
setReversedMinRange(
|
||||
String(max + min - window.Number(answer.split("—")[0]))
|
||||
);
|
||||
setReversedMaxRange(
|
||||
String(max + min - window.Number(answer.split("—")[1]))
|
||||
);
|
||||
} else {
|
||||
setMinRange(answer.split("—")[0]);
|
||||
setMaxRange(answer.split("—")[1]);
|
||||
if (!noUpdate) {
|
||||
updateAnswer(currentQuestion.id, value, 0);
|
||||
}
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
} else {
|
||||
};
|
||||
|
||||
const updateValueDebounced = useDebouncedCallback(async (value: string) => {
|
||||
if (reversed) {
|
||||
setReversedInputValue(String(max + min - window.Number(answer)));
|
||||
} else {
|
||||
setInputValue(answer);
|
||||
const newValue =
|
||||
window.Number(value) < window.Number(min)
|
||||
? String(min)
|
||||
: window.Number(value) > window.Number(max)
|
||||
? String(max)
|
||||
: value;
|
||||
|
||||
setReversedInputValue(newValue);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
String(max + min - window.Number(newValue)),
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(String(window.Number(newValue)), true);
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!answer) {
|
||||
setMinRange(String(currentQuestion.content.start));
|
||||
setMaxRange(String(max));
|
||||
const newValue =
|
||||
window.Number(value) < window.Number(minRange)
|
||||
? minRange
|
||||
: window.Number(value) > window.Number(maxRange)
|
||||
? maxRange
|
||||
: value;
|
||||
|
||||
if (currentQuestion.content.chooseRange) {
|
||||
setReversedMinRange(String(currentQuestion.content.start));
|
||||
setReversedMaxRange(String(min));
|
||||
}
|
||||
setInputValue(newValue);
|
||||
await sendAnswerToBackend(newValue);
|
||||
}, 1000);
|
||||
const updateMinRangeDebounced = useDebouncedCallback(
|
||||
async (value: string, crowded = false) => {
|
||||
if (reversed) {
|
||||
const newMinRange = crowded
|
||||
? window.Number(value.split("—")[1])
|
||||
: max + min - window.Number(value.split("—")[0]) < min
|
||||
? min
|
||||
: max + min - window.Number(value.split("—")[0]);
|
||||
|
||||
setReversedInputValue(String(currentQuestion.content.start));
|
||||
setInputValue(String(currentQuestion.content.start));
|
||||
}
|
||||
}, []);
|
||||
const newMinValue =
|
||||
window.Number(value.split("—")[0]) > max
|
||||
? String(max)
|
||||
: value.split("—")[0];
|
||||
|
||||
const onSliderChange = (_: Event, value: number | number[]) => {
|
||||
const range = Array.isArray(value)
|
||||
? `${value[0]}—${value[1]}`
|
||||
: String(value);
|
||||
setReversedMinRange(
|
||||
crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
|
||||
);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
`${newMinRange}—${value.split("—")[1]}`,
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(
|
||||
`${newMinValue}—${value.split("—")[1]}`,
|
||||
true
|
||||
);
|
||||
|
||||
updateAnswer(currentQuestion.id, range, 0);
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const onChangeCommitted = async (
|
||||
_: Event | SyntheticEvent<Element, Event>,
|
||||
value: number | number[]
|
||||
) => {
|
||||
if (currentQuestion.content.chooseRange && Array.isArray(value)) {
|
||||
if (reversed) {
|
||||
const newMinReversedValue = String(max + min - value[0]);
|
||||
const newMaxReversedValue = String(max + min - value[1]);
|
||||
const newMinValue = crowded
|
||||
? maxRange
|
||||
: window.Number(value.split("—")[0]) < min
|
||||
? String(min)
|
||||
: value.split("—")[0];
|
||||
|
||||
setMinRange(String(value[0]));
|
||||
setMaxRange(String(value[1]));
|
||||
setReversedMinRange(newMinReversedValue);
|
||||
setReversedMaxRange(newMaxReversedValue);
|
||||
await sendAnswerToBackend(
|
||||
`${newMinReversedValue}—${newMaxReversedValue}`,
|
||||
true
|
||||
);
|
||||
setMinRange(newMinValue);
|
||||
await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
|
||||
},
|
||||
1000
|
||||
);
|
||||
const updateMaxRangeDebounced = useDebouncedCallback(
|
||||
async (value: string, crowded = false) => {
|
||||
if (reversed) {
|
||||
const newMaxRange = crowded
|
||||
? window.Number(value.split("—")[1])
|
||||
: max + min - window.Number(value.split("—")[1]) > max
|
||||
? max
|
||||
: max + min - window.Number(value.split("—")[1]);
|
||||
|
||||
return;
|
||||
}
|
||||
const newMaxValue =
|
||||
window.Number(value.split("—")[1]) < min
|
||||
? String(min)
|
||||
: value.split("—")[1];
|
||||
|
||||
setMinRange(String(value[0]));
|
||||
setMaxRange(String(value[1]));
|
||||
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
|
||||
setReversedMaxRange(
|
||||
crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
|
||||
);
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
`${value.split("—")[0]}—${newMaxRange}`,
|
||||
0
|
||||
);
|
||||
await sendAnswerToBackend(
|
||||
`${value.split("—")[0]}—${newMaxValue}`,
|
||||
true
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (reversed) {
|
||||
setReversedInputValue(String(max + min - window.Number(value)));
|
||||
} else {
|
||||
setInputValue(String(value));
|
||||
}
|
||||
const newMaxValue = crowded
|
||||
? minRange
|
||||
: window.Number(value.split("—")[1]) > max
|
||||
? String(max)
|
||||
: value.split("—")[1];
|
||||
|
||||
await sendAnswerToBackend(String(value));
|
||||
};
|
||||
setMaxRange(newMaxValue);
|
||||
await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
|
||||
},
|
||||
1000
|
||||
);
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
)?.answer as string;
|
||||
|
||||
const changeValueLabelFormat = (value: number) => {
|
||||
if (!reversed) {
|
||||
return value;
|
||||
}
|
||||
const sliderValue =
|
||||
answer ||
|
||||
(reversed
|
||||
? max + min - currentQuestion.content.start + "—" + max
|
||||
: currentQuestion.content.start + "—" + max);
|
||||
|
||||
const [minSliderBorder, maxSliderBorder] = sliderValue
|
||||
.split("—")
|
||||
.map(window.Number);
|
||||
useEffect(() => {
|
||||
if (answer) {
|
||||
if (answer.includes("—")) {
|
||||
if (reversed) {
|
||||
setReversedMinRange(
|
||||
String(max + min - window.Number(answer.split("—")[0]))
|
||||
);
|
||||
setReversedMaxRange(
|
||||
String(max + min - window.Number(answer.split("—")[1]))
|
||||
);
|
||||
} else {
|
||||
setMinRange(answer.split("—")[0]);
|
||||
setMaxRange(answer.split("—")[1]);
|
||||
}
|
||||
} else {
|
||||
if (reversed) {
|
||||
setReversedInputValue(String(max + min - window.Number(answer)));
|
||||
} else {
|
||||
setInputValue(answer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (value === minSliderBorder) {
|
||||
return max + min - minSliderBorder;
|
||||
}
|
||||
if (!answer) {
|
||||
setMinRange(String(currentQuestion.content.start));
|
||||
setMaxRange(String(max));
|
||||
|
||||
return max + min - maxSliderBorder;
|
||||
};
|
||||
if (currentQuestion.content.chooseRange) {
|
||||
setReversedMinRange(String(currentQuestion.content.start));
|
||||
setReversedMaxRange(String(min));
|
||||
}
|
||||
|
||||
const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = target.value.replace(/\D/g, "");
|
||||
setReversedInputValue(String(currentQuestion.content.start));
|
||||
setInputValue(String(currentQuestion.content.start));
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (reversed) {
|
||||
setReversedInputValue(value);
|
||||
} else {
|
||||
setInputValue(value);
|
||||
}
|
||||
const onSliderChange = (_: Event, value: number | number[]) => {
|
||||
const range = Array.isArray(value)
|
||||
? `${value[0]}—${value[1]}`
|
||||
: String(value);
|
||||
|
||||
updateValueDebounced(value);
|
||||
};
|
||||
updateAnswer(currentQuestion.id, range, 0);
|
||||
};
|
||||
|
||||
const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
const onChangeCommitted = async (
|
||||
_: Event | SyntheticEvent<Element, Event>,
|
||||
value: number | number[]
|
||||
) => {
|
||||
if (currentQuestion.content.chooseRange && Array.isArray(value)) {
|
||||
if (reversed) {
|
||||
const newMinReversedValue = String(max + min - value[0]);
|
||||
const newMaxReversedValue = String(max + min - value[1]);
|
||||
|
||||
if (reversed) {
|
||||
setReversedMinRange(newValue);
|
||||
setMinRange(String(value[0]));
|
||||
setMaxRange(String(value[1]));
|
||||
setReversedMinRange(newMinReversedValue);
|
||||
setReversedMaxRange(newMaxReversedValue);
|
||||
await sendAnswerToBackend(
|
||||
`${newMinReversedValue}—${newMaxReversedValue}`,
|
||||
true
|
||||
);
|
||||
|
||||
if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
|
||||
const value = max + min - window.Number(reversedMaxRange);
|
||||
updateMinRangeDebounced(`${value}—${value}`, true);
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
setMinRange(String(value[0]));
|
||||
setMaxRange(String(value[1]));
|
||||
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
|
||||
|
||||
updateMinRangeDebounced(
|
||||
`${newValue}—${max + min - window.Number(reversedMaxRange)}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
if (reversed) {
|
||||
setReversedInputValue(String(max + min - window.Number(value)));
|
||||
} else {
|
||||
setInputValue(String(value));
|
||||
}
|
||||
|
||||
setMinRange(newValue);
|
||||
await sendAnswerToBackend(String(value));
|
||||
};
|
||||
|
||||
if (window.Number(newValue) >= window.Number(maxRange)) {
|
||||
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
|
||||
const changeValueLabelFormat = (value: number) => {
|
||||
if (!reversed) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
const [minSliderBorder, maxSliderBorder] = sliderValue
|
||||
.split("—")
|
||||
.map(window.Number);
|
||||
|
||||
updateMinRangeDebounced(`${newValue}—${maxRange}`);
|
||||
};
|
||||
if (value === minSliderBorder) {
|
||||
return max + min - minSliderBorder;
|
||||
}
|
||||
|
||||
const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
return max + min - maxSliderBorder;
|
||||
};
|
||||
|
||||
if (reversed) {
|
||||
setReversedMaxRange(newValue);
|
||||
const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = target.value.replace(/\D/g, "");
|
||||
|
||||
if (window.Number(newValue) >= window.Number(reversedMinRange)) {
|
||||
const value = max + min - window.Number(reversedMinRange);
|
||||
updateMaxRangeDebounced(`${value}—${value}`, true);
|
||||
if (reversed) {
|
||||
setReversedInputValue(value);
|
||||
} else {
|
||||
setInputValue(value);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
updateValueDebounced(value);
|
||||
};
|
||||
|
||||
updateMaxRangeDebounced(
|
||||
`${max + min - window.Number(reversedMinRange)}—${newValue}`
|
||||
);
|
||||
const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
|
||||
return;
|
||||
}
|
||||
if (reversed) {
|
||||
setReversedMinRange(newValue);
|
||||
|
||||
setMaxRange(newValue);
|
||||
if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
|
||||
const value = max + min - window.Number(reversedMaxRange);
|
||||
updateMinRangeDebounced(`${value}—${value}`, true);
|
||||
|
||||
if (window.Number(newValue) <= window.Number(minRange)) {
|
||||
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
updateMinRangeDebounced(
|
||||
`${newValue}—${max + min - window.Number(reversedMaxRange)}`
|
||||
);
|
||||
|
||||
updateMaxRangeDebounced(`${minRange}—${newValue}`);
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>
|
||||
{currentQuestion.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
marginTop: "20px",
|
||||
gap: "30px",
|
||||
paddingRight: isMobile ? "10px" : undefined,
|
||||
}}
|
||||
>
|
||||
<CustomSlider
|
||||
value={
|
||||
currentQuestion.content.chooseRange
|
||||
? sliderValue.split("—").length || 0 > 1
|
||||
? sliderValue.split("—").map((item) => window.Number(item))
|
||||
: [min, min + 1]
|
||||
: window.Number(sliderValue.split("—")[0])
|
||||
}
|
||||
min={min}
|
||||
max={max}
|
||||
step={currentQuestion.content.step || 1}
|
||||
onChange={onSliderChange}
|
||||
onChangeCommitted={onChangeCommitted}
|
||||
valueLabelFormat={changeValueLabelFormat}
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
"& .MuiSlider-valueLabel": {
|
||||
background: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
setMinRange(newValue);
|
||||
|
||||
{!currentQuestion.content.chooseRange && (
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? reversedInputValue : inputValue}
|
||||
onChange={onInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
if (window.Number(newValue) >= window.Number(maxRange)) {
|
||||
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
|
||||
|
||||
{currentQuestion.content.chooseRange && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
alignItems: "center",
|
||||
"& .MuiFormControl-root": { width: "auto" },
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? String(reversedMinRange) : minRange}
|
||||
onChange={onMinInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography color={theme.palette.text.primary}>до</Typography>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? String(reversedMaxRange) : maxRange}
|
||||
onChange={onMaxInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
updateMinRangeDebounced(`${newValue}—${maxRange}`);
|
||||
};
|
||||
|
||||
const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
|
||||
if (reversed) {
|
||||
setReversedMaxRange(newValue);
|
||||
|
||||
if (window.Number(newValue) >= window.Number(reversedMinRange)) {
|
||||
const value = max + min - window.Number(reversedMinRange);
|
||||
updateMaxRangeDebounced(`${value}—${value}`, true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
updateMaxRangeDebounced(
|
||||
`${max + min - window.Number(reversedMinRange)}—${newValue}`
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setMaxRange(newValue);
|
||||
|
||||
if (window.Number(newValue) <= window.Number(minRange)) {
|
||||
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
updateMaxRangeDebounced(`${minRange}—${newValue}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>
|
||||
{currentQuestion.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
marginTop: "20px",
|
||||
gap: "30px",
|
||||
paddingRight: isMobile ? "10px" : undefined,
|
||||
}}
|
||||
>
|
||||
<CustomSlider
|
||||
value={
|
||||
currentQuestion.content.chooseRange
|
||||
? sliderValue.split("—").length || 0 > 1
|
||||
? sliderValue.split("—").map((item) => window.Number(item))
|
||||
: [min, min + 1]
|
||||
: window.Number(sliderValue.split("—")[0])
|
||||
}
|
||||
min={min}
|
||||
max={max}
|
||||
step={currentQuestion.content.step || 1}
|
||||
onChange={onSliderChange}
|
||||
onChangeCommitted={onChangeCommitted}
|
||||
valueLabelFormat={changeValueLabelFormat}
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
"& .MuiSlider-valueLabel": {
|
||||
background: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{!currentQuestion.content.chooseRange && (
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? reversedInputValue : inputValue}
|
||||
onChange={onInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentQuestion.content.chooseRange && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
alignItems: "center",
|
||||
"& .MuiFormControl-root": { width: "auto" },
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? String(reversedMinRange) : minRange}
|
||||
onChange={onMinInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography color={theme.palette.text.primary}>до</Typography>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={reversed ? String(reversedMaxRange) : maxRange}
|
||||
onChange={onMaxInputChange}
|
||||
sx={{
|
||||
maxWidth: "80px",
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,9 +17,9 @@ import TropfyIcon from "@icons/questionsPage/tropfyIcon";
|
||||
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type RatingProps = {
|
||||
currentQuestion: QuizQuestionRating;
|
||||
@ -57,7 +57,7 @@ const buttonRatingForm = [
|
||||
];
|
||||
|
||||
export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
const qid = useQuizId();
|
||||
const quizId = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
@ -98,7 +98,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: String(value) + " из " + currentQuestion.content.steps,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(currentQuestion.id, String(value), 0);
|
||||
|
||||
@ -6,8 +6,8 @@ import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
|
||||
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type SelectProps = {
|
||||
currentQuestion: QuizQuestionSelect;
|
||||
@ -15,7 +15,7 @@ type SelectProps = {
|
||||
|
||||
export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
const theme = useTheme();
|
||||
const qid = useQuizId();
|
||||
const { quizId } = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const { answer } =
|
||||
answers.find(
|
||||
@ -46,7 +46,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
@ -60,7 +60,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: String(currentQuestion.content.variants[Number(value)].answer),
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(currentQuestion.id, String(value), 0);
|
||||
|
||||
@ -7,8 +7,8 @@ import { updateAnswer, useQuizViewStore } from "@stores/quizView";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
type TextProps = {
|
||||
currentQuestion: QuizQuestionText;
|
||||
@ -16,7 +16,7 @@ type TextProps = {
|
||||
|
||||
export const Text = ({ currentQuestion }: TextProps) => {
|
||||
const theme = useTheme();
|
||||
const qid = useQuizId();
|
||||
const { quizId } = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
||||
@ -27,7 +27,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: text,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -3,12 +3,12 @@ import {
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
TextField as MuiTextField,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField as MuiTextField,
|
||||
TextFieldProps,
|
||||
Typography,
|
||||
useTheme,
|
||||
TextFieldProps, useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import { FC, useEffect } from "react";
|
||||
|
||||
@ -25,12 +25,12 @@ import RadioIcon from "@ui_kit/RadioIcon";
|
||||
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type { QuestionVariant } from "../../../model/questionTypes/shared";
|
||||
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||
|
||||
@ -48,7 +48,7 @@ type VariantItemProps = {
|
||||
|
||||
export const Variant = ({ currentQuestion }: VariantProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const { answers, ownVariants } = useQuizViewStore();
|
||||
const { answer } =
|
||||
answers.find(
|
||||
@ -139,8 +139,7 @@ const VariantItem = ({
|
||||
own = false,
|
||||
}: VariantItemProps) => {
|
||||
const theme = useTheme();
|
||||
const { settings } = useQuizData();
|
||||
const qid = useQuizId();
|
||||
const { settings, quizId } = useQuizData();
|
||||
|
||||
return (
|
||||
<FormControlLabel
|
||||
@ -187,7 +186,7 @@ const VariantItem = ({
|
||||
onClick={async (event) => {
|
||||
event.preventDefault();
|
||||
const variantId = currentQuestion.content.variants[index].id;
|
||||
console.log(answer)
|
||||
console.log(answer);
|
||||
|
||||
if (currentQuestion.content.multi) {
|
||||
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
|
||||
@ -198,7 +197,7 @@ const VariantItem = ({
|
||||
body: currentAnswer.includes(variantId)
|
||||
? currentAnswer?.filter((item) => item !== variantId)
|
||||
: [...currentAnswer, variantId],
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
@ -209,7 +208,7 @@ const VariantItem = ({
|
||||
currentQuestion.content.variants[index].points || 0
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
|
||||
@ -220,7 +219,7 @@ const VariantItem = ({
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].answer,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(currentQuestion.id, variantId,
|
||||
@ -230,7 +229,7 @@ const VariantItem = ({
|
||||
);
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
|
||||
@ -240,11 +239,11 @@ const VariantItem = ({
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
deleteAnswer(currentQuestion.id);
|
||||
|
||||
@ -13,10 +13,9 @@ import RadioIcon from "@ui_kit/RadioIcon";
|
||||
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import BlankImage from "@icons/BlankImage";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useQuizId } from "../../../contexts/QuizIdContext";
|
||||
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
||||
|
||||
@ -25,9 +24,8 @@ type VarimgProps = {
|
||||
};
|
||||
|
||||
export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
const { settings } = useQuizData();
|
||||
const { settings, quizId } = useQuizData();
|
||||
const { answers } = useQuizViewStore();
|
||||
const qid = useQuizId();
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
|
||||
@ -95,7 +93,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
updateAnswer(
|
||||
@ -115,7 +113,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
qid,
|
||||
qid: quizId,
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
|
||||
13
lib/contexts/QuizDataContext.ts
Normal file
13
lib/contexts/QuizDataContext.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
type QuizData = QuizSettings & { quizId: string; preview: boolean; };
|
||||
|
||||
export const QuizDataContext = createContext<QuizData | null>(null);
|
||||
|
||||
export const useQuizData = () => {
|
||||
const quizData = useContext(QuizDataContext);
|
||||
if (quizData === null) throw new Error("QuizData context is null");
|
||||
|
||||
return quizData;
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
|
||||
export const QuizIdContext = createContext<string | null>(null);
|
||||
|
||||
export const useQuizId = () => {
|
||||
const quizId = useContext(QuizIdContext);
|
||||
if (quizId === null) throw new Error("quizId context is null");
|
||||
|
||||
return quizId;
|
||||
};
|
||||
@ -1,3 +1,5 @@
|
||||
import QuizView from "./components/QuizView";
|
||||
import QuizAnswerer from "./components/QuizAnswerer";
|
||||
import type { QuizSettings } from "@model/settingsData";
|
||||
|
||||
export { QuizView };
|
||||
export { QuizAnswerer };
|
||||
export type { QuizSettings };
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { FallbackProps } from "react-error-boundary";
|
||||
|
||||
|
||||
export default function ErrorBoundaryFallback({ error }: FallbackProps) {
|
||||
let message = "Что-то пошло не так";
|
||||
|
||||
if (error.message === "No questions found") message = "Нет созданных вопросов";
|
||||
if (error.message === "Quiz already completed") message = "Вы уже прошли этот опрос";
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
}}
|
||||
>{message}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -2,8 +2,8 @@ import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { setCurrentQuizStep, useQuizViewStore } from "@stores/quizView";
|
||||
import { useCallback, useDebugValue, useMemo, useState } from "react";
|
||||
import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
|
||||
import { useQuizData } from "./useQuizData";
|
||||
import moment from "moment";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
|
||||
|
||||
export function useQuestionFlowControl() {
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import { getData } from "@api/quizRelase";
|
||||
import { parseQuizData } from "@model/api/getQuizData";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import useSWR from "swr";
|
||||
import { useQuizId } from "../../contexts/QuizIdContext";
|
||||
import { replaceSpacesToEmptyLines } from "../../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
|
||||
|
||||
|
||||
export function useQuizData() {
|
||||
const quizId = useQuizId();
|
||||
const { data } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
|
||||
suspense: true,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnMount:false,
|
||||
revalidateOnReconnect: false,
|
||||
refreshWhenOffline: false,
|
||||
refreshWhenHidden: false,
|
||||
refreshInterval: 0
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function getQuizData(quizId: string) {
|
||||
const response = await getData(quizId);
|
||||
const quizDataResponse = response.data;
|
||||
|
||||
if (response.error) {
|
||||
throw new Error(response.error);
|
||||
}
|
||||
if (!quizDataResponse) {
|
||||
throw new Error("Quiz not found");
|
||||
}
|
||||
|
||||
const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse));
|
||||
|
||||
const res = JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings;
|
||||
res.recentlyCompleted = response.isRecentlyCompleted;
|
||||
return res;
|
||||
}
|
||||
53
src/App.tsx
53
src/App.tsx
@ -1,19 +1,27 @@
|
||||
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 { QuizIdContext } from "@contexts/QuizIdContext";
|
||||
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
||||
import useSWR from "swr";
|
||||
import QuizAnswerer from "../lib/components/QuizAnswerer";
|
||||
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
|
||||
|
||||
const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
|
||||
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header
|
||||
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
|
||||
|
||||
export default function App() {
|
||||
const quizId = useParams().quizId ?? defaultQuizId;
|
||||
const [rootContainerSize, setRootContainerSize] = useState<number>(
|
||||
() => window.innerWidth
|
||||
);
|
||||
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,
|
||||
revalidateOnMount: false,
|
||||
revalidateOnReconnect: false,
|
||||
shouldRetryOnError: false,
|
||||
refreshInterval: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
@ -23,22 +31,21 @@ export default function App() {
|
||||
};
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("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>
|
||||
);
|
||||
if (isLoading) return <LoadingSkeleton />;
|
||||
if (error || !data) return <ApologyPage error={error} />;
|
||||
|
||||
return (
|
||||
<RootContainerWidthContext.Provider value={rootContainerSize}>
|
||||
<Box sx={{
|
||||
height: "100dvh",
|
||||
}}>
|
||||
<QuizAnswerer quizSettings={data} quizId={quizId} />
|
||||
</Box>
|
||||
</RootContainerWidthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,17 +1,27 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { QuizIdContext } from "@contexts/QuizIdContext";
|
||||
import { getQuizData } from "@api/quizRelase";
|
||||
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
|
||||
import QuizAnswerer from "./QuizAnswerer";
|
||||
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";
|
||||
|
||||
|
||||
interface Props {
|
||||
quizId: string;
|
||||
}
|
||||
|
||||
export default function QuizView({ quizId }: 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,
|
||||
revalidateOnMount: false,
|
||||
revalidateOnReconnect: false,
|
||||
shouldRetryOnError: false,
|
||||
refreshInterval: 0,
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth);
|
||||
@ -30,19 +40,20 @@ export default function QuizView({ quizId }: Props) {
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (isLoading) return <LoadingSkeleton />;
|
||||
if (error || !data) return <ApologyPage error={error} />;
|
||||
|
||||
return (
|
||||
<RootContainerWidthContext.Provider value={rootContainerSize}>
|
||||
<QuizIdContext.Provider value={quizId}>
|
||||
<Box
|
||||
ref={rootContainerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<QuizAnswerer />
|
||||
</Box>
|
||||
</QuizIdContext.Provider>
|
||||
<Box
|
||||
ref={rootContainerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<QuizAnswerer quizSettings={data} quizId={quizId} />
|
||||
</Box>
|
||||
</RootContainerWidthContext.Provider>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { Root, createRoot } from "react-dom/client";
|
||||
import { QuizView } from "../lib";
|
||||
import WidgetApp from "./WidgetApp";
|
||||
|
||||
|
||||
let root: Root | undefined = undefined;
|
||||
@ -14,7 +14,7 @@ const widget = {
|
||||
|
||||
root = createRoot(element);
|
||||
|
||||
root.render(<QuizView quizId={quizId} />);
|
||||
root.render(<WidgetApp quizId={quizId} />);
|
||||
},
|
||||
unmount() {
|
||||
if (root) root.unmount();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user