Break into smaller components

components/Header/MainMenu/MobileMenu/index.tsx

@@ -18,11 +18,7 @@ import styles from "./mobileMenu.module.css"
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
-export default function MobileMenu({
-  menuItems,
-  languageUrls,
-  topLink,
-}: MobileMenuProps) {
+export default function MobileMenu({ languageUrls, topLink }: MobileMenuProps) {
   const intl = useIntl()
   const {
     handleHamburgerClick,
@@ -66,7 +62,7 @@ export default function MobileMenu({
           className={styles.dialog}
           aria-label={intl.formatMessage({ id: "Menu" })}
         >
-          <NavigationMenu isMobile={true} items={menuItems} />
+          <NavigationMenu isMobile={true} />
           <footer className={styles.footer}>
             <HeaderLink href="#">
               <SearchIcon width={20} height={20} color="burgundy" />

components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx

@@ -0,0 +1,24 @@
+"use client"
+import NavigationMenuItem from "../NavigationMenuItem"
+
+import styles from "../navigationMenu.module.css"
+
+export default function NavigationMenuList({
+  isMobile,
+  items,
+}: {
+  isMobile: boolean
+  items: any
+}) {
+  return (
+    <ul
+      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+    >
+      {items.map((item: any) => (
+        <li key={item.title} className={styles.item}>
+          <NavigationMenuItem isMobile={isMobile} item={item} />
+        </li>
+      ))}
+    </ul>
+  )
+}

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,30 +1,22 @@
-import NavigationMenuItem from "./NavigationMenuItem"
+"use server"
+import { serverClient } from "@/lib/trpc/server"
 
-import styles from "./navigationMenu.module.css"
+import NavigationMenuList from "./NavigationMenuList"
 
 import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
-export default function NavigationMenu({
-  items,
+export default async function NavigationMenu({
   isMobile,
 }: NavigationMenuProps) {
-  const filteredItems = items.filter(
+  const headerData = await serverClient().contentstack.base.header()
+
+  const filteredItems = headerData?.menuItems.filter(
     ({ link, submenu }) => submenu.length || link
   )
 
-  if (!filteredItems.length) {
+  if (!filteredItems?.length) {
     return null
   }
 
-  return (
-    <ul
-      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
-    >
-      {filteredItems.map((item) => (
-        <li key={item.title} className={styles.item}>
-          <NavigationMenuItem isMobile={isMobile} item={item} />
-        </li>
-      ))}
-    </ul>
-  )
+  return <NavigationMenuList isMobile={isMobile} items={filteredItems} />
 }

components/Header/MainMenu/index.tsx

@@ -1,4 +1,5 @@
 import NextLink from "next/link"
+import { Suspense } from "react"
 
 import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
@@ -18,13 +19,46 @@ import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/header/mainMenu"
 
-export default async function MainMenu({
-  languageUrls,
-  menuItems,
-  topLink,
-}: MainMenuProps) {
+export default async function MainMenu({}: MainMenuProps) {
   const lang = getLang()
 
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.mainMenu}>
+      <nav className={styles.nav}>
+        <NextLink className={styles.logoLink} href={`/${lang}`}>
+          <Suspense>
+            <Image
+              alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              data-nosvgsrc="/_static/img/scandic-logotype.png"
+              itemProp="logo"
+              height={22}
+              src="/_static/img/scandic-logotype.svg"
+              width={103}
+            />
+          </Suspense>
+        </NextLink>
+        <div className={styles.menus}>
+          <Suspense fallback={"Loading nav"}>
+            <NavigationMenu isMobile={false} />
+          </Suspense>
+          <Suspense fallback={"Loading profile"}>
+            <MyPagesMenuServer />
+          </Suspense>
+          <Suspense fallback={"Loading menu"}>
+            <MobileMenuServer />
+          </Suspense>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+async function MyPagesMenuServer({}) {
+  const lang = getLang()
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
     serverClient().contentstack.myPages.navigation.get(),
@@ -33,54 +67,47 @@ export default async function MainMenu({
   ])
 
   return (
-    <div className={styles.mainMenu}>
-      <nav className={styles.nav}>
-        <NextLink className={styles.logoLink} href={`/${lang}`}>
-          <Image
-            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
-            className={styles.logo}
-            data-js="scandiclogoimg"
-            data-nosvgsrc="/_static/img/scandic-logotype.png"
-            itemProp="logo"
-            height={22}
-            src="/_static/img/scandic-logotype.svg"
-            width={103}
+    <>
+      {user ? (
+        <>
+          <MyPagesMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </NextLink>
-        <div className={styles.menus}>
-          <NavigationMenu items={menuItems} isMobile={false} />
-          {user ? (
-            <>
-              <MyPagesMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-              <MyPagesMobileMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-            </>
-          ) : (
-            <Link
-              href={myPages[lang]}
-              className={styles.loginLink}
-              aria-label={intl.formatMessage({ id: "Log in/Join" })}
-            >
-              <Avatar />
-              <span className={styles.userName}>
-                {intl.formatMessage({ id: "Log in/Join" })}
-              </span>
-            </Link>
-          )}
-          <MobileMenu
-            languageUrls={languageUrls}
-            menuItems={menuItems}
-            topLink={topLink}
+          <MyPagesMobileMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </div>
-      </nav>
-    </div>
+        </>
+      ) : (
+        <Link
+          href={myPages[lang]}
+          className={styles.loginLink}
+          aria-label={intl.formatMessage({ id: "Log in/Join" })}
+        >
+          <Avatar />
+          <span className={styles.userName}>
+            {intl.formatMessage({ id: "Log in/Join" })}
+          </span>
+        </Link>
+      )}
+    </>
+  )
+}
+
+async function MobileMenuServer({}) {
+  const [languages, headerData] = await Promise.all([
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
+
+  return (
+    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
   )
 }

components/Header/TopMenu/index.tsx

@@ -1,5 +1,7 @@
 import { Suspense } from "react"
 
+import { serverClient } from "@/lib/trpc/server"
+
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
@@ -10,23 +12,28 @@ import styles from "./topMenu.module.css"
 
 import type { TopMenuProps } from "@/types/components/header/topMenu"
 
-export default async function TopMenu({
-  languageSwitcher,
-  topLink,
-}: TopMenuProps) {
-  const intl = await getIntl()
+export default async function TopMenu({}: TopMenuProps) {
+  const [intl, languages, headerData] = await Promise.all([
+    getIntl(),
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        {topLink ? (
-          <HeaderLink className={styles.topLink} href={topLink.href}>
+        {headerData.topLink ? (
+          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
             <GiftIcon width={20} height={20} color="burgundy" />
-            {topLink.title}
+            {headerData.topLink.title}
           </HeaderLink>
         ) : null}
         <div className={styles.options}>
-          {languageSwitcher}
+          <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
           <HeaderLink href="#">
             <SearchIcon width={20} height={20} color="burgundy" />
             {intl.formatMessage({ id: "Find booking" })}

components/Header/index.tsx

@@ -1,39 +1,18 @@
 import { Suspense } from "react"
 
-import { serverClient } from "@/lib/trpc/server"
-
-import LoadingSpinner from "../LoadingSpinner"
 import MainMenu from "./MainMenu"
 import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-export default async function Header({
-  languageSwitcher,
-}: {
-  languageSwitcher: React.ReactNode
-}) {
-  const [languages, headerData] = await Promise.all([
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
-
-  if (!languages || !headerData) {
-    return null
-  }
-
+export default async function Header({}) {
   return (
     <header className={styles.header}>
-      <Suspense fallback={<LoadingSpinner />}>
-        <TopMenu
-          languageSwitcher={languageSwitcher}
-          topLink={headerData.topLink}
-        />
-        <MainMenu
-          languageUrls={languages.urls}
-          menuItems={headerData.menuItems}
-          topLink={headerData.topLink}
-        />
+      <Suspense fallback="Loading top menu">
+        <TopMenu />
+      </Suspense>
+      <Suspense fallback="Loading main menu">
+        <MainMenu />
       </Suspense>
     </header>
   )