122 lines
3.6 KiB
JavaScript
122 lines
3.6 KiB
JavaScript
import { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import LogoutIcon from '@mui/icons-material/Logout';
|
|
import BusinessIcon from '@mui/icons-material/Business';
|
|
import { StorageManagerContext } from '../api/storageManager';
|
|
import { logout } from '../store/authSlice';
|
|
import CompanySettingsDialog from './CompanySettingsDialog';
|
|
import { notifyError } from '../utils/notify';
|
|
|
|
class UserMenu extends Component {
|
|
static contextType = StorageManagerContext;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
anchorEl: null,
|
|
settingsOpen: false,
|
|
user: null,
|
|
};
|
|
this.handleOpenMenu = this.handleOpenMenu.bind(this);
|
|
this.handleCloseMenu = this.handleCloseMenu.bind(this);
|
|
this.handleOpenSettings = this.handleOpenSettings.bind(this);
|
|
this.handleCloseSettings = this.handleCloseSettings.bind(this);
|
|
this.handleLogout = this.handleLogout.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
void this.loadUser();
|
|
}
|
|
|
|
async loadUser() {
|
|
try {
|
|
const session = await this.context.authMePromise;
|
|
this.setState({ user: session.user });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
handleOpenMenu(event) {
|
|
this.setState({ anchorEl: event.currentTarget });
|
|
}
|
|
|
|
handleCloseMenu() {
|
|
this.setState({ anchorEl: null });
|
|
}
|
|
|
|
handleOpenSettings() {
|
|
this.setState({ anchorEl: null, settingsOpen: true });
|
|
}
|
|
|
|
handleCloseSettings() {
|
|
this.setState({ settingsOpen: false });
|
|
}
|
|
|
|
async handleLogout() {
|
|
this.setState({ anchorEl: null });
|
|
try {
|
|
await this.props.logout().unwrap();
|
|
await this.context.updateAuthMe();
|
|
} catch (err) {
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { user, anchorEl, settingsOpen } = this.state;
|
|
const open = Boolean(anchorEl);
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
|
|
<IconButton
|
|
onClick={this.handleOpenMenu}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
|
|
>
|
|
<Avatar src={user?.picture} alt={user?.email} sx={{ width: 32, height: 32 }}>
|
|
{user?.email?.[0]?.toUpperCase()}
|
|
</Avatar>
|
|
</IconButton>
|
|
</Box>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={this.handleCloseMenu}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
>
|
|
<MenuItem disabled>{user?.email}</MenuItem>
|
|
<MenuItem disabled={!user?.selectedCompanyId} onClick={this.handleOpenSettings}>
|
|
<ListItemIcon>
|
|
<BusinessIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText>Unternehmen</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem onClick={this.handleLogout}>
|
|
<ListItemIcon>
|
|
<LogoutIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText>Sign out</ListItemText>
|
|
</MenuItem>
|
|
</Menu>
|
|
<CompanySettingsDialog open={settingsOpen} onClose={this.handleCloseSettings} />
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
logout: () => dispatch(logout()),
|
|
});
|
|
|
|
export default connect(null, mapDispatchToProps)(UserMenu);
|