fix: baseUri and process.env inside components

Informasjonsforvaltning · May 2, 2024 · 14ed21e · 14ed21e
1 parent 2bcc1f4
commit 14ed21e
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 98 deletions.
diff --git a/apps/forms/app/[lang]/data-hunter/page.tsx b/apps/forms/app/[lang]/data-hunter/page.tsx
@@ -7,6 +7,7 @@ import { Heading, Paragraph } from '@digdir/designsystemet-react';
 import React from 'react';
 import { getPaths } from '@fdk-frontend/utils';
 import styles from './page.module.css';
+import { unstable_noStore as noStore } from 'next/cache';
 
 type Props = {
   params: {
@@ -15,15 +16,18 @@ type Props = {
 };
 
 const DataHunterPage = async ({ params: { lang } }: Props) => {
+  // Opt-in dynamic rendering
+  noStore();
+
   const dictionary = await getDictionary(lang);
-  const basePath = process.env.FDK_BASE_URI;
+  const baseUri = process.env.FDK_BASE_URI ?? '/';
   const breadcrumbList = [
     {
-      href: getPaths(basePath).forms,
+      href: getPaths(baseUri).forms,
       text: dictionary.forms,
     },
     {
-      href: getPaths(basePath).dataHunter,
+      href: getPaths(baseUri).dataHunter,
       text: dictionary.dataHunter,
     },
   ];

diff --git a/deploy/demo/forms-frontend/forms-frontend-env.yaml b/deploy/demo/forms-frontend/forms-frontend-env.yaml
@@ -14,6 +14,8 @@ spec:
       containers:
         - name: forms-frontend
           env:
+            - name: FDK_USE_DEMO_LOGO
+              value: "true"
             - name: DATAJEGER_EMAIL_ADDRESS
               value: datajegeren@norge.no
             - name: FDK_MAIL_SERVICE_ENDPOINT

diff --git a/libs/ui/src/lib/breadcrumbs/index.tsx b/libs/ui/src/lib/breadcrumbs/index.tsx
@@ -1,50 +1,54 @@
 import 'server-only';
 
 import { type Dictionary } from '@fdk-frontend/dictionaries';
-import { getPaths } from '@fdk-frontend/utils';
 import { Link } from '@digdir/designsystemet-react';
 import styles from './breadcrumbs.module.css';
+import { unstable_noStore as noStore } from 'next/cache';
 
 export type BreadcrumbType = {
   href: string;
   text: string;
 };
 
 export type BreadcrumbsProps = {
-  baseURI?: string;
   breadcrumbList?: BreadcrumbType[];
   dictionary: Dictionary;
 };
 
-const Breadcrumbs = async ({ baseURI, breadcrumbList, dictionary }: BreadcrumbsProps) => (
-  <div className={styles.container}>
-    <nav className={styles.breadcrumbs}>
-      <span>
-        <Link
-          className={styles.link}
-          aria-label={dictionary.homePage}
-          href={baseURI ?? process.env.FDK_BASE_URI ?? getPaths().root}
-        >
-          {dictionary.homePage}
-        </Link>
-        {breadcrumbList?.map((breadcrumb, i) => (
-          <span key={breadcrumb.href}>
-            <span className={styles.separator}>{'>'}</span>
-            {i === breadcrumbList.length - 1 ? (
-              <span className={styles.deactiveLink}>{breadcrumb.text}</span>
-            ) : (
-              <Link
-                className={styles.link}
-                href={breadcrumb.href}
-              >
-                {breadcrumb.text}
-              </Link>
-            )}
-          </span>
-        ))}
-      </span>
-    </nav>
-  </div>
-);
+const Breadcrumbs = async ({ breadcrumbList, dictionary }: BreadcrumbsProps) => {
+  // Opt-in dynamic rendering
+  noStore();
+
+  return (
+    <div className={styles.container}>
+      <nav className={styles.breadcrumbs}>
+        <span>
+          <Link
+            className={styles.link}
+            aria-label={dictionary.homePage}
+            href={process.env.FDK_BASE_URI ?? '/'}
+          >
+            {dictionary.homePage}
+          </Link>
+          {breadcrumbList?.map((breadcrumb, i) => (
+            <span key={breadcrumb.href}>
+              <span className={styles.separator}>{'>'}</span>
+              {i === breadcrumbList.length - 1 ? (
+                <span className={styles.deactiveLink}>{breadcrumb.text}</span>
+              ) : (
+                <Link
+                  className={styles.link}
+                  href={breadcrumb.href}
+                >
+                  {breadcrumb.text}
+                </Link>
+              )}
+            </span>
+          ))}
+        </span>
+      </nav>
+    </div>
+  );
+};
 
 export { Breadcrumbs };
diff --git a/libs/ui/src/lib/footer/data/index.ts b/libs/ui/src/lib/footer/data/index.ts
@@ -1,28 +1,28 @@
 import { Dictionary } from '@fdk-frontend/dictionaries';
 import { getPaths } from '@fdk-frontend/utils';
 
-export const getFooterData = (dictionary: Dictionary, basePath: string) => [
+export const getFooterData = (dictionary: Dictionary, baseUri: string) => [
   {
     heading: dictionary.searchInCatalogs,
     links: [
       {
-        href: getPaths(basePath).searchAll,
+        href: getPaths(baseUri).searchAll,
         text: dictionary.searchInAllCatalogs,
       },
       {
-        href: getPaths(basePath).datasets,
+        href: getPaths(baseUri).datasets,
         text: dictionary.searchInDatasets,
       },
       {
-        href: getPaths(basePath).dataServices,
+        href: getPaths(baseUri).dataServices,
         text: dictionary.searchInDataServices,
       },
       {
-        href: getPaths(basePath).concepts,
+        href: getPaths(baseUri).concepts,
         text: dictionary.searchInConcepts,
       },
       {
-        href: getPaths(basePath).informationModels,
+        href: getPaths(baseUri).informationModels,
         text: dictionary.searchInInformationModels,
       },
     ],
@@ -31,28 +31,28 @@ export const getFooterData = (dictionary: Dictionary, basePath: string) => [
     heading: dictionary.aboutNationalDataCatalog,
     links: [
       {
-        href: getPaths(basePath).guidance,
+        href: getPaths(baseUri).guidance,
         text: dictionary.guidanceAndStandards,
       },
       {
-        href: getPaths(basePath).reports,
+        href: getPaths(baseUri).reports,
         text: dictionary.reports,
       },
       {
-        href: getPaths(basePath).organizations,
+        href: getPaths(baseUri).organizations,
         text: dictionary.organizations,
       },
       {
-        href: getPaths(basePath).about,
+        href: getPaths(baseUri).about,
         text: dictionary.aboutNationalDataCatalog,
       },
       {
-        href: getPaths(basePath).accessibilityStatement,
+        href: getPaths(baseUri).accessibilityStatement,
         text: dictionary.accessibilityStatement,
         external: true,
       },
       {
-        href: getPaths(basePath).aboutRegistration,
+        href: getPaths(baseUri).aboutRegistration,
         text: dictionary.registrationHelp,
       },
     ],
@@ -65,12 +65,12 @@ export const getFooterData = (dictionary: Dictionary, basePath: string) => [
         undecoratedText: `${dictionary.footer.aboutWebsite.nationalDataCatalogManager}${dictionary.nationalDataCatalog}`,
       },
       {
-        href: getPaths(basePath).privacyPolicy,
+        href: getPaths(baseUri).privacyPolicy,
         text: dictionary.privacyPolicy,
         external: true,
       },
       {
-        href: getPaths(basePath).cookies,
+        href: getPaths(baseUri).cookies,
         text: dictionary.cookies,
       },
     ],
@@ -79,7 +79,7 @@ export const getFooterData = (dictionary: Dictionary, basePath: string) => [
     heading: dictionary.contact,
     links: [
       {
-        href: getPaths(basePath).nationalDatacatalogEmail,
+        href: getPaths(baseUri).nationalDatacatalogEmail,
         text: dictionary.nationalDatacatalogEmail,
       },
     ],

diff --git a/libs/ui/src/lib/footer/index.tsx b/libs/ui/src/lib/footer/index.tsx
@@ -7,15 +7,17 @@ import Image from 'next/image';
 import Ellipse from './images/Ellipse.svg';
 import Rectangle from './images/Rectangle.svg';
 import { Dictionary } from '@fdk-frontend/dictionaries';
-import { getPaths } from '@fdk-frontend/utils';
+import { unstable_noStore as noStore } from 'next/cache';
 
 type FooterProps = {
   dictionary: Dictionary;
 };
 
 const Footer = ({ dictionary }: FooterProps) => {
-  const basePath = process.env.FDK_BASE_URI ?? getPaths().root;
-  const footerData = getFooterData(dictionary, basePath);
+  // Opt-in dynamic rendering
+  noStore();
+
+  const footerData = getFooterData(dictionary, process.env.FDK_BASE_URI ?? '/');
   return (
     <footer className={styles.footer}>
       <div className={styles.rectangleIcon}>

diff --git a/libs/ui/src/lib/header/data/index.ts b/libs/ui/src/lib/header/data/index.ts
@@ -3,7 +3,7 @@ import { getPaths } from '@fdk-frontend/utils';
 
 export const getHeaderData = (
   dictionary: Dictionary,
-  basePath: string,
+  baseUri: string,
   FDK_COMMUNITY_BASE_URI: string,
   FDK_REGISTRATION_BASE_URI: string,
 ) => [
@@ -12,52 +12,52 @@ export const getHeaderData = (
     items: [
       {
         text: dictionary.aboutNationalDataCatalog,
-        href: getPaths(basePath).about,
+        href: getPaths(baseUri).about,
       },
       {
         text: dictionary.aboutDatasetCatalog,
-        href: getPaths(basePath).aboutDatasetCatalog,
+        href: getPaths(baseUri).aboutDatasetCatalog,
       },
       {
         text: dictionary.aboutDataServiceCatalog,
-        href: getPaths(basePath).aboutDataServiceCatalog,
+        href: getPaths(baseUri).aboutDataServiceCatalog,
       },
       {
         text: dictionary.aboutConceptCatalog,
-        href: getPaths(basePath).aboutConceptCatalog,
+        href: getPaths(baseUri).aboutConceptCatalog,
       },
       {
         text: dictionary.aboutInformationModelCatalog,
-        href: getPaths(basePath).aboutInformationModelCatalog,
+        href: getPaths(baseUri).aboutInformationModelCatalog,
       },
       {
         text: dictionary.guidance,
-        href: getPaths(basePath).guidance,
+        href: getPaths(baseUri).guidance,
       },
     ],
   },
   {
     text: dictionary.organizations,
-    href: getPaths(basePath).organizations,
+    href: getPaths(baseUri).organizations,
   },
   {
     name: dictionary.tools,
     items: [
       {
         text: dictionary.artificialIntelligence,
-        href: getPaths(basePath).artificialIntelligence,
+        href: getPaths(baseUri).artificialIntelligence,
       },
       {
         text: dictionary.reports,
-        href: getPaths(basePath).reports,
+        href: getPaths(baseUri).reports,
       },
       {
         text: dictionary.sparqlQuery,
-        href: getPaths(basePath).sparql,
+        href: getPaths(baseUri).sparql,
       },
       {
         text: dictionary.requests,
-        href: getPaths(basePath).requests,
+        href: getPaths(baseUri).requests,
       },
     ],
   },

diff --git a/libs/ui/src/lib/header/index.tsx b/libs/ui/src/lib/header/index.tsx
@@ -7,24 +7,31 @@ import FDKDemoLogo from './images/fdk-logo-demo.svg';
 import LanguageMenu from './components/menu-language';
 import { getHeaderData } from './data';
 import styles from './header.module.css';
-import { getPaths } from '@fdk-frontend/utils';
 import { Link, ListItem, ListUnordered } from '@digdir/designsystemet-react';
 import NavigationMenu from './components/menu-navigation';
+import { unstable_noStore as noStore } from 'next/cache';
 
 type HeaderProps = {
   dictionary: Dictionary;
 };
 
 const Header = async ({ dictionary }: HeaderProps) => {
-  const homeUrl = process.env.FDK_BASE_URI ?? getPaths().root;
-  const { FDK_COMMUNITY_BASE_URI, FDK_REGISTRATION_BASE_URI } = process.env;
-  const useDemoLogo = process.env.REACT_APP_USE_DEMO_LOGO === 'true';
-  const headerData = getHeaderData(dictionary, homeUrl, FDK_COMMUNITY_BASE_URI ?? '', FDK_REGISTRATION_BASE_URI ?? '');
+  // Opt-in dynamic rendering
+  noStore();
+
+  const { FDK_BASE_URI, FDK_COMMUNITY_BASE_URI, FDK_REGISTRATION_BASE_URI, FDK_USE_DEMO_LOGO } = process.env;
+  const useDemoLogo = FDK_USE_DEMO_LOGO === 'true';
+  const headerData = getHeaderData(
+    dictionary,
+    FDK_BASE_URI ?? '/',
+    FDK_COMMUNITY_BASE_URI ?? '#',
+    FDK_REGISTRATION_BASE_URI ?? '#',
+  );
 
   return (
     <header className={styles.header}>
       <Link
-        href={homeUrl ?? getPaths().root}
+        href={FDK_BASE_URI}
         aria-label={dictionary.goToMainPageAriaLabel}
         className={styles.logo}
       >