frontPanel/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx

62 lines
1.8 KiB
TypeScript

import { useEffect, useState } from "react";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useUiTools } from "@root/uiTools/store";
import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { updateQuiz } from "@root/quizes/actions";
import { Button, Box } from "@mui/material";
import { BackButtonIcon } from "@icons/BackButtonIcon";
export const ButtonRecallQuiz = () => {
const quiz = useCurrentQuiz();
const { whyCantCreatePublic, canCreatePublic } = useUiTools();
const [buttonText, setButtonText] = useState(
quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
);
useEffect(() => {
if (!canCreatePublic) setButtonText("Опубликовать");
}, [canCreatePublic]);
const handleClickStatusQuiz = () => {
if (Object.keys(whyCantCreatePublic).length === 0) {
if (buttonText === "Опубликовать") {
setButtonText("Опубликовано");
setTimeout(() => {
setButtonText("Отозвать");
}, 1500);
} else {
setButtonText("Опубликовать");
}
updateQuiz(quiz?.id, (state) => {
state.status = quiz?.status === "start" ? "stop" : "start";
});
} else {
updateModalInfoWhyCantCreate(true);
}
};
return (
<Button
variant="contained"
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
p: "0 18px",
minWidth: "120px",
}}
onClick={handleClickStatusQuiz}
>
{buttonText === "Отозвать" ? (
<Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
{buttonText} <BackButtonIcon />
</Box>
) : (
buttonText
)}
</Button>
);
};