feat(layout): read lang param in Layout instead of client side fetching

It first seemed like layout.tsx could not access path params, like [lang], but this was not the case. This greatly simplifies the fetching of data for Layout, and supports SSR

src/app/(main)/layout.tsx → src/app/(main)/[lang]/layout.tsx

@@ -6,10 +6,12 @@ import SkipToMain from "src/components/skipToMain/SkipToMain";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import { BRAND_ASSETS_QUERY } from "studio/lib/queries/brandAssets";
 import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
+import { LEGAL_DOCUMENTS_BY_LANG_QUERY } from "studio/lib/queries/legalDocuments";
 import { NAV_QUERY } from "studio/lib/queries/navigation";
 import { SOMEPROFILES_QUERY } from "studio/lib/queries/socialMediaProfiles";
 import { loadStudioQuery } from "studio/lib/store";
@@ -20,22 +22,36 @@ const hasValidData = (data: unknown) => data && Object.keys(data).length > 0;
 
 export default async function Layout({
   children,
+  params,
 }: Readonly<{
   children: React.ReactNode;
+  params: {
+    lang: string;
+  };
 }>) {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
-  const [initialNav, initialCompanyInfo, initialSoMe, initialBrandAssets] =
-    await Promise.all([
-      loadStudioQuery<Navigation>(NAV_QUERY, {}, { perspective }),
-      loadStudioQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
-      loadStudioQuery<SocialMediaProfiles | null>(
-        SOMEPROFILES_QUERY,
-        {},
-        { perspective },
-      ),
-      loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
-    ]);
+  const [
+    initialNav,
+    initialCompanyInfo,
+    initialSoMe,
+    initialLegal,
+    initialBrandAssets,
+  ] = await Promise.all([
+    loadStudioQuery<Navigation>(NAV_QUERY, {}, { perspective }),
+    loadStudioQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
+    loadStudioQuery<SocialMediaProfiles | null>(
+      SOMEPROFILES_QUERY,
+      {},
+      { perspective },
+    ),
+    loadStudioQuery<LegalDocument[]>(
+      LEGAL_DOCUMENTS_BY_LANG_QUERY,
+      { language: params.lang },
+      { perspective },
+    ),
+    loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
+  ]);
 
   const hasNavData = hasValidData(initialNav.data);
   const hasCompanyInfoData = hasValidData(initialCompanyInfo.data);
@@ -78,6 +94,7 @@ export default async function Layout({
       ) : (
         <Footer
           navigationData={initialNav.data}
+          legalData={initialLegal.data}
           companyInfo={initialCompanyInfo.data}
           brandAssets={initialBrandAssets.data}
           soMeData={initialSoMe.data}

src/components/navigation/footer/Footer.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
 
 import CustomLink from "src/components/link/CustomLink";
 import SoMeLink from "src/components/link/SoMeLink";
 import Text from "src/components/text/Text";
 import { useConvertSanityImageToNextImage } from "src/utils/hooks/useConvertImage";
-import useLanguage from "src/utils/hooks/useLanguage";
-import { fetchWithToken } from "studio/lib/fetchWithToken";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
@@ -16,7 +14,6 @@ import {
   SocialMediaLink,
   SocialMediaProfiles,
 } from "studio/lib/interfaces/socialMedia";
-import { LEGAL_DOCUMENTS_BY_LANG_QUERY } from "studio/lib/queries/legalDocuments";
 
 import styles from "./footer.module.css";
 
@@ -25,34 +22,22 @@ export interface IFooter {
   companyInfo: CompanyInfo;
   brandAssets: BrandAssets;
   soMeData: SocialMediaProfiles | null;
+  legalData: LegalDocument[];
 }
 
 const Footer = ({
   navigationData,
   companyInfo,
   brandAssets,
   soMeData,
+  legalData,
 }: IFooter) => {
   const renderedLogo = useConvertSanityImageToNextImage(
     brandAssets?.secondaryLogo,
   );
 
   const currentYear = new Date().getFullYear();
 
-  const { defaultLanguage, language } = useLanguage();
-
-  const [legalData, setLegalData] = useState<LegalDocument[] | null>(null);
-
-  useEffect(() => {
-    const languageId = language?.id ?? defaultLanguage?.id;
-    if (languageId === undefined) {
-      return;
-    }
-    fetchWithToken<LegalDocument[] | null>(LEGAL_DOCUMENTS_BY_LANG_QUERY, {
-      language: languageId,
-    }).then((data) => setLegalData(data));
-  }, [language, defaultLanguage]);
-
   return (
     <footer className={styles.footer}>
       <div className={styles.logo}>{renderedLogo}</div>
@@ -75,7 +60,7 @@ const Footer = ({
             internalLink: {
               _ref: legal.slug.current,
             },
-            language: language?.id,
+            language: legal.language,
           };
           return (
             <li key={legal._id}>

studio/lib/interfaces/legalDocuments.ts

@@ -8,6 +8,7 @@ export interface LegalDocument {
   slug: Slug;
   basicTitle: string;
   richText: PortableTextBlock[];
+  language: string;
   _translations: Translations[];
 }