refactor, lint

components/shared/ui/appPage.tsx

@@ -4,13 +4,13 @@ import { FC, ReactNode } from "react";
 import { perCollectionSEOTitle } from "../../../lib/constants/labels";
 import { ValidCollectionCodename } from "../../../lib/types/perCollection";
 import { useSmartLink } from "../../../lib/useSmartLink";
+import { CircularReferenceInfo } from "../../../lib/utils/circularityUtils";
 import { siteCodename } from "../../../lib/utils/env";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { Article, contentTypes, Metadata, Nav_NavigationItem, Product, Solution, WSL_Page, WSL_WebSpotlightRoot } from "../../../models";
+import { CircularReferenceWarnings } from "./circularReferenceWarnings";
 import { Footer } from "./footer";
 import { Menu } from "./menu";
-import { CircularReferenceWarnings } from "./circularReferenceWarnings";
-import { CircularReferenceInfo } from "../../../lib/utils/circularityUtils";
 
 type AcceptedItem = WSL_WebSpotlightRoot | Article | Product | WSL_Page | Solution;
 
@@ -33,7 +33,7 @@ export const AppPage: FC<Props> = props => {
         pageType={props.pageType}
         defaultMetadata={props.defaultMetadata}
       />
-      <CircularReferenceWarnings circularReferences={props.circularReferences}/>
+      <CircularReferenceWarnings circularReferences={props.circularReferences} />
       <div className="min-h-full grow flex flex-col items-center overflow-hidden">
         {props.siteMenu ? <Menu item={props.siteMenu} /> : <span>Missing top navigation. Please provide a valid navigation item in the web spotlight root.</span>}
         {/* https://tailwindcss.com/docs/typography-plugin */}

components/shared/ui/circularReferenceWarnings.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState } from "react";
+
 import { CircularReferenceInfo } from "../../../lib/utils/circularityUtils";
 
 type Props = Readonly<{

lib/utils/circularityUtils.ts

@@ -38,28 +38,36 @@ export const sanitizeCircularData = <T extends IContentItem>(
 
   seenCodenames.add(data.system.codename);
 
-  const sanitizedElements: Record<
-    string,
-    ContentItemElementsIndexer | LinkableElement
-  > = {};
-  // call recursively for RTE/linked items, otherwise return element as is
-  for (const [elementCodename, element] of Object.entries(data.elements)) {
-    sanitizedElements[elementCodename] = isLinkableElement(element)
-      ? {
-          ...element,
-          linkedItems: element.linkedItems.map((item) => {
-            const [sanitizedItem, newItemCycles] = sanitizeCircularData(
-              item,
-              seenCodenames,
-              foundItemCycles,
-              element.name
-            );
-            foundItemCycles = { ...foundItemCycles, ...newItemCycles };
-            return sanitizedItem;
-          }),
-        }
-      : element;
-  }
+  const sanitizedElements = Object.entries(data.elements).reduce<
+    Record<string, ContentItemElementsIndexer | LinkableElement>
+  >((acc, [elementCodename, element]) => {
+    if (isLinkableElement(element)) {
+      const [linkedItems, newItemCycles] = element.linkedItems.reduce(
+        ([items, cycles], item) => {
+          const [sanitizedItem, newCycles] = sanitizeCircularData(
+            item,
+            seenCodenames,
+            cycles,
+            element.name
+          );
+          return [items.concat(sanitizedItem), { ...cycles, ...newCycles }];
+        },
+        [[] as IContentItem[], foundItemCycles]
+      );
+
+      acc[elementCodename] = {
+        ...element,
+        linkedItems,
+      };
+
+      foundItemCycles = newItemCycles;
+    } else {
+      acc[elementCodename] = element;
+    }
+
+    return acc;
+  }, {});
+
   // remove visited node codename when backtracking
   seenCodenames.delete(data.system.codename);
 

pages/[envId]/articles/[slug].tsx

@@ -7,11 +7,11 @@ import { RichTextElement } from "../../../components/shared/richText/RichTextEle
 import { AppPage } from "../../../components/shared/ui/appPage";
 import { mainColorBgClass } from "../../../lib/constants/colors";
 import { getAllArticles, getArticleBySlug, getDefaultMetadata, getSiteMenu } from "../../../lib/kontentClient";
+import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 import { formatDate } from "../../../lib/utils/dateTime";
 import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
 import { getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { Article, Metadata, Nav_NavigationItem } from "../../../models";
-import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 
 
 type Props = Readonly<{

pages/[envId]/articles/category/[category]/page/[page].tsx

@@ -12,10 +12,10 @@ import { ArticlePageSize } from "../../../../../../lib/constants/paging";
 import { getArticlesCountByCategory, getArticlesForListing, getDefaultMetadata, getItemBySlug, getItemsTotalCount, getSiteMenu } from "../../../../../../lib/kontentClient";
 import { ResolutionContext, resolveUrlPath } from "../../../../../../lib/routing";
 import { ArticleListingUrlQuery, ArticleTypeWithAll, categoryFilterSource, isArticleType } from "../../../../../../lib/utils/articlesListing";
+import { CircularReferenceInfo, sanitizeCircularData } from "../../../../../../lib/utils/circularityUtils";
 import { defaultEnvId, siteCodename } from "../../../../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../../../../lib/utils/pageUtils";
 import { Article, contentTypes, Metadata, Nav_NavigationItem, taxonomies, WSL_Page } from "../../../../../../models";
-import { CircularReferenceInfo, sanitizeCircularData } from "../../../../../../lib/utils/circularityUtils";
 
 type Props = Readonly<{
   articles: ReadonlyArray<Article>;

pages/[envId]/products/[slug].tsx

@@ -6,11 +6,11 @@ import { FC } from "react";
 import { AppPage } from "../../../components/shared/ui/appPage";
 import { mainColorButtonClass, mainColorHoverClass, mainColorTextClass } from "../../../lib/constants/colors";
 import { getDefaultMetadata, getProductDetail, getProductItemsWithSlugs, getSiteMenu } from "../../../lib/kontentClient";
+import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Product } from "../../../models";
-import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 
 
 

pages/[envId]/products/index.tsx

@@ -11,10 +11,10 @@ import { ProductsPageSize } from "../../../lib/constants/paging";
 import { getDefaultMetadata, getItemBySlug, getProductsForListing, getSiteMenu } from "../../../lib/kontentClient";
 import { createQueryString, reservedListingSlugs, resolveUrlPath } from "../../../lib/routing";
 import { changeUrlQueryString } from "../../../lib/utils/changeUrlQueryString";
+import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Product, WSL_Page } from "../../../models";
-import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 
 
 type Props = Readonly<{

pages/[envId]/solutions/[slug].tsx

@@ -7,11 +7,11 @@ import { RichTextElement } from "../../../components/shared/richText/RichTextEle
 import { AppPage } from "../../../components/shared/ui/appPage";
 import { mainColorBgClass } from "../../../lib/constants/colors";
 import { getDefaultMetadata, getSiteMenu, getSolutionDetail, getSolutionsWithSlugs } from "../../../lib/kontentClient";
+import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";
 import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Solution } from "../../../models";
-import { CircularReferenceInfo, sanitizeCircularData } from "../../../lib/utils/circularityUtils";