109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import {
|
|
Menu,
|
|
MenuItem,
|
|
IconButton,
|
|
ListItemIcon,
|
|
Typography,
|
|
Button,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import SettingsIcon from "@mui/icons-material/Settings";
|
|
import LogoutIcon from "@mui/icons-material/Logout";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { selectIsLoggedIn, selectStatus } from "@/app/redux/auth/selectors";
|
|
import { logout } from "@/app/redux/auth/authSlice";
|
|
import { AppDispatch } from "@/app/redux/types";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function AccountMenu() {
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const router = useRouter();
|
|
|
|
const handleGoToSettings = () => {
|
|
router.push("/dashboard/settings");
|
|
handleClose();
|
|
};
|
|
|
|
// Select relevant state from your auth slice
|
|
const isLoggedIn = useSelector(selectIsLoggedIn);
|
|
const authStatus = useSelector(selectStatus);
|
|
|
|
// Determine if we're currently in the process of logging out
|
|
const isLoggingOut = authStatus === "loading";
|
|
|
|
const handleLogout = async () => {
|
|
// Dispatch the logout thunk - redirection will be handled by the epic
|
|
await dispatch(logout());
|
|
};
|
|
|
|
// Only show the logout button if the user is logged in
|
|
if (!isLoggedIn) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<IconButton onClick={handleClick} color="inherit">
|
|
<AccountCircleIcon />
|
|
</IconButton>
|
|
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
|
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
|
>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<AccountCircleIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">Account</Typography>
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={handleGoToSettings}>
|
|
<ListItemIcon>
|
|
<SettingsIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">Settings</Typography>
|
|
</MenuItem>
|
|
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<LogoutIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={handleLogout}
|
|
disabled={isLoggingOut}
|
|
startIcon={
|
|
isLoggingOut ? (
|
|
<CircularProgress size={20} color="inherit" />
|
|
) : null
|
|
}
|
|
>
|
|
{isLoggingOut ? "Logging Out..." : "Logout"}
|
|
</Button>
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
}
|