fix: validation for header

components/Current/Header/index.tsx

@@ -1,5 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
+import { getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
@@ -18,7 +19,7 @@ export default async function Header() {
       lang: getLang(),
     }),
     serverClient().user.name(),
-    serverClient().contentstack.languageSwitcher.get(),
+    getLanguageSwitcher(),
     serverClient().contentstack.myPages.navigation.get(),
   ])
 

components/Footer/Details/index.tsx

@@ -1,3 +1,5 @@
+import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
@@ -8,7 +10,6 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./details.module.css"
 
-import type { FooterDetailsProps } from "@/types/components/footer/navigation"
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import { IconName } from "@/types/components/icon"
 
@@ -17,13 +18,12 @@ function SocialIcon({ iconName }: SocialIconsProps) {
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
 
-export default async function FooterDetails({
-  socialMedia,
-  tertiaryLinks,
-  languageUrls,
-}: FooterDetailsProps) {
+export default async function FooterDetails() {
   const lang = getLang()
   const { formatMessage } = await getIntl()
+  // preloaded
+  const footer = await getFooter()
+  const languages = await getLanguageSwitcher()
   const currentYear = new Date().getFullYear()
 
   return (
@@ -42,7 +42,7 @@ export default async function FooterDetails({
           />
         </Link>
         <nav className={styles.socialNav}>
-          {socialMedia?.links.map(
+          {footer?.socialMedia.links.map(
             (link) =>
               link.href && (
                 <a
@@ -68,7 +68,7 @@ export default async function FooterDetails({
         </div>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
-            {tertiaryLinks?.map(
+            {footer?.tertiaryLinks.map(
               (link) =>
                 link.url && (
                   <Footnote asChild textTransform="uppercase" key={link.title}>
@@ -84,9 +84,9 @@ export default async function FooterDetails({
                 )
             )}
           </nav>
-          {languageUrls && (
-            <LanguageSwitcher type="footer" urls={languageUrls} />
-          )}
+          {languages?.urls ? (
+            <LanguageSwitcher type="footer" urls={languages.urls} />
+          ) : null}
         </div>
       </div>
     </section>

components/Footer/Navigation/index.tsx

@@ -1,22 +1,22 @@
+import { getFooter } from "@/lib/trpc/memoizedRequests"
+
 import FooterMainNav from "./MainNav"
 import FooterSecondaryNav from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
-import type { FooterNavigationProps } from "@/types/components/footer/navigation"
-
-export default function FooterNavigation({
-  mainLinks,
-  secondaryLinks,
-  appDownloads,
-}: FooterNavigationProps) {
+export default async function FooterNavigation() {
+  const footer = await getFooter()
+  if (!footer) {
+    return null
+  }
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>
-        <FooterMainNav mainLinks={mainLinks} />
+        <FooterMainNav mainLinks={footer.mainLinks} />
         <FooterSecondaryNav
-          secondaryLinks={secondaryLinks}
-          appDownloads={appDownloads}
+          secondaryLinks={footer.secondaryLinks}
+          appDownloads={footer.appDownloads}
         />
       </div>
     </section>

components/Footer/index.tsx

@@ -1,27 +1,18 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import FooterDetails from "./Details"
 import FooterNavigation from "./Navigation"
 
-export default async function Footer() {
-  const footerData = await serverClient().contentstack.base.footer()
-  const languages = await serverClient().contentstack.languageSwitcher.get()
+export function preload() {
+  void getFooter()
+  void getLanguageSwitcher()
+}
 
-  if (!footerData || !languages) {
-    return <FooterDetails />
-  }
+export default function Footer() {
   return (
     <footer>
-      <FooterNavigation
-        mainLinks={footerData.mainLinks}
-        secondaryLinks={footerData.secondaryLinks}
-        appDownloads={footerData.appDownloads}
-      />
-      <FooterDetails
-        socialMedia={footerData.socialMedia}
-        tertiaryLinks={footerData.tertiaryLinks}
-        languageUrls={languages.urls}
-      />
+      <FooterNavigation />
+      <FooterDetails />
     </footer>
   )
 }

components/Header/MainMenu/MobileMenu/index.tsx

@@ -71,8 +71,8 @@ export default function MobileMenu({
               <SearchIcon width={20} height={20} color="burgundy" />
               {intl.formatMessage({ id: "Find booking" })}
             </HeaderLink>
-            {topLink ? (
-              <HeaderLink href={topLink.href}>
+            {topLink.link ? (
+              <HeaderLink href={topLink.link.url}>
                 <GiftIcon width={20} height={20} color="burgundy" />
                 {topLink.title}
               </HeaderLink>

components/Header/MainMenu/MobileMenuWrapper/index.tsx

@@ -1,21 +1,20 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import MobileMenu from "../MobileMenu"
 
 export default async function MobileMenuWrapper({
   children,
 }: React.PropsWithChildren) {
-  const [languages, headerData] = await Promise.all([
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
+  // preloaded
+  const languages = await getLanguageSwitcher()
+  const header = await getHeader()
 
-  if (!languages || !headerData) {
+  if (!languages || !header) {
     return null
   }
 
   return (
-    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink}>
+    <MobileMenu languageUrls={languages.urls} topLink={header.data.topLink}>
       {children}
     </MobileMenu>
   )

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

@@ -12,7 +12,7 @@ import styles from "./navigationMenuItem.module.css"
 import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
 export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
-  const { submenu, title, link, seeAllLink, card } = item
+  const { submenu, title, link } = item
   const [isExpanded, setIsExpanded] = useState(false) // TODO: Use store to manage this state when adding the menu itself.
 
   function handleButtonClick() {
@@ -36,9 +36,9 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     </MainMenuButton>
   ) : (
     <Link
-      href={link!.href}
-      color="burgundy"
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
+      color="burgundy"
+      href={link!.url}
     >
       {title}
     </Link>

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader } from "@/lib/trpc/memoizedRequests"
 
 import NavigationMenuList from "./NavigationMenuList"
 
@@ -7,9 +7,13 @@ import type { NavigationMenuProps } from "@/types/components/header/navigationMe
 export default async function NavigationMenu({
   isMobile,
 }: NavigationMenuProps) {
-  const headerData = await serverClient().contentstack.base.header()
+  const header = await getHeader()
 
-  const filteredItems = headerData?.menuItems.filter(
+  if (!header) {
+    return null
+  }
+
+  const filteredItems = header.data.menuItems.filter(
     ({ link, submenu }) => submenu.length || link
   )
 

components/Header/TopMenu/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
@@ -9,23 +9,26 @@ import HeaderLink from "../HeaderLink"
 import styles from "./topMenu.module.css"
 
 export default async function TopMenu() {
-  const [intl, languages, headerData] = await Promise.all([
-    getIntl(),
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
+  // cached
+  const intl = await getIntl()
+  // both preloaded
+  const languages = await getLanguageSwitcher()
+  const header = await getHeader()
 
-  if (!languages || !headerData) {
+  if (!languages || !header) {
     return null
   }
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        {headerData.topLink ? (
-          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
+        {header.data.topLink.link ? (
+          <HeaderLink
+            className={styles.topLink}
+            href={header.data.topLink.link.url}
+          >
             <GiftIcon width={20} height={20} color="burgundy" />
-            {headerData.topLink.title}
+            {header.data.topLink.title}
           </HeaderLink>
         ) : null}
         <div className={styles.options}>

components/Header/index.tsx

@@ -1,11 +1,15 @@
 import { Suspense } from "react"
 
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+
 import MainMenu from "./MainMenu"
 import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
 export default function Header() {
+  void getHeader()
+  void getLanguageSwitcher()
   return (
     <header className={styles.header}>
       <Suspense fallback="Loading top menu">