From 9af29f6bb958da8d9c1e35b45846ee17db6d677b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Chrastina?= <ondrejch@kontent.ai>
Date: Wed, 19 Jul 2023 18:17:05 +0200
Subject: [PATCH 1/5] implement handling webpostlight root in navigation

---
 .env.local.template           |  5 ++++-
 components/shared/ui/menu.tsx | 25 +++++++++++++++++++++----
 lib/constants/menu.ts         |  7 +++++++
 lib/utils/env.ts              |  8 ++++----
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/.env.local.template b/.env.local.template
index 9e6a7d39..f189a412 100644
--- a/.env.local.template
+++ b/.env.local.template
@@ -1,6 +1,9 @@
 APP_VERSION=$npm_package_version
 APP_NAME=$npm_package_name
 NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID=2cedc519-a547-01ba-dde7-b01e00b909a1
-KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
+NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
+# Collection in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech:ficto-healthtech.vercel.app,ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
+NEXT_PUBLIC_COLLECTION_DOMAINS=
 KONTENT_PREVIEW_API_KEY=
 KONTENT_MANAGEMENT_API_KEY=
+
diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
index 5083cf03..0915d07e 100644
--- a/components/shared/ui/menu.tsx
+++ b/components/shared/ui/menu.tsx
@@ -5,8 +5,9 @@ import { FC, useState } from "react";
 
 import { mainColorBgClass } from "../../../lib/constants/colors";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
-import { Block_Navigation } from "../../../models";
+import { Block_Navigation, contentTypes } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
+import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";
 
 type Link = Readonly<Block_Navigation>;
 
@@ -29,9 +30,24 @@ const isCurrentNavigationItemActive = (navigation: Block_Navigation, router: Nex
   const pathWithoutQuerystring = router.asPath.replace(/\?.*/, '');
   const pathSegments = pathWithoutQuerystring.split("/");
   const topLevelSegment = pathSegments[1];
-  return (navigation.elements.pageLink.linkedItems[0]?.elements.url.value === topLevelSegment);
+  const pageLink = navigation.elements.pageLink.linkedItems[0];
+  return (pageLink?.system.codename === contentTypes.page.codename && pageLink?.elements.url.value === topLevelSegment);
 };
 
