81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { Skeleton, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import React, { useEffect, useState } from "react";
|
||
import Box from "@mui/material/Box";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { useQuizStore } from "@root/quizes/store";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { PartnersBoard } from "./PartnersBoard/PartnersBoard";
|
||
import { IntegrationsModal } from "./IntegrationsModal/IntegrationsModal";
|
||
import { partnersMock } from "./mocks/MockData";
|
||
|
||
interface IntegrationsPageProps {
|
||
heightSidebar: number;
|
||
mobileSidebar: boolean;
|
||
}
|
||
|
||
export const IntegrationsPage = ({
|
||
heightSidebar,
|
||
mobileSidebar,
|
||
}: IntegrationsPageProps) => {
|
||
const quiz = useCurrentQuiz();
|
||
const { editQuizId } = useQuizStore();
|
||
const theme = useTheme();
|
||
const navigate = useNavigate();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||
const [companyName, setCompanyName] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (editQuizId === null) navigate("/list");
|
||
}, [navigate, editQuizId]);
|
||
|
||
const heightBar = heightSidebar + 51 + 88 + 36 + 25;
|
||
|
||
if (quiz === undefined)
|
||
return (
|
||
<Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
|
||
);
|
||
|
||
const handleCloseModal = () => {
|
||
setIsModalOpen(false);
|
||
// setTimeout(() => {
|
||
// setCompanyName(null);
|
||
// }, 300);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
padding: isMobile
|
||
? mobileSidebar
|
||
? `calc(${heightBar}px - 92px) 16px 70px 16px`
|
||
: "67px 16px 70px 16px"
|
||
: "25px",
|
||
height: isMobile ? "100vh" : "calc(100vh - 80px)",
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h5"
|
||
sx={{ marginBottom: "40px", color: "#333647" }}
|
||
>
|
||
Интеграции
|
||
</Typography>
|
||
<PartnersBoard
|
||
partners={partnersMock}
|
||
setIsModalOpen={setIsModalOpen}
|
||
setCompanyName={setCompanyName}
|
||
isModalOpen={isModalOpen}
|
||
handleCloseModal={handleCloseModal}
|
||
/>
|
||
{/*<IntegrationsModal*/}
|
||
{/* isModalOpen={isModalOpen}*/}
|
||
{/* handleCloseModal={handleCloseModal}*/}
|
||
{/* companyName={companyName}*/}
|
||
{/*/>*/}
|
||
</Box>
|
||
</>
|
||
);
|
||
};
|