fix: validation for header

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>
   )
 }