125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
import { quizApi } from "@api/quiz";
|
|
import {Box, IconButton, useMediaQuery, useTheme} from "@mui/material";
|
|
import {
|
|
resetEditConfig,
|
|
setQuizes,
|
|
updateQuiz,
|
|
setCurrentStep,
|
|
} from "@root/quizes/actions";
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|
import { useQuizStore } from "@root/quizes/store";
|
|
import Sidebar from "@ui_kit/Sidebar";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
|
|
import {
|
|
cleanQuestions,
|
|
createResult,
|
|
setQuestions,
|
|
} from "@root/questions/actions";
|
|
import {
|
|
updateCanCreatePublic,
|
|
updateModalInfoWhyCantCreate,
|
|
setShowConfirmLeaveModal,
|
|
updateSomeWorkBackend,
|
|
} from "@root/uiTools/actions";
|
|
import { useQuestionsStore } from "@root/questions/store";
|
|
import { questionApi } from "@api/question";
|
|
import { useUiTools } from "@root/uiTools/store";
|
|
|
|
import { clearUserData } from "@root/user";
|
|
import { clearAuthToken } from "@frontend/kitui";
|
|
import { logout } from "@api/auth";
|
|
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
|
import { ModalInfoWhyCantCreate } from "../startPage/ModalInfoWhyCantCreate";
|
|
import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
|
|
import { checkQuestionHint } from "@utils/checkQuestionHint";
|
|
import { Header } from "../startPage/Header";
|
|
import {DesignFilling} from "./DesignFilling";
|
|
import {toggleQuizPreview} from "@root/quizPreview";
|
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
import {createPortal} from "react-dom";
|
|
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
|
|
|
|
export const DesignPage = () => {
|
|
const quiz = useCurrentQuiz();
|
|
const { editQuizId } = useQuizStore();
|
|
const { questions } = useQuestionsStore();
|
|
|
|
useEffect(() => {
|
|
const getData = async () => {
|
|
const quizes = await quizApi.getList();
|
|
setQuizes(quizes);
|
|
if (editQuizId) {
|
|
const questions = await questionApi.getList({ quiz_id: editQuizId });
|
|
setQuestions(questions);
|
|
}
|
|
};
|
|
getData();
|
|
}, []);
|
|
|
|
const { showConfirmLeaveModal } = useUiTools();
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
const currentStep = useQuizStore((state) => state.currentStep);
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
|
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
|
|
const [nextStep, setNextStep] = useState<number>(0);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
cleanQuestions();
|
|
updateModalInfoWhyCantCreate(false);
|
|
updateSomeWorkBackend(false);
|
|
},
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (editQuizId === null) navigate("/list");
|
|
|
|
}, [navigate, editQuizId]);
|
|
|
|
const followNewPage = () => {
|
|
setShowConfirmLeaveModal(false);
|
|
setCurrentStep(nextStep);
|
|
};
|
|
|
|
|
|
const changePage = (index: number) => {
|
|
if (currentStep === 2) {
|
|
setNextStep(index);
|
|
setShowConfirmLeaveModal(true);
|
|
|
|
return;
|
|
}
|
|
|
|
setCurrentStep(index);
|
|
};
|
|
|
|
console.log(quiz)
|
|
if (!quiz) return <></>;
|
|
return (
|
|
<>
|
|
<Header setMobileSidebar={setMobileSidebar} />
|
|
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
|
|
{isMobile ? (
|
|
<SidebarMobile open={mobileSidebar} changePage={changePage} />
|
|
) : (
|
|
<Sidebar changePage={changePage} />
|
|
)}
|
|
<DesignFilling/>
|
|
{createPortal(<QuizPreview />, document.body)}
|
|
</Box>
|
|
<ModalInfoWhyCantCreate />
|
|
<ConfirmLeaveModal
|
|
open={showConfirmLeaveModal}
|
|
follow={followNewPage}
|
|
cancel={() => setShowConfirmLeaveModal(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|