119 lines
3.8 KiB
TypeScript
Executable File
119 lines
3.8 KiB
TypeScript
Executable File
import { useState, useEffect, useLayoutEffect, useRef } from "react";
|
||
import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
|
||
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
|
||
import { createPortal } from "react-dom";
|
||
import AddPlus from "../../assets/icons/questionsPage/addPlus";
|
||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
|
||
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
|
||
interface Props {
|
||
openBranchingPage: boolean;
|
||
setOpenBranchingPage: (a:boolean) => void;
|
||
}
|
||
|
||
export default function QuestionsPage({
|
||
openBranchingPage,
|
||
setOpenBranchingPage}:Props) {
|
||
const theme = useTheme();
|
||
const { openedModalSettingsId, openBranchingPanel } = useUiTools();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||
const quiz = useCurrentQuiz();
|
||
useLayoutEffect(() => {
|
||
updateOpenBranchingPanel(false);
|
||
updateEditSomeQuestion();
|
||
}, []);
|
||
|
||
const ref = useRef();
|
||
if (!quiz) return null;
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
ref={ref}
|
||
id="QuestionsPage"
|
||
sx={{
|
||
maxWidth: "796px",
|
||
width: "100%",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
margin: "60px 0 40px 0",
|
||
}}
|
||
>
|
||
<Typography variant={"h5"}>{quiz.name ? quiz.name : "Заголовок квиза"}</Typography>
|
||
<Button
|
||
sx={{
|
||
display: openBranchingPanel ? "none" : "flex",
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
padding: 0,
|
||
textDecoration: "underline",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
}}
|
||
onClick={collapseAllQuestions}
|
||
>
|
||
Свернуть всё
|
||
</Button>
|
||
</Box>
|
||
<QuestionSwitchWindowTool
|
||
openBranchingPage={openBranchingPage}
|
||
setOpenBranchingPage={setOpenBranchingPage}
|
||
/>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
maxWidth: "796px",
|
||
}}
|
||
>
|
||
<IconButton
|
||
onClick={() => {
|
||
createUntypedQuestion(quiz.backendId);
|
||
}}
|
||
sx={{
|
||
position: "fixed",
|
||
left: isMobile ? "20px" : "250px",
|
||
bottom: "140px",
|
||
}}
|
||
data-cy="create-question"
|
||
>
|
||
<AddPlus />
|
||
</IconButton>
|
||
|
||
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
|
||
data-cy="back-button"
|
||
onClick={decrementCurrentStep}
|
||
>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
height: "44px",
|
||
padding: "10px 20px",
|
||
borderRadius: "8px",
|
||
background: theme.palette.brightPurple.main,
|
||
fontSize: "18px",
|
||
}}
|
||
onClick={incrementCurrentStep}
|
||
>
|
||
Следующий шаг
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
{createPortal(<QuizPreview />, document.body)}
|
||
{openedModalSettingsId !== null && <BranchingQuestions />}
|
||
</>
|
||
);
|
||
}
|