62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { useEffect, useLayoutEffect } from "react";
|
|
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import { DraggableList } from "./DraggableList";
|
|
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
|
|
import { BranchingMap } from "./BranchingMap";
|
|
import { useQuestionsStore } from "@root/questions/store";
|
|
import { useUiTools } from "@root/uiTools/store";
|
|
import { useQuestions } from "@root/questions/hooks";
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|
|
|
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
|
|
|
|
interface Props {
|
|
openBranchingPage: boolean;
|
|
setOpenBranchingPage: (a: boolean) => void;
|
|
}
|
|
|
|
export const QuestionSwitchWindowTool = ({
|
|
openBranchingPage,
|
|
setOpenBranchingPage,
|
|
}: Props) => {
|
|
const { questions } = useQuestionsStore.getState();
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
const quiz = useCurrentQuiz();
|
|
|
|
const openBranchingPageHC = () => {
|
|
if (!openBranchingPage) {
|
|
deleteTimeoutedQuestions(questions, quiz);
|
|
}
|
|
setOpenBranchingPage(!openBranchingPage);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
gap: "20px",
|
|
flexWrap: "wrap",
|
|
marginBottom: isMobile ? "20px" : undefined,
|
|
}}
|
|
>
|
|
<Box sx={{ flexBasis: "796px" }}>
|
|
{openBranchingPage ? (
|
|
<BranchingMap />
|
|
) : (
|
|
<DraggableList
|
|
openBranchingPage={openBranchingPage}
|
|
setOpenBranchingPage={openBranchingPageHC}
|
|
/>
|
|
)}
|
|
</Box>
|
|
{openBranchingPage && (
|
|
<SwitchBranchingPanel
|
|
openBranchingPage={openBranchingPage}
|
|
setOpenBranchingPage={openBranchingPageHC}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|