+const resolveLink = (link: Readonly<Block_Navigation>) => {
+  if (link.elements.externalLink.value) {
+    return link.elements.externalLink.value;
+  }
+
+  const pageLink = link.elements.pageLink.linkedItems[0];
+  const collectionDomain = externalPreviewUrlsMapping[pageLink?.system.collection ?? ""] || "";
+
+  if (pageLink?.system.type === contentTypes.web_spotlight_root.codename) {
+    return collectionDomain;
+  }
+
+  return collectionDomain + "/" + pageLink?.elements.url.value;
+}
 
 const MenuList: FC<MenuListProps> = props => {
   const router = useRouter();
@@ -59,7 +75,7 @@ const MenuList: FC<MenuListProps> = props => {
             <Link
               {...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
               className="h-full flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-900 border-b border-gray-100 md:w-auto md:bg-transparent md:border-0 md:hover:bg-white"
-              href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
+              href={resolveLink(link)}
             >
               {link.elements.label.value}
             </Link>
@@ -70,6 +86,7 @@ const MenuList: FC<MenuListProps> = props => {
   );
 }
 
+
 const DropdownButton: FC<Props> = props => {
   return (
     <button
@@ -90,7 +107,7 @@ const DropdownMenuItems: FC<DropdownMenuProps> = props => {
         <li key={link.system.codename}>
           <Link
             {...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
-            href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
+            href={resolveLink(link)}
             className={`${isCurrentNavigationItemActive(link, router) ? "border-l-gray-500 cursor-default " : "border-l-transparent hover:border-l-gray-500"}
           block p-3 bg-gray-200 border-l-8 h-full`}
           >
diff --git a/lib/constants/menu.ts b/lib/constants/menu.ts
index 607c98d3..15bd43b4 100644
--- a/lib/constants/menu.ts
+++ b/lib/constants/menu.ts
@@ -6,5 +6,12 @@ export const perCollectionRootItems = {
   ficto_healthtech_surgical: "ficto_healthtech_surgical"
 } as const satisfies PerCollection<string>;
 
+export const externalPreviewUrlsMapping = Object.fromEntries(
+  process.env.NEXT_PUBLIC_COLLECTION_DOMAINS?.split(",")
+    .map(collectionPair => collectionPair.split(":"))
+    .map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain])
+    .filter(([collectionCodename]) => collectionCodename !== process.env.NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME) ?? []
+);
+
 export const getRootCodename = (siteCodename: ValidCollectionCodename) => perCollectionRootItems[siteCodename];
 
diff --git a/lib/utils/env.ts b/lib/utils/env.ts
index 2a439ad7..8daf13ea 100644
--- a/lib/utils/env.ts
+++ b/lib/utils/env.ts
@@ -1,10 +1,10 @@
 import { isValidCollectionCodename } from "../types/perCollection";
 
-const { KONTENT_COLLECTION_CODENAME } = process.env;
+const { NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME } = process.env;
 
-if (!isValidCollectionCodename(KONTENT_COLLECTION_CODENAME)) {
-  throw new Error(`Invalid collection codename "${KONTENT_COLLECTION_CODENAME}".`);
+if (!isValidCollectionCodename(NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME)) {
+  throw new Error(`Invalid collection codename "${NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME}".`);
 }
 
 /** Use only on server - for client use `useSiteCodename` hook */
-export const siteCodename = KONTENT_COLLECTION_CODENAME;
+export const siteCodename = NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME;

From ca9550f1fa3f99bbb11a0c65372590494b6ee381 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Chrastina?= <ondrejch@kontent.ai>
Date: Thu, 20 Jul 2023 12:10:00 +0200
Subject: [PATCH 2/5] lint

---
 components/shared/ui/menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
index 0915d07e..213e6688 100644
--- a/components/shared/ui/menu.tsx
+++ b/components/shared/ui/menu.tsx
@@ -4,10 +4,10 @@ import { NextRouter, useRouter } from "next/router";
 import { FC, useState } from "react";
 
 import { mainColorBgClass } from "../../../lib/constants/colors";
+import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { Block_Navigation, contentTypes } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
-import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";
 
 type Link = Readonly<Block_Navigation>;
 
@@ -31,7 +31,7 @@ const isCurrentNavigationItemActive = (navigation: Block_Navigation, router: Nex
   const pathSegments = pathWithoutQuerystring.split("/");
   const topLevelSegment = pathSegments[1];
   const pageLink = navigation.elements.pageLink.linkedItems[0];
-  return (pageLink?.system.codename === contentTypes.page.codename && pageLink?.elements.url.value === topLevelSegment);
+  return (pageLink?.system.codename === contentTypes.page.codename && pageLink.elements.url.value === topLevelSegment);
 };
 
 const resolveLink = (link: Readonly<Block_Navigation>) => {

From eb7d4471f99de671aa98d15d4de65020f43222ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Chrastina?= <ondrejch@kontent.ai>
Date: Fri, 21 Jul 2023 12:07:11 +0200
Subject: [PATCH 3/5] fix condition for page type check

---
 components/shared/ui/menu.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
index 213e6688..44987fba 100644
--- a/components/shared/ui/menu.tsx
+++ b/components/shared/ui/menu.tsx
@@ -31,7 +31,7 @@ const isCurrentNavigationItemActive = (navigation: Block_Navigation, router: Nex
   const pathSegments = pathWithoutQuerystring.split("/");
   const topLevelSegment = pathSegments[1];
   const pageLink = navigation.elements.pageLink.linkedItems[0];
-  return (pageLink?.system.codename === contentTypes.page.codename && pageLink.elements.url.value === topLevelSegment);
+  return pageLink?.system.type === contentTypes.page.codename && pageLink.elements.url.value === topLevelSegment;
 };
 
 const resolveLink = (link: Readonly<Block_Navigation>) => {
@@ -86,7 +86,6 @@ const MenuList: FC<MenuListProps> = props => {
   );
 }
 
-
 const DropdownButton: FC<Props> = props => {
   return (
     <button

From cbdf0a21e6b8332386067de9ae1bbbd8ec065d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Chrastina?= <ondrejch@kontent.ai>
Date: Fri, 21 Jul 2023 12:09:13 +0200
Subject: [PATCH 4/5] rename method for more accurate name

---
 components/shared/ui/menu.tsx | 4 ++--
 lib/constants/menu.ts         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
index 44987fba..edef371c 100644
--- a/components/shared/ui/menu.tsx
+++ b/components/shared/ui/menu.tsx
@@ -4,7 +4,7 @@ import { NextRouter, useRouter } from "next/router";
 import { FC, useState } from "react";
 
 import { mainColorBgClass } from "../../../lib/constants/colors";
-import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";
+import { externalUrlsMapping } from "../../../lib/constants/menu";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { Block_Navigation, contentTypes } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
@@ -40,7 +40,7 @@ const resolveLink = (link: Readonly<Block_Navigation>) => {
   }
 
   const pageLink = link.elements.pageLink.linkedItems[0];
-  const collectionDomain = externalPreviewUrlsMapping[pageLink?.system.collection ?? ""] || "";
+  const collectionDomain = externalUrlsMapping[pageLink?.system.collection ?? ""] || "";
 
   if (pageLink?.system.type === contentTypes.web_spotlight_root.codename) {
     return collectionDomain;
diff --git a/lib/constants/menu.ts b/lib/constants/menu.ts
index 15bd43b4..0c4435f9 100644
--- a/lib/constants/menu.ts
+++ b/lib/constants/menu.ts
@@ -6,7 +6,7 @@ export const perCollectionRootItems = {
   ficto_healthtech_surgical: "ficto_healthtech_surgical"
 } as const satisfies PerCollection<string>;
 
-export const externalPreviewUrlsMapping = Object.fromEntries(
+export const externalUrlsMapping = Object.fromEntries(
   process.env.NEXT_PUBLIC_COLLECTION_DOMAINS?.split(",")
     .map(collectionPair => collectionPair.split(":"))
     .map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain])

From 1fd8721538cac7964e99142006ead2079a9974d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Chrastina?= <ondrejch@kontent.ai>
Date: Fri, 21 Jul 2023 12:29:45 +0200
Subject: [PATCH 5/5] rewrite filtering for current domain

---
 .env.local.template   | 6 +++---
 lib/constants/menu.ts | 5 ++---
 lib/utils/env.ts      | 8 ++++----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/.env.local.template b/.env.local.template
index f189a412..ad822f70 100644
--- a/.env.local.template
+++ b/.env.local.template
@@ -1,9 +1,9 @@
 APP_VERSION=$npm_package_version
 APP_NAME=$npm_package_name
 NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID=2cedc519-a547-01ba-dde7-b01e00b909a1
-NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
-# Collection in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech:ficto-healthtech.vercel.app,ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
-NEXT_PUBLIC_COLLECTION_DOMAINS=
+KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
+# Domain for toher collection links in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
+OTHER_COLLECTIONS_DOMAINS=
 KONTENT_PREVIEW_API_KEY=
 KONTENT_MANAGEMENT_API_KEY=
 
diff --git a/lib/constants/menu.ts b/lib/constants/menu.ts
index 0c4435f9..4af5ae3e 100644
--- a/lib/constants/menu.ts
+++ b/lib/constants/menu.ts
@@ -7,10 +7,9 @@ export const perCollectionRootItems = {
 } as const satisfies PerCollection<string>;
 
 export const externalUrlsMapping = Object.fromEntries(
-  process.env.NEXT_PUBLIC_COLLECTION_DOMAINS?.split(",")
+  process.env.OTHER_COLLECTIONS_DOMAINS?.split(",")
     .map(collectionPair => collectionPair.split(":"))
-    .map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain])
-    .filter(([collectionCodename]) => collectionCodename !== process.env.NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME) ?? []
+    .map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain]) ?? []
 );
 
 export const getRootCodename = (siteCodename: ValidCollectionCodename) => perCollectionRootItems[siteCodename];
diff --git a/lib/utils/env.ts b/lib/utils/env.ts
index 8daf13ea..2a439ad7 100644
--- a/lib/utils/env.ts
+++ b/lib/utils/env.ts
@@ -1,10 +1,10 @@
 import { isValidCollectionCodename } from "../types/perCollection";
 
-const { NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME } = process.env;
+const { KONTENT_COLLECTION_CODENAME } = process.env;
 
-if (!isValidCollectionCodename(NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME)) {
-  throw new Error(`Invalid collection codename "${NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME}".`);
+if (!isValidCollectionCodename(KONTENT_COLLECTION_CODENAME)) {
+  throw new Error(`Invalid collection codename "${KONTENT_COLLECTION_CODENAME}".`);
 }
 
 /** Use only on server - for client use `useSiteCodename` hook */
-export const siteCodename = NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME;
+export const siteCodename = KONTENT_COLLECTION_CODENAME;