Refactors functions to const

src/App.tsx

@@ -9,7 +9,7 @@ import TeamMembers from './pages/TeamMembers/TeamMembers'
 
 import { Routes, Route } from 'react-router-dom'
 
-export default function App() {
+const App = () => {
   return (
     <Routes>
       {import.meta.env.NODE_ENV !== 'production' && <Route path='/login' element={<Login />} />}
@@ -26,3 +26,5 @@ export default function App() {
     </Routes>
   )
 }
+
+export default App

src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { User } from '../../@types/user'
 import styles from './avatar.module.scss'
 
-export default function Avatar() {
+const Avatar = () => {
   const [userProfileData, setUserProfileData] = useState<User>()
   const [imageSrc, setImageSrc] = useState<string>()
   const [fallbackInitials, setFallbackInitials] = useState<string>('??')
@@ -46,3 +46,5 @@ export default function Avatar() {
     </div>
   )
 }
+
+export default Avatar

src/components/Breadcrumb.tsx

@@ -3,7 +3,7 @@ import { Breadcrumb as OriginalBreadcrumb } from '@statisticsnorway/ssb-componen
 import { useLocation } from 'react-router-dom'
 import { DaplaCtrlContext } from '../provider/DaplaCtrlProvider'
 
-export default function Breadcrumb() {
+const Breadcrumb = () => {
   const location = useLocation()
   const pathnames = location.pathname
     .split('/')
@@ -34,3 +34,5 @@ export default function Breadcrumb() {
 
   return <OriginalBreadcrumb items={items} />
 }
+
+export default Breadcrumb

src/components/Header/Header.tsx

@@ -4,7 +4,7 @@ import { Link } from '@statisticsnorway/ssb-component-library'
 import Avatar from '../Avatar/Avatar'
 import { useNavigate } from 'react-router-dom'
 
-export default function Header() {
+const Header = () => {
   const navigate = useNavigate()
 
   return (
@@ -19,3 +19,5 @@ export default function Header() {
     </div>
   )
 }
+
+export default Header

src/components/PageLayout/PageLayout.tsx

@@ -10,7 +10,7 @@ interface PageLayoutProps {
   content?: JSX.Element
 }
 
-export default function PageLayout({ title, button, content }: PageLayoutProps) {
+const PageLayout = ({ title, button, content }: PageLayoutProps) => {
   return (
     <>
       <Header />
@@ -25,3 +25,5 @@ export default function PageLayout({ title, button, content }: PageLayoutProps)
     </>
   )
 }
+
+export default PageLayout

src/components/Table/Table.tsx

@@ -22,7 +22,7 @@ export interface TableData {
   }[]
 }
 
-function conditionalStyling(index: number) {
+const conditionalStyling = (index: number) => {
   // Add conditional styling for the first element, then third etc
   return (index + 1) % 2 !== 0 ? styles.greenBackground : undefined
 }

src/pages/Login/Login.tsx

@@ -9,7 +9,7 @@ import { validateKeycloakToken } from '../../services/validateKeycloakToken'
 import { getUserProfile, getUserProfileFallback } from '../../services/userProfile'
 import { jwtRegex } from '../../utils/regex'
 
-export default function Login() {
+const Login = () => {
   const [error, setError] = useState(false)
   const [value, setValue] = useState('')
 
@@ -92,3 +92,5 @@ export default function Login() {
     </div>
   )
 }
+
+export default Login

src/pages/NotFound/NotFound.tsx

@@ -2,7 +2,7 @@ import notFoundStyles from './notFound.module.scss'
 
 import { Title } from '@statisticsnorway/ssb-component-library'
 
-export default function NotFound() {
+const NotFound = () => {
   return (
     <div className={notFoundStyles.centerDiv}>
       <Title size={1} className={notFoundStyles.title}>
@@ -14,3 +14,5 @@ export default function NotFound() {
     </div>
   )
 }
+
+export default NotFound

src/pages/TeamDetail/TeamDetail.tsx

@@ -13,7 +13,7 @@ import { Text, Link, Dialog, LeadParagraph } from '@statisticsnorway/ssb-compone
 import PageSkeleton from '../../components/PageSkeleton/PageSkeleton'
 import { Skeleton } from '@mui/material'
 
-export default function TeamDetail() {
+const TeamDetail = () => {
   const { setBreadcrumbTeamDetailDisplayName } = useContext(DaplaCtrlContext)
   const [error, setError] = useState<ErrorResponse | undefined>()
   const [loadingTeamData, setLoadingTeamData] = useState<boolean>(true)
@@ -79,7 +79,7 @@ export default function TeamDetail() {
     setBreadcrumbTeamDetailDisplayName({ displayName })
   }, [teamDetailData, setBreadcrumbTeamDetailDisplayName])
 
-  function renderUsernameColumn(user: User) {
+  const renderUsernameColumn = (user: User) => {
     return (
       <>
         <span>
@@ -92,15 +92,15 @@ export default function TeamDetail() {
     )
   }
 
-  function renderErrorAlert() {
+  const renderErrorAlert = () => {
     return (
       <Dialog type='warning' title='Could not fetch data'>
         {error?.error.message}
       </Dialog>
     )
   }
 
-  function renderContent() {
+  const renderContent = () => {
     if (error) return renderErrorAlert()
     if (loadingTeamData) return <PageSkeleton hasDescription hasTab={false} /> // TODO: Remove hasTab prop after tabs are implemented
 
@@ -153,3 +153,5 @@ export default function TeamDetail() {
     />
   )
 }
+
+export default TeamDetail

src/pages/TeamOverview/TeamOverview.tsx

@@ -12,7 +12,7 @@ import { Team } from '../../@types/team'
 import { getTeamOverview, TeamOverviewData } from '../../services/teamOverview'
 import { formatDisplayName } from '../../utils/utils'
 
-export default function TeamOverview() {
+const TeamOverview = () => {
   const defaultActiveTab = {
     title: 'Mine team',
     path: 'myTeams',
@@ -71,7 +71,7 @@ export default function TeamOverview() {
     }
   }
 
-  function renderTeamNameColumn(team: Team) {
+  const renderTeamNameColumn = (team: Team) => {
     return (
       <>
         <span>
@@ -84,15 +84,15 @@ export default function TeamOverview() {
     )
   }
 
-  function renderErrorAlert() {
+  const renderErrorAlert = () => {
     return (
       <Dialog type='warning' title='Could not fetch teams'>
         {error?.error.message}
       </Dialog>
     )
   }
 
-  function renderContent() {
+  const renderContent = () => {
     if (error) return renderErrorAlert()
     if (loading) return <PageSkeleton />
 
@@ -135,3 +135,5 @@ export default function TeamOverview() {
 
   return <PageLayout title='Teamoversikt' content={renderContent()} />
 }
+
+export default TeamOverview

src/pages/UserProfile/UserProfile.tsx

@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom'
 import { ErrorResponse } from '../../@types/error'
 import { Skeleton } from '@mui/material'
 
-export default function UserProfile() {
+const UserProfile = () => {
   const { setBreadcrumbUserProfileDisplayName } = useContext(DaplaCtrlContext)
   const [error, setError] = useState<ErrorResponse | undefined>()
   const [loadingTeamData, setLoadingTeamData] = useState<boolean>(true)
@@ -81,7 +81,7 @@ export default function UserProfile() {
     }
   }, [userProfileData, setBreadcrumbUserProfileDisplayName])
 
-  function renderTeamNameColumn(team: Team) {
+  const renderTeamNameColumn = (team: Team) => {
     return (
       <>
         <span>
@@ -94,15 +94,15 @@ export default function UserProfile() {
     )
   }
 
-  function renderErrorAlert() {
+  const renderErrorAlert = () => {
     return (
       <Dialog type='warning' title='Could not fetch data'>
         {error?.error.message}
       </Dialog>
     )
   }
 
-  function renderContent() {
+  const renderContent = () => {
     if (error) return renderErrorAlert()
     if (loadingTeamData) return <PageSkeleton hasDescription hasTab={false} /> // TODO: Remove hasTab prop after tabs are implemented
 
@@ -154,3 +154,5 @@ export default function UserProfile() {
     />
   )
 }
+
+export default UserProfile