useAuth directly in userdetails component

NationalLibraryOfNorway · Nov 13, 2024 · 89bc0cc · 89bc0cc
1 parent a0863fa
commit 89bc0cc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
@@ -11,7 +11,7 @@ import {ThemeToggleButton} from '@/components/ui/ThemeToggleButton';
 
 
 export default function Header() {
-  const { authenticated , user } = useAuth();
+  const { authenticated } = useAuth();
   const router = useRouter();
 
   return (
@@ -30,7 +30,7 @@ export default function Header() {
           <ThemeToggleButton />
           { authenticated ? (
             <>
-              <UserDetails name={user?.name ?? ''}/>
+              <UserDetails />
               <LogoutButton className="pl-2.5"/>
             </>
           ) : <></>}

diff --git a/src/components/ui/UserDetails.tsx b/src/components/ui/UserDetails.tsx
@@ -3,14 +3,15 @@
 import {User} from '@nextui-org/user';
 import {FC} from 'react';
 import {Avatar} from '@nextui-org/avatar';
+import {useAuth} from '@/providers/AuthProvider';
 
 interface UserDetailsProps {
-  name: string;
   className?: string;
 }
 
-export const UserDetails: FC<UserDetailsProps> = ({ name, className }) => {
-  const initials = name.split(' ').map(n => n[0]?.toUpperCase()).join('');
+export const UserDetails: FC<UserDetailsProps> = ({ className }) => {
+  const { user } = useAuth();
+  const initials = user?.name.split(' ').map(n => n[0]?.toUpperCase()).join('');
 
   return (
     <div className={`${className}`}>
@@ -22,10 +23,10 @@ export const UserDetails: FC<UserDetailsProps> = ({ name, className }) => {
       </div>
       <div className="hidden lg:flex items-center ">
         <User
-          name={name}
+          name={user?.name}
           avatarProps={{
             name: initials,
-            isBordered: false,
+            isBordered: false
           }}
         />
       </div>