Auth redirects, language switch, basic profile

exam/react/src/components/Header/Header.tsx

@@ -1,22 +1,20 @@
-import { AccountCircle } from '@mui/icons-material';
+import { AccountCircle, Translate } from '@mui/icons-material';
 import {
   AppBar,
   Avatar,
   Box,
   CircularProgress,
   IconButton,
-  Menu,
-  MenuItem,
   Link as MUILink,
   Toolbar,
   useScrollTrigger,
 } from '@mui/material';
-import { Link, useRouter, useRouterState } from '@tanstack/react-router';
+import { Link, useRouterState } from '@tanstack/react-router';
 import { cloneElement, FC, ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
-import useGuestBookStore from '../../store/store';
-import Login from '../Forms/Login/Login';
+import LanguageMenu from '../Menus/Language/LanguageMenu';
+import UserMenu from '../Menus/User/UserMenu';
 
 const ElevationScroll = ({ children }: { children: ReactElement }) => {
   const trigger = useScrollTrigger({
@@ -30,21 +28,17 @@ const ElevationScroll = ({ children }: { children: ReactElement }) => {
 };
 
 const Header: FC = () => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const user = useGuestBookStore((state) => state.user);
-  const setUser = useGuestBookStore((state) => state.setUser);
+  const [anchorUserMenu, setAnchorUserMenu] = useState<null | HTMLElement>(null);
+  const [anchorLanguageMenu, setAnchorLanguageMenu] = useState<null | HTMLElement>(null);
 
   const { t } = useTranslation();
-  const router = useRouter();
   const isLoading = useRouterState({ select: (s) => s.status === 'pending' });
 
-  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+  const user = Api.getAuthenticatedUser();
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setAnchorLanguageMenu(null);
+    setAnchorUserMenu(null);
   };
 
   return (
@@ -58,55 +52,20 @@ const Header: FC = () => {
               </MUILink>
               {isLoading && <CircularProgress size={16} thickness={10} sx={{ color: 'white' }} />}
             </Box>
+            <IconButton size="large" onClick={(event) => setAnchorLanguageMenu(event.currentTarget)}>
+              <Translate sx={{ color: 'white' }} />
+            </IconButton>
             {user ? (
-              <IconButton onClick={handleMenu} sx={{ p: 0 }}>
+              <IconButton onClick={(event) => setAnchorUserMenu(event.currentTarget)} sx={{ p: 0 }}>
                 <Avatar alt={user.username} src={`storage/${user.image}`} />
               </IconButton>
             ) : (
-              <IconButton size="large" onClick={handleMenu} color="inherit">
+              <IconButton size="large" onClick={(event) => setAnchorUserMenu(event.currentTarget)} color="inherit">
                 <AccountCircle />
               </IconButton>
             )}
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorEl}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'right',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              open={Boolean(anchorEl)}
-              onClose={handleClose}
-              sx={{
-                '& .MuiMenu-paper': {
-                  minWidth: '240px',
-                },
-              }}
-            >
-              {user ? (
-                [
-                  <MenuItem key="profile" onClick={handleClose}>
-                    {t('Profile')}
-                  </MenuItem>,
-                  <MenuItem
-                    key="logout"
-                    onClick={() => {
-                      Api.logOut();
-                      setUser();
-                      router.invalidate();
-                    }}
-                  >
-                    {t('Log out')}
-                  </MenuItem>,
-                ]
-              ) : (
-                <Login />
-              )}
-            </Menu>
+            <LanguageMenu anchorEl={anchorLanguageMenu} handleClose={handleClose} />
+            <UserMenu anchorEl={anchorUserMenu} handleClose={handleClose} />
           </Toolbar>
         </AppBar>
         <Toolbar />