frontPanel/src/pages/createQuize/AvailablePrivilege.tsx

88 lines
2.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Box, Typography } from "@mui/material";
import {
clearUserData,
OriginalUserAccount,
setUserAccount,
useUserStore,
} from "@root/user";
import { clearAuthToken, getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { useUserAccountFetcher } from "../../App";
import { useNavigate } from "react-router-dom";
export default function AvailablePrivilege() {
const user = useUserStore();
const userPrivileges = user.userAccount?.privileges;
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
useUserAccountFetcher<OriginalUserAccount>({
url: process.env.REACT_APP_DOMAIN + "/squiz/account/get",
userId,
onNewUserAccount: setUserAccount,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
navigate("/signin");
}
},
});
console.log("это доступные привелегии", userPrivileges);
const DayForm = ["день", "дня", "дней"];
function declOfNum(n: number, text_forms: string[]) {
n = Math.abs(n) % 100;
var n1 = n % 10;
if (n > 10 && n < 20) {
return text_forms[2];
}
if (n1 > 1 && n1 < 5) {
return text_forms[1];
}
if (n1 == 1) {
return text_forms[0];
}
return text_forms[2];
}
const quizUnlimTime = userPrivileges?.quizUnlimTime?.amount || 0;
const quizCnt = userPrivileges?.quizCnt?.amount || 0;
const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0;
return (
<Box
sx={{
padding: "20px",
backgroundColor: "#9A9AAF17",
width: "100%",
borderRadius: "12px",
display: "flex",
gap: "20px",
flexWrap: "wrap",
}}
>
<Typography variant={"body1"} sx={{ color: "#9A9AAF" }}>
Вам доступно:
</Typography>
<Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
Безлимитные заявки:{" "}
<strong>
{quizUnlimTime} {declOfNum(quizUnlimTime, DayForm)}
</strong>
</Typography>
{quizCnt !== 0 && (
<Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
Заявки: <strong>{quizCnt} шт.</strong>
</Typography>
)}
{squizHideBadge !== 0 && (
<Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
Скрытие логотипа PenaQuiz:{" "}
<strong>
{squizHideBadge} {declOfNum(squizHideBadge, DayForm)}
</strong>
</Typography>
)}
</Box>
);
}