Image 2

exam/react/src/components/Dialogs/UserImage/UserImageDialog.tsx

@@ -168,14 +168,18 @@ const UserImageDialog: FC<Props> = ({ user, open, onClose }) => {
                   <InputLabel size="small">{t('Predefined')}</InputLabel>
                   <Select
                     name={field.name}
-                    value={field.state.value}
+                    value={field.state.value ?? ''}
                     onBlur={field.handleBlur}
                     onChange={(e) => field.handleChange(e.target.value)}
                     size="small"
                     label={t('Predefined')}
                     autoComplete="off"
                     fullWidth
+                    //renderValue={(selected) => selected ?? 'Keine Auswahl'}
                   >
+                    <MenuItem value="" selected>
+                      Keine Auswahl
+                    </MenuItem>
                     {[...Array(10).keys()].map((i) => (
                       <MenuItem key={`avatar-${i + 1}`} value={`avatar-${i + 1}`}>
                         {t('Avatar', { name: i + 1 })}

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

@@ -10,9 +10,10 @@ import {
   useScrollTrigger,
 } from '@mui/material';
 import { Link, useRouterState } from '@tanstack/react-router';
-import { cloneElement, FC, ReactElement, useState } from 'react';
+import { cloneElement, FC, ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
+import { User } from '../../types/User';
 import LanguageMenu from '../Menus/Language/LanguageMenu';
 import UserMenu from '../Menus/User/UserMenu';
 
@@ -30,11 +31,12 @@ const ElevationScroll = ({ children }: { children: ReactElement }) => {
 const Header: FC = () => {
   const [anchorUserMenu, setAnchorUserMenu] = useState<null | HTMLElement>(null);
   const [anchorLanguageMenu, setAnchorLanguageMenu] = useState<null | HTMLElement>(null);
+  const [user, setUser] = useState<User>();
 
   const { t } = useTranslation();
   const isLoading = useRouterState({ select: (s) => s.status === 'pending' });
 
-  const user = Api.getAuthenticatedUser();
+  useEffect(() => Api.subscribeToAuthenticatedUser((user) => setUser(user)), []);
 
   const handleClose = () => {
     setAnchorLanguageMenu(null);
@@ -52,20 +54,23 @@ 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={(event) => setAnchorUserMenu(event.currentTarget)} sx={{ p: 0 }}>
-                <Avatar alt={user.username} src={`storage/${user.image}`}>
-                  <Person />
-                </Avatar>
+
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <IconButton size="large" onClick={(event) => setAnchorLanguageMenu(event.currentTarget)}>
+                <Translate sx={{ color: 'white' }} />
               </IconButton>
-            ) : (
-              <IconButton size="large" onClick={(event) => setAnchorUserMenu(event.currentTarget)} color="inherit">
-                <AccountCircle />
-              </IconButton>
-            )}
+              {user ? (
+                <IconButton onClick={(event) => setAnchorUserMenu(event.currentTarget)} sx={{ p: 0 }}>
+                  <Avatar alt={user.username} src={`storage/${user.image}`}>
+                    <Person />
+                  </Avatar>
+                </IconButton>
+              ) : (
+                <IconButton size="large" onClick={(event) => setAnchorUserMenu(event.currentTarget)} color="inherit">
+                  <AccountCircle />
+                </IconButton>
+              )}
+            </Box>
             <LanguageMenu anchorEl={anchorLanguageMenu} handleClose={handleClose} />
             <UserMenu anchorEl={anchorUserMenu} handleClose={handleClose} />
           </Toolbar>