103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { quizApi } from "@api/quiz";
|
|
import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
|
|
import { setQuizes, setCurrentStep } from "@root/quizes/actions";
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|
import { useQuizStore } from "@root/quizes/store";
|
|
import Sidebar from "@ui_kit/Sidebar";
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
|
|
import { cleanQuestions, setQuestions } from "@root/questions/actions";
|
|
import {
|
|
updateModalInfoWhyCantCreate,
|
|
setShowConfirmLeaveModal,
|
|
updateSomeWorkBackend,
|
|
} from "@root/uiTools/actions";
|
|
import { questionApi } from "@api/question";
|
|
import { useUiTools } from "@root/uiTools/store";
|
|
|
|
import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
|
|
import { Header } from "../startPage/Header";
|
|
import { DesignFilling } from "./DesignFilling";
|
|
import { createPortal } from "react-dom";
|
|
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
|
|
|
|
export const DesignPage = () => {
|
|
const quiz = useCurrentQuiz();
|
|
const { editQuizId } = useQuizStore();
|
|
|
|
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 === undefined)
|
|
return (
|
|
<Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
|
|
);
|
|
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>
|
|
<ConfirmLeaveModal
|
|
open={showConfirmLeaveModal}
|
|
follow={followNewPage}
|
|
cancel={() => setShowConfirmLeaveModal(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|