SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

QuizAnswerer component does not fetch data, but receives it as props

Browse Source 
WidgetApp and App components fetch quiz data
This commit is contained in:
nflnkr 2024-02-14 14:03:35 +03:00
parent d147ca97f8
commit 06515a64f9
28 changed files with 563 additions and 594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/api/quizRelase.ts
View File

@ -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();

28
lib/components/QuizAnswerer.tsx
View File

@ -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>
</ErrorBoundary>
</SnackbarProvider>
</ThemeProvider>
</LocalizationProvider>
</SWRConfig>
</QuizDataContext.Provider>
);
}

15
lib/components/ViewPublicationPage/ApologyPage.tsx
View File

@ -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
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -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("ответ не был засчитан");
@ -124,7 +122,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const sessions: any = JSON.parse(
localStorage.getItem("sessions") || "{}"
);
sessions[qid] = Date.now();
sessions[quizId] = Date.now();
localStorage.setItem(
"sessions",
JSON.stringify(sessions)

2
lib/components/ViewPublicationPage/Footer.tsx
View File

@ -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;

2
lib/components/ViewPublicationPage/Question.tsx
View File

@ -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";

2
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -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";

2
lib/components/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -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";

2
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -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";

8
lib/components/ViewPublicationPage/questions/Date.tsx
View File

@ -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(

8
lib/components/ViewPublicationPage/questions/Emoji.tsx
View File

@ -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) {

10
lib/components/ViewPublicationPage/questions/File.tsx
View File

@ -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(

8
lib/components/ViewPublicationPage/questions/Images.tsx
View File

@ -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) {

8
lib/components/ViewPublicationPage/questions/Number.tsx
View File

@ -11,9 +11,8 @@ 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";
@ -23,8 +22,7 @@ type NumberProps = {
};
export const Number = ({ currentQuestion }: NumberProps) => {
const qid = useQuizId();
const { settings } = useQuizData();
const { settings, quizId } = useQuizData();
const [inputValue, setInputValue] = useState<string>("0");
const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100000000000");
@ -48,7 +46,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: value,
qid,
qid: quizId,
});
if (!noUpdate) {

6
lib/components/ViewPublicationPage/questions/Rating.tsx
View File

@ -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);

8
lib/components/ViewPublicationPage/questions/Select.tsx
View File

@ -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);

6
lib/components/ViewPublicationPage/questions/Text.tsx
View File

@ -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,
});

29
lib/components/ViewPublicationPage/questions/Variant.tsx
View File

@ -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);

10
lib/components/ViewPublicationPage/questions/Varimg.tsx
View File

@ -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
View 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;
};

11
lib/contexts/QuizIdContext.ts
View File

@ -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;
};

6
lib/index.ts
View File

@ -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 };

27
lib/ui_kit/ErrorBoundaryFallback.tsx
View File

@ -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
lib/utils/hooks/useQuestionFlowControl.ts
View File

@ -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() {

40
lib/utils/hooks/useQuizData.ts
View File

@ -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;
}

31
src/App.tsx
View File

@ -1,9 +1,12 @@
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
@ -11,9 +14,14 @@ const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
export default function App() {
const quizId = useParams().quizId ?? defaultQuizId;
const [rootContainerSize, setRootContainerSize] = useState<number>(
() => window.innerWidth
);
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 = () => {
@ -28,17 +36,16 @@ export default function App() {
};
}, []);
if (isLoading) return <LoadingSkeleton />;
if (error || !data) return <ApologyPage error={error} />;
return (
<RootContainerWidthContext.Provider value={rootContainerSize}>
<QuizIdContext.Provider value={quizId}>
<Box
sx={{
<Box sx={{
height: "100dvh",
}}
>
<QuizAnswerer />
}}>
<QuizAnswerer quizSettings={data} quizId={quizId} />
</Box>
</QuizIdContext.Provider>
</RootContainerWidthContext.Provider>
);
}

27
lib/components/QuizView.tsx → src/WidgetApp.tsx
View File

@ -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,9 +40,11 @@ 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={{
@ -40,9 +52,8 @@ export default function QuizView({ quizId }: Props) {
height: "100%",
}}
>
<QuizAnswerer />
<QuizAnswerer quizSettings={data} quizId={quizId} />
</Box>
</QuizIdContext.Provider>
</RootContainerWidthContext.Provider>
);
}

4
src/widget.tsx
View File

@ -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();