получение данных если их не передали

This commit is contained in:
Nastya 2024-04-01 08:54:12 +03:00
parent 611b0282d3
commit ea1350e162
3 changed files with 46 additions and 28 deletions

@ -13,19 +13,22 @@ import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
import { getQuizData } from "@/api/quizRelase";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
type Props = {
quizSettings: QuizSettings;
quizSettings?: QuizSettings | {};
quizId: string;
preview?: boolean;
};
export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) {
export default function QuizAnswerer({ quizSettings = {}, quizId, preview = false }: Props) {
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
const [quizData, setQuizData] = useState<QuizSettings | {}>(quizSettings);
const rootContainerRef = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
@ -33,6 +36,10 @@ export default function QuizAnswerer({ quizSettings, quizId, preview = false }:
}, []);
useEffect(() => {
if (Object.values(quizSettings).length === 0) {
const data = (async()=>await getQuizData(quizId))()
setQuizData(data)
}
const handleWindowResize = () => {
startTransition(() => {
if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
@ -45,9 +52,10 @@ export default function QuizAnswerer({ quizSettings, quizId, preview = false }:
};
}, []);
if (Object.values(quizData).length === 0) return <LoadingSkeleton />;
return (
<RootContainerWidthContext.Provider value={rootContainerWidth}>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
<QuizDataContext.Provider value={{ ...quizData, quizId, preview }}>
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
<ThemeProvider theme={lightTheme}>
<SnackbarProvider

@ -1,4 +1,4 @@
import {Button, ThemeProvider, useTheme} from "@mui/material";
import { Button, ThemeProvider, useTheme } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { useQuizData } from "@contexts/QuizDataContext";
@ -12,8 +12,9 @@ import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
import PrevButton from "./tools/PrevButton";
import NextButton from "./tools/NextButton";
import {enqueueSnackbar} from "notistack";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
export default function ViewPublicationPage() {
const { settings, recentlyCompleted, quizId } = useQuizData();
@ -31,15 +32,18 @@ export default function ViewPublicationPage() {
} = useQuestionFlowControl();
const isAnswer = answers.some(ans => ans.questionId === currentQuestion.id)
useEffect(
function setFaviconAndTitle() {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings.cfg.startpage.favIcon);
if (settings.cfg !== undefined) {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings.cfg.startpage.favIcon);
}
document.title = settings.name;
}
document.title = settings.name;
},
[settings]
);
@ -64,24 +68,24 @@ export default function ViewPublicationPage() {
<Question
currentQuestion={currentQuestion}
currentQuestionStepNumber={currentQuestionStepNumber}
prevButton={ <PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion}/>}
prevButton={<PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion} />}
nextButton={
<NextButton
isNextButtonEnabled={isNextButtonEnabled}
moveToNextQuestion={async () => {
if (!isAnswer) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
isNextButtonEnabled={isNextButtonEnabled}
moveToNextQuestion={async () => {
if (!isAnswer) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
moveToNextQuestion()
}}
}
moveToNextQuestion()
}}
/>}
/>
);

@ -1,13 +1,19 @@
import { QuizSettings } from "@model/settingsData";
import { createContext, useContext } from "react";
type QuizData = QuizSettings & { quizId: string; preview: boolean; };
type QuizSettingsFull = QuizSettings | {};
type QuizData = QuizSettingsFull & { quizId: string; preview: boolean; };
type QuizDataClean = QuizSettings & { quizId: string; preview: boolean; };
export const QuizDataContext = createContext<QuizData | null>(null);
export const useQuizData = () => {
export const useQuizData = ():QuizDataClean => {
const quizData = useContext(QuizDataContext);
if (quizData === null) throw new Error("QuizData context is null");
if (
quizData === null ||
!("settings" in quizData) ||
!("recentlyCompleted" in quizData)
) throw new Error("QuizData context is null");
return quizData;
};