From e8b5ec544e16c64f4c55dcff436dd26597e23713 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 13 Sep 2024 12:00:31 +0200
Subject: [PATCH] Break into smaller components

---
 .../[...paths]/page.tsx                       |   0
 .../[contentType]/[uid]/page.tsx              |   0
 .../default.tsx                               |   0
 .../my-pages/[...path]/page.tsx               |   0
 app/[lang]/(live)/@header/page.tsx            |  10 ++
 app/[lang]/(live)/@languageSwitcher/page.tsx  |  17 ---
 app/[lang]/(live)/layout.tsx                  |  12 +-
 .../Header/MainMenu/MobileMenu/index.tsx      |   8 +-
 .../NavigationMenuList/index.tsx              |  24 ++++
 .../Header/MainMenu/NavigationMenu/index.tsx  |  26 ++--
 components/Header/MainMenu/index.tsx          | 131 +++++++++++-------
 components/Header/TopMenu/index.tsx           |  25 ++--
 components/Header/index.tsx                   |  33 +----
 types/components/header/mainMenu.ts           |   9 +-
 types/components/header/mobileMenu.ts         |   1 -
 types/components/header/navigationMenu.ts     |   3 -
 types/components/header/topMenu.ts            |   8 +-
 17 files changed, 154 insertions(+), 153 deletions(-)
 rename app/[lang]/(live)/{@languageSwitcher => @header}/[...paths]/page.tsx (100%)
 rename app/[lang]/(live)/{@languageSwitcher => @header}/[contentType]/[uid]/page.tsx (100%)
 rename app/[lang]/(live)/{@languageSwitcher => @header}/default.tsx (100%)
 rename app/[lang]/(live)/{@languageSwitcher => @header}/my-pages/[...path]/page.tsx (100%)
 create mode 100644 app/[lang]/(live)/@header/page.tsx
 delete mode 100644 app/[lang]/(live)/@languageSwitcher/page.tsx
 create mode 100644 components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx

diff --git a/app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx b/app/[lang]/(live)/@header/[...paths]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx
rename to app/[lang]/(live)/@header/[...paths]/page.tsx
diff --git a/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx
rename to app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx
diff --git a/app/[lang]/(live)/@languageSwitcher/default.tsx b/app/[lang]/(live)/@header/default.tsx
similarity index 100%
rename from app/[lang]/(live)/@languageSwitcher/default.tsx
rename to app/[lang]/(live)/@header/default.tsx
diff --git a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx
rename to app/[lang]/(live)/@header/my-pages/[...path]/page.tsx
diff --git a/app/[lang]/(live)/@header/page.tsx b/app/[lang]/(live)/@header/page.tsx
new file mode 100644
index 000000000..adccd9484
--- /dev/null
+++ b/app/[lang]/(live)/@header/page.tsx
@@ -0,0 +1,10 @@
+import Header from "@/components/Header"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function HeaderPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  return <Header />
+}
diff --git a/app/[lang]/(live)/@languageSwitcher/page.tsx b/app/[lang]/(live)/@languageSwitcher/page.tsx
deleted file mode 100644
index b2e8932d8..000000000
--- a/app/[lang]/(live)/@languageSwitcher/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Suspense } from "react"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import LanguageSwitcher from "@/components/LanguageSwitcher"
-import { setLang } from "@/i18n/serverContext"
-
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function HeaderPage({ params }: PageArgs<LangParams>) {
-  setLang(params.lang)
-  const languages = await serverClient().contentstack.languageSwitcher.get()
-  if (!languages) {
-    return null
-  }
-  return <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
-}
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 461ebe093..a1d7e0408 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -23,11 +23,11 @@ import type { LangParams, LayoutArgs } from "@/types/params"
 export default async function RootLayout({
   children,
   params,
-  languageSwitcher,
+  header,
   bookingwidget,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & {
-    languageSwitcher: React.ReactNode
+    header: React.ReactNode
     bookingwidget: React.ReactNode
   }
 >) {
@@ -56,13 +56,13 @@ export default async function RootLayout({
       <body>
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           <TrpcProvider>
-            <Suspense fallback={<LoadingSpinner />}>
-              <Header languageSwitcher={languageSwitcher} />
-            </Suspense>
+            {header}
             {bookingwidget}
             {children}
             <ToastHandler />
-            <Footer />
+            <Suspense fallback={<LoadingSpinner />}>
+              <Footer />
+            </Suspense>
             <TokenRefresher />
           </TrpcProvider>
         </ServerIntlProvider>
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index a62eff80b..e5acd7642 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/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" />
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
new file mode 100644
index 000000000..60e4a5c7e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Header/MainMenu/NavigationMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/index.tsx
index cabe9a18d..8bbef197a 100644
--- a/components/Header/MainMenu/NavigationMenu/index.tsx
+++ b/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} />
 }
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 00b407827..22fd1bd9d 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/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} />
   )
 }
diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx
index 3b7e5c63d..adf8ca96d 100644
--- a/components/Header/TopMenu/index.tsx
+++ b/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" })}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 6add229cc..2bb580c2b 100644
--- a/components/Header/index.tsx
+++ b/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>
   )
diff --git a/types/components/header/mainMenu.ts b/types/components/header/mainMenu.ts
index e4ce50a5e..8053fc40f 100644
--- a/types/components/header/mainMenu.ts
+++ b/types/components/header/mainMenu.ts
@@ -1,8 +1 @@
-import type { Header, MenuItem } from "@/types/header"
-import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
-
-export interface MainMenuProps {
-  languageUrls: LanguageSwitcherData
-  menuItems: MenuItem[]
-  topLink: Header["topLink"]
-}
+export interface MainMenuProps {}
diff --git a/types/components/header/mobileMenu.ts b/types/components/header/mobileMenu.ts
index 795518147..398bb725e 100644
--- a/types/components/header/mobileMenu.ts
+++ b/types/components/header/mobileMenu.ts
@@ -3,6 +3,5 @@ import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
 export interface MobileMenuProps {
   languageUrls: LanguageSwitcherData
-  menuItems: MenuItem[]
   topLink: Header["topLink"]
 }
diff --git a/types/components/header/navigationMenu.ts b/types/components/header/navigationMenu.ts
index 32ea6e53e..735950a88 100644
--- a/types/components/header/navigationMenu.ts
+++ b/types/components/header/navigationMenu.ts
@@ -1,6 +1,3 @@
-import type { MenuItem } from "@/types/header"
-
 export interface NavigationMenuProps {
-  items: MenuItem[]
   isMobile: boolean
 }
diff --git a/types/components/header/topMenu.ts b/types/components/header/topMenu.ts
index 5c4426b81..f5ef829e6 100644
--- a/types/components/header/topMenu.ts
+++ b/types/components/header/topMenu.ts
@@ -1,7 +1 @@
-import type { Header } from "@/types/header"
-import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
-
-export interface TopMenuProps {
-  languageSwitcher: React.ReactNode
-  topLink: Header["topLink"]
-}
+export interface TopMenuProps {}