@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
284 lines (280 loc) • 8.9 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { useContext, useCallback, useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { Box, useTheme } from '@mui/material';
// import Avatar from '@mui/material/Avatar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
// import PersonAdd from '@mui/icons-material/PersonAdd';
// import Swal from 'sweetalert2';
// import Settings from '@mui/icons-material/Settings';
// Optional toast import - fallback to console if not available
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
success: function success(message) {
return console.log('Success:', message);
},
error: function error(message) {
return console.error('Error:', message);
},
loading: function loading(message) {
return console.log('Loading:', message);
}
};
}
import Logout from '@mui/icons-material/Logout';
import { tokens } from "../../theme/Theme";
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { userDataContext } from '../../context/UserDataProvider';
// import AccessTimeIcon from '@mui/icons-material/AccessTime';
import Cookies from 'js-cookie';
import PersonIcon from '@mui/icons-material/Person';
import axios from 'axios';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function AccountMenu(_ref) {
var _user$logintime, _user$logintime2;
var color = _ref.color;
var _useContext = useContext(userDataContext),
user = _useContext.user,
setLogoutToast = _useContext.setLogoutToast,
setUser = _useContext.setUser;
var navigate = useNavigate();
var theme = useTheme();
var colors = tokens(theme.palette.mode);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var open = Boolean(anchorEl);
var _useState = useState(Date.now()),
_useState2 = _slicedToArray(_useState, 2),
lastActivity = _useState2[0],
setLastActivity = _useState2[1];
var resetTimeout = useCallback(function () {
setLastActivity(Date.now());
}, []);
useEffect(function () {
var events = ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'];
var handleActivity = function handleActivity() {
resetTimeout();
};
events.forEach(function (event) {
window.addEventListener(event, handleActivity);
});
var checkTimeout = setInterval(function () {
if (Date.now() - lastActivity > 60000 * 5) {
// 1 minute
Cookies.remove('authToken');
Cookies.remove('userName');
setUser(null);
localStorage.setItem('needsRefresh', 'true');
window.location.href = '/';
toast.error('Session timed out. Please log in again.', {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
}
}, 1000); // Check every second
return function () {
events.forEach(function (event) {
window.removeEventListener(event, handleActivity);
});
clearInterval(checkTimeout);
};
}, [lastActivity, navigate, resetTimeout, setUser]);
var handleClick = function handleClick(event) {
setAnchorEl(event.currentTarget);
};
var handleClose = function handleClose() {
setAnchorEl(null);
};
var config = {
headers: {
Authorization: "Bearer ".concat(user.token)
}
};
var handleLogout = function handleLogout() {
// Remove cookies
Cookies.remove('authToken');
Cookies.remove('userName');
// Optionally, show a toast notification
toast.success("Logout Successfully", {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
// Update context and navigate to the login page
setLogoutToast(true);
setUser(null); // Clear user context if applicable
navigate("/", {
replace: true
});
window.location.href = "/";
// Close the menu
handleClose();
};
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx(Box, {
sx: {
display: 'flex',
alignItems: 'center',
textAlign: 'center',
'& .css-14l4p2d-MuiButtonBase-root-MuiIconButton-root': {
marginLeft: '5px'
}
},
children: /*#__PURE__*/_jsx(Tooltip, {
title: "User Profile",
children: /*#__PURE__*/_jsx(IconButton, {
onClick: handleClick,
size: "small",
sx: {
ml: 0
},
"aria-controls": open ? 'account-menu' : undefined,
"aria-haspopup": "true",
"aria-expanded": open ? 'true' : undefined,
children: /*#__PURE__*/_jsx(AccountCircleIcon, {
sx: {
height: 30,
width: 34,
color: 'white'
}
})
})
})
}), /*#__PURE__*/_jsxs(Menu, {
anchorEl: anchorEl,
id: "account-menu",
open: open,
onClose: handleClose
// onClick={handleClose}
,
PaperProps: {
elevation: 0,
sx: {
backgroundColor: '#141414',
height: '195px',
width: '180px',
padding: '4px 4px',
overflow: 'visible',
color: 'white',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 50,
ml: -0.5,
mr: 1
},
'&::before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 20,
height: 10,
bgcolor: '#141414',
clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
transform: 'translateY(-50%)',
zIndex: 0
}
}
},
transformOrigin: {
horizontal: 'right',
vertical: 'top'
},
anchorOrigin: {
horizontal: 'right',
vertical: 'bottom'
},
children: [/*#__PURE__*/_jsxs(MenuItem, {
sx: {
display: 'flex',
flexDirection: 'column',
gap: '4px',
justifyContent: 'center',
alignItems: 'center'
},
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
paddingLeft: '5px',
color: "white"
},
children: /*#__PURE__*/_jsx(PersonIcon, {
fontSize: "medium",
color: "white"
})
}), /*#__PURE__*/_jsx(Box, {
children: /*#__PURE__*/_jsx("span", {
children: user.name
})
})]
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(MenuItem, {
sx: {
justifyContent: 'center'
},
children: /*#__PURE__*/_jsxs(Box, {
sx: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: '4px'
},
children: [/*#__PURE__*/_jsx("span", {
className: "text-[13px]",
children: "LOGIN TIME"
}), /*#__PURE__*/_jsxs(Box, {
sx: {
display: 'flex',
gap: '7px'
},
children: [/*#__PURE__*/_jsx("span", {
className: "text-xs",
children: (_user$logintime = user.logintime) === null || _user$logintime === void 0 ? void 0 : _user$logintime.split(' ')[0]
}), /*#__PURE__*/_jsx("span", {
className: "text-xs",
children: (_user$logintime2 = user.logintime) === null || _user$logintime2 === void 0 ? void 0 : _user$logintime2.split(' ')[1]
})]
})]
})
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
onClick: handleLogout,
sx: {
justifyContent: 'center',
gap: '5px',
backgroundColor: '#452970',
borderRadius: '8px',
color: 'white',
'&:hover': {
backgroundColor: '#3e2a67' // Change this to the color you want on hover
}
},
children: [/*#__PURE__*/_jsx(Logout, {
fontSize: "small"
}), /*#__PURE__*/_jsx("span", {
children: "Logout"
})]
})]
})]
});
}