597 Profilbilde i headingen

apps/web/src/api/auth/authApiTypes.ts

@@ -1,12 +1,3 @@
-// refresh
-export interface RenewResponse {
-  accessToken: string
-  expiresAt: number
-  expiration: number
-  sameSite: boolean
-  secure: boolean
-}
-
 // userInfo
 export interface UserInfo {
   name?: string

apps/web/src/api/data/employee/employeeApi.ts

@@ -13,7 +13,7 @@ import {
 export const getEmployeeTable = () =>
   getAtApiV2<EmployeeTableResponse[]>('/employees/employeeTable')
 
-export const getEmployeeProfile = (url: string, email: string) =>
+export const getEmployeeProfile = (email: string) =>
   getAtApiV2<EmployeeProfileResponse>(`/employees/employeeProfile`, {
     params: { email },
   })

apps/web/src/api/data/employee/employeeQueries.ts

@@ -14,13 +14,9 @@ export const useEmployeeTable = () =>
   })
 
 export const useEmployeeProfile = (email: string) =>
-  useSWR(
-    ['/employeeProfile', email],
-    ([url, email]) => getEmployeeProfile(url, email),
-    {
-      revalidateOnFocus: false,
-    }
-  )
+  useSWR(['/employeeProfile', email], ([email]) => getEmployeeProfile(email), {
+    revalidateOnFocus: false,
+  })
 
 export const useEmployeeCompetence = (email: string) =>
   useSWR(

apps/web/src/components/header/Header.tsx

@@ -1,13 +1,12 @@
-import React, { FunctionComponent } from 'react'
+import { NavLink, Link, useLocation } from 'react-router-dom'
 import { AppBar, Avatar, Tabs, Tab, Toolbar } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { NavLink, Link, useLocation } from 'react-router-dom'
-import { NavMenu } from './NavMenu'
+import NavMenu from './NavMenu'
 import { ReactComponent as KnowitLogo } from '../../assets/logo.svg'
 import { ReactComponent as FallbackUserIcon } from '../../assets/fallback_user.svg'
-import ModeSwitch from './ModeSwitch'
 import { useUserInfo } from '../../hooks/useUserInfo'
 import LoginLogoutButton from '../LoginLogoutButton'
+import ModeSwitch from './ModeSwitch'
 
 const ComponentRoot = styled('div')(({ theme }) => ({
   top: 0,
@@ -40,13 +39,10 @@ interface HeaderProps {
   onChangeMode: () => void
 }
 
-export const Header: FunctionComponent<HeaderProps> = ({
-  darkMode,
-  onChangeMode,
-}) => {
-  const { user, isAuthenticated } = useUserInfo()
+export default function Header({ darkMode, onChangeMode }: HeaderProps) {
   const availablePages = ['/ansatte', '/kunder', '/kompetanse', '/organisasjon']
   const activePage = useLocation().pathname
+  const { isAuthenticated, userEmployeeProfile } = useUserInfo()
 
   let tabsVisiblePage: string | boolean
   availablePages.includes(activePage)
@@ -95,18 +91,23 @@ export const Header: FunctionComponent<HeaderProps> = ({
           <Link data-testid="knowit-logo" to={'/'}>
             <KnowitLogoStyled title="knowit-logo" />
           </Link>
+
           <NavMenu>{isAuthenticated && <HeaderTabs />}</NavMenu>
+
           <ActionsContainer>
             <LoginLogoutButton />
-            <AvatarStyled id="userAvatar" alt={user?.name} src={user?.picture}>
+            <AvatarStyled
+              id="userAvatar"
+              alt={userEmployeeProfile?.name}
+              src={userEmployeeProfile?.image}
+            >
               <FallbackUserIcon />
             </AvatarStyled>
+
             <ModeSwitch onChange={handleModeSwitch} checked={darkMode} />
           </ActionsContainer>
         </Toolbar>
       </AppBar>
     </ComponentRoot>
   )
 }
-
-export default Header

apps/web/src/components/header/NavMenu.tsx

@@ -8,6 +8,6 @@ const ComponentRoot = styled('ul')(() => ({
   overflow: 'hidden',
 }))
 
-export function NavMenu({ children }: { children: React.ReactNode }) {
+export default function NavMenu({ children }: { children: React.ReactNode }) {
   return <ComponentRoot>{children}</ComponentRoot>
 }

apps/web/src/context/UserInfoContext.tsx

@@ -1,11 +1,14 @@
 import { createContext, useEffect, useState } from 'react'
+import { getEmployeeProfile } from '../api/data/employee/employeeApi'
 import { getUserInfo } from '../api/data/user/userApi'
 import { isError } from '../api/errorHandling'
+import { EmployeeProfileResponse } from '../api/data/employee/employeeApiTypes'
 import { UserInfo } from '../api/auth/authApiTypes'
 
 interface UserInfoContextProps {
   user: UserInfo | null | undefined
   setUser: (val: UserInfo | null) => void
+  userEmployeeProfile: EmployeeProfileResponse
 }
 
 export const UserInfoContext = createContext<UserInfoContextProps | null>(null)
@@ -14,23 +17,13 @@ const UserInfoProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null)
+  const [userEmployeeProfile, setUserEmployeeProfile] =
+    useState<EmployeeProfileResponse>()
 
   useEffect(() => {
-    const fetchUser = async () => {
+    async function fetchUser() {
       try {
-        /* The timeout is to prevent a user which was logged in in previous seesion from seeing the login page for a short flash.
-         * When user is undefined, App component will return null, which will prevent the login page from being rendered. */
-        /*  const timeout = setTimeout(
-          () => {
-            setUserInfo(null)
-          },
-          localStorage.getItem('login') ? 3000 : 0
-        ) */
-
         const user = await getUserInfo()
-
-        /* clearTimeout(timeout) */
-
         setUserInfo(user)
       } catch (error) {
         if (isError(error)) {
@@ -42,8 +35,30 @@ const UserInfoProvider: React.FC<{ children: React.ReactNode }> = ({
     fetchUser()
   }, [])
 
+  useEffect(() => {
+    async function fetchEmployeeProfile() {
+      if (userInfo) {
+        const userEmail = userInfo.email?.toLowerCase()
+        if (userEmail) {
+          const data = await getEmployeeProfile(userEmail)
+          setUserEmployeeProfile(data)
+        }
+      } else {
+        setUserEmployeeProfile(null)
+      }
+    }
+
+    fetchEmployeeProfile()
+  }, [userInfo])
+
   return (
-    <UserInfoContext.Provider value={{ user: userInfo, setUser: setUserInfo }}>
+    <UserInfoContext.Provider
+      value={{
+        user: userInfo,
+        setUser: setUserInfo,
+        userEmployeeProfile,
+      }}
+    >
       {children}
     </UserInfoContext.Provider>
   )

apps/web/src/hooks/useUserInfo.ts

@@ -6,11 +6,13 @@ export function useUserInfo() {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const userInfoContext = useContext(UserInfoContext)
   const { authStatus } = useAuthenticator((context) => [context.authStatus])
-  const { user, setUser } = userInfoContext
+  const { user, setUser, userEmployeeProfile } = userInfoContext
 
   useEffect(() => {
-    setIsAuthenticated(authStatus === 'authenticated')
-  }, [authStatus])
+    if (user) {
+      setIsAuthenticated(authStatus === 'authenticated')
+    }
+  }, [authStatus, user, userEmployeeProfile])
 
-  return { user, setUser, isAuthenticated }
+  return { user, setUser, isAuthenticated, userEmployeeProfile }
 }