141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||
import { useEffect } from "react";
|
||
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
|
||
|
||
import SectionWrapper from "../SectionWrapper";
|
||
import { basketStore } from "@stores/BasketStore";
|
||
import { authStore } from "@stores/makeRequest";
|
||
|
||
import LogoutIcon from "../icons/LogoutIcon";
|
||
import WalletIcon from "../icons/WalletIcon";
|
||
import CustomAvatar from "./Avatar";
|
||
import Drawers from "../Drawers";
|
||
import PenaLogo from "../PenaLogo";
|
||
import Menu from "../Menu";
|
||
import { logout } from "@root/api/auth";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { clearUser, useUserStore } from "@root/stores/user";
|
||
import { getMessageFromFetchError } from "@root/utils/backendMessageHandler";
|
||
|
||
interface Props {
|
||
isLoggedIn: boolean;
|
||
}
|
||
|
||
export default function NavbarFull({ isLoggedIn }: Props) {
|
||
const theme = useTheme();
|
||
const { clearToken } = authStore();
|
||
const location = useLocation();
|
||
const navigate = useNavigate();
|
||
const user = useUserStore((state) => state.user);
|
||
|
||
const { open } = basketStore();
|
||
|
||
useEffect(() => {
|
||
if (location.pathname === "/basket") {
|
||
open(false);
|
||
}
|
||
}, [location.pathname, open]);
|
||
|
||
async function handleLogoutClick() {
|
||
try {
|
||
await logout();
|
||
clearToken();
|
||
clearUser();
|
||
navigate("/");
|
||
} catch (error: any) {
|
||
const message = getMessageFromFetchError(error, "Не удалось выйти");
|
||
if (message) enqueueSnackbar(message);
|
||
}
|
||
}
|
||
|
||
return isLoggedIn ? (
|
||
<Container
|
||
component="nav"
|
||
disableGutters
|
||
maxWidth={false}
|
||
sx={{
|
||
px: "16px",
|
||
display: "flex",
|
||
height: "80px",
|
||
alignItems: "center",
|
||
gap: "60px",
|
||
bgcolor: "white",
|
||
borderBottom: "1px solid #E3E3E3",
|
||
}}
|
||
>
|
||
<PenaLogo width={124} />
|
||
<Menu />
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
ml: "auto",
|
||
}}
|
||
>
|
||
<Drawers />
|
||
<IconButton sx={{ p: 0, ml: "8px" }}>
|
||
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
|
||
</IconButton>
|
||
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "12px",
|
||
lineHeight: "14px",
|
||
color: theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
Мой баланс
|
||
</Typography>
|
||
<Typography variant="body2" color={theme.palette.brightPurple.main}>
|
||
00.00 руб.
|
||
</Typography>
|
||
</Box>
|
||
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
|
||
<IconButton
|
||
onClick={handleLogoutClick}
|
||
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
|
||
>
|
||
<LogoutIcon />
|
||
</IconButton>
|
||
</Box>
|
||
</Container>
|
||
) : (
|
||
<>
|
||
<SectionWrapper
|
||
component="nav"
|
||
maxWidth="lg"
|
||
outerContainerSx={{
|
||
backgroundColor: theme.palette.lightPurple.main,
|
||
borderBottom: "1px solid #E3E3E3",
|
||
}}
|
||
sx={{
|
||
px: "20px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
height: "80px",
|
||
alignItems: "center",
|
||
gap: "50px",
|
||
}}
|
||
>
|
||
<PenaLogo width={150} />
|
||
<Menu />
|
||
<Button
|
||
component={Link}
|
||
to={user ? "/tariffs" : "/signin"}
|
||
state={user ? undefined : { backgroundLocation: location }}
|
||
variant="outlined"
|
||
sx={{
|
||
px: "18px",
|
||
py: "10px",
|
||
borderColor: "white",
|
||
borderRadius: "8px",
|
||
whiteSpace: "nowrap",
|
||
minWidth: "180px",
|
||
}}
|
||
>
|
||
Личный кабинет
|
||
</Button>
|
||
</SectionWrapper>
|
||
</>
|
||
);
|
||
}
|