update username display

felixevers · felixevers · commit aa365c42407b · 2025-12-08T15:02:21.000+01:00
diff --git a/web/components/layout/Page.tsx b/web/components/layout/Page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { getUser } from '@/api/auth/authService'
 import type { AnchorHTMLAttributes, HTMLAttributes, PropsWithChildren } from 'react'
 import { useEffect, useState } from 'react'
 import Head from 'next/head'
@@ -46,7 +47,7 @@ export const StagingDisclaimerDialog = () => {
       isModal={false}
       isOpen={isStagingDisclaimerOpen}
       titleElement={translation('developmentAndPreviewInstance')}
-      description={(<MarkdownInterpreter text={translation('stagingModalDisclaimerMarkdown')}/>)}
+      description={(<MarkdownInterpreter text={translation('stagingModalDisclaimerMarkdown')} />)}
       className={clsx('z-20 w-200')}
       backgroundClassName="z-10"
     >
@@ -75,6 +76,16 @@ type HeaderProps = HTMLAttributes<HTMLHeadElement>
  */
 export const Header = ({ ...props }: HeaderProps) => {
   const translation = useTasksTranslation()
+  const [username, setUsername] = useState<string | undefined>();
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const user = await getUser();
+      setUsername(user?.profile.name);
+    }
+
+    fetchUser();
+  }, []);
 
   return (
     <header
@@ -85,7 +96,7 @@ export const Header = ({ ...props }: HeaderProps) => {
       )}
     >
       <div className="flex-col-0">
-        <Input placeholder={translation('search')}/>
+        <Input placeholder={translation('search')} />
       </div>
       <div className="flex-row-4 justify-end">
         <IconButton color="neutral">
@@ -95,8 +106,8 @@ export const Header = ({ ...props }: HeaderProps) => {
           <SettingsIcon />
         </IconButton>
         <SolidButton color="neutral">
-          {'User Name'}
-          <ExpansionIcon isExpanded={false}/>
+          {username}
+          <ExpansionIcon isExpanded={false} />
         </SolidButton>
       </div>
     </header>
@@ -169,21 +180,21 @@ export const Sidebar = ({ ...props }: SidebarProps) => {
     >
       <nav className="flex-col-2 overflow-auto">
         <Link href="/" className="flex-row-2 text-primary items-center rounded-lg p-2 mb-8">
-          <HelpwaveLogo className="min-h-7 min-w-7 p-0.5 bg-header-background rounded-md"/>
+          <HelpwaveLogo className="min-h-7 min-w-7 p-0.5 bg-header-background rounded-md" />
           <span className="typography-title-md whitespace-nowrap">{'helpwave tasks'}</span>
         </Link>
         {/* TODO add station swticher here */}
         <SidebarLink href="/" route={route}>
-          <Grid2X2PlusIcon className="-rotate-90"/>
+          <Grid2X2PlusIcon className="-rotate-90" />
           <span className="flex grow">{translation('dashboard')}</span>
         </SidebarLink>
         <SidebarLink href="/tasks" route={route}>
-          <CircleCheck/>
+          <CircleCheck />
           <span className="flex grow">{translation('myTasks')}</span>
           {data?.myTasksCount !== undefined && (<span className="text-description">{data.myTasksCount}</span>)}
         </SidebarLink>
         <SidebarLink href="/patients" route={route}>
-          <User/>
+          <User />
           <span className="flex grow">{translation('patients')}</span>
           {data?.patientsCount !== undefined && (<span className="text-description">{data.patientsCount}</span>)}
         </SidebarLink>
@@ -204,21 +215,21 @@ type PageWithHeaderProps = PropsWithChildren<{
  * The page content will be passed as the children
  */
 export const Page = ({
-                       children,
-                       pageTitle,
-                     }: PageWithHeaderProps) => {
+  children,
+  pageTitle,
+}: PageWithHeaderProps) => {
   return (
     <div className="flex-row-8 h-screen w-screen overflow-hidden">
       <Head>
         <title>{titleWrapper(pageTitle)}</title>
       </Head>
-      <StagingDisclaimerDialog/>
-      <Sidebar className="my-4 ml-4"/>
+      <StagingDisclaimerDialog />
+      <Sidebar className="my-4 ml-4" />
       <div className="flex-col-4 grow overflow-hidden">
-        <Header className="mr-4 mt-4 bg-background text-on-background"/>
+        <Header className="mr-4 mt-4 bg-background text-on-background" />
         <main className="flex-col-2 grow overflow-auto">
           {children}
-          <div className="min-h-16"/>
+          <div className="min-h-16" />
         </main>
       </div>
     </div>
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./build/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
