u

src/components/UserMenu.jsx

@@ -9,15 +9,20 @@ 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 { logout, selectAuthUser } from '../store/authSlice';
+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);
@@ -26,6 +31,19 @@ class UserMenu extends Component {
     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 });
   }
@@ -42,14 +60,18 @@ class UserMenu extends Component {
     this.setState({ settingsOpen: false });
   }
 
-  handleLogout() {
+  async handleLogout() {
     this.setState({ anchorEl: null });
-    void this.props.logout();
+    try {
+      await this.props.logout().unwrap();
+      await this.context.updateAuthMe();
+    } catch (err) {
+      notifyError(err);
+    }
   }
 
   render() {
-    const { user } = this.props;
-    const { anchorEl, settingsOpen } = this.state;
+    const { user, anchorEl, settingsOpen } = this.state;
     const open = Boolean(anchorEl);
 
     return (
@@ -92,12 +114,8 @@ class UserMenu extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  user: selectAuthUser(state),
-});
-
 const mapDispatchToProps = (dispatch) => ({
   logout: () => dispatch(logout()),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserMenu);
+export default connect(null, mapDispatchToProps)(UserMenu);