WIP

databox/client/src/components/App.tsx

@@ -14,10 +14,8 @@ import DisplayProvider from './Media/DisplayProvider';
 import uploaderClient from '../api/uploader-client';
 import {zIndex} from '../themes/zIndex';
 import AttributeFormatProvider from './Media/Asset/Attribute/Format/AttributeFormatProvider';
-import {routes} from '../routes.ts';
 import {useRequestErrorHandler} from '@alchemy/api';
 import {useAuth} from '@alchemy/auth';
-import {MatomoRouteProxy, RouterProvider} from '@alchemy/navigation';
 
 const AppProxy = React.memo(() => {
     const isSmallView = useMediaQuery((theme: Theme) =>
@@ -101,10 +99,6 @@ export default function App() {
     return (
         <>
             <ToastContainer />
-            <RouterProvider
-                routes={routes}
-                RouteProxyComponent={MatomoRouteProxy}
-            />
             <AppProxy />
         </>
     );

databox/client/src/components/Layout/MainAppBar.tsx

@@ -11,7 +11,6 @@ import Container from '@mui/material/Container';
 import Avatar from '@mui/material/Avatar';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import {UserContext} from '../Security/UserContext';
 import {useTranslation} from 'react-i18next';
 import {Divider, ListItemIcon, ListItemText} from '@mui/material';
 import LogoutIcon from '@mui/icons-material/Logout';
@@ -21,6 +20,7 @@ import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import ChangeTheme from './ChangeTheme';
 import {zIndex} from '../../themes/zIndex';
 import {useKeycloakUrls} from '../../lib/keycloak';
+import {useUser} from "../../hooks/useUser.ts";
 
 export const menuHeight = 42;
 
@@ -32,7 +32,7 @@ type Props = {
 export default function MainAppBar({onToggleLeftPanel}: Props) {
     const {t} = useTranslation();
     const [changeTheme, setChangeTheme] = useState(false);
-    const userContext = useContext(UserContext);
+    const userContext = useUser();
     const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
         null
     );
@@ -49,7 +49,7 @@ export default function MainAppBar({onToggleLeftPanel}: Props) {
         setAnchorElUser(null);
     };
 
-    const username = userContext.user?.username;
+    const username = userContext.user?.preferred_username;
 
     return (
         <div

databox/client/src/hooks/useUser.ts

@@ -0,0 +1,5 @@
+import {UserInfoResponse, useUser as baseUseUser} from '@alchemy/auth';
+
+export function useUser() {
+    return baseUseUser<UserInfoResponse>();
+}

lib/js/auth/index.ts

@@ -17,6 +17,7 @@ import AuthenticationContext, {TAuthContext} from "./src/context/AuthenticationC
 import AuthenticationProvider from "./src/components/AuthenticationProvider";
 import KeycloakClient from "./src/client/KeycloakClient";
 import {useAuth} from "./src/hooks/useAuth";
+import {useUser} from "./src/hooks/useUser";
 export {
     OAuthClient,
     configureClientAuthentication,
@@ -29,8 +30,8 @@ export {
     AuthenticationProvider,
     KeycloakClient,
     useAuth,
+    useUser,
 };
-
 export type {
     AuthEvent,
     AuthEventHandler,

lib/js/auth/package.json

@@ -10,6 +10,7 @@
     "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-router-dom": "^6.20.0",
+    "react-i18next": "^13.5.0",
     "@mui/material": "^5.14.19"
   },
   "dependencies": {
@@ -30,6 +31,7 @@
     "rimraf": "^2.7.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2",
+    "react-i18next": "^13.5.0",
     "react-router-dom": "^6.20.0",
     "@mui/material": "^5.14.19"
   }