fix(example): Calendar Event was not handling relationships correctly (…

…#29868) ## Proposed Changes * Add extra logic to avoid access to `undefined` on NextJS and [Astro Example](#29665) ### Note Angular does not have this problem, because Calendar Event is not implemented in the Angular Example ## Screenshots ### NextJS https://github.com/user-attachments/assets/73999bf0-a4a3-4f4a-98e3-272b94552797 ### Astro https://github.com/user-attachments/assets/09881f0b-e322-41bf-8bf2-f0c49aac9a51 ### Angular (No changes) https://github.com/user-attachments/assets/2166c975-68a5-43ca-b701-28b7157f842e
dotCMS · Sep 18, 2024 · 2e4c4e0 · 2e4c4e0
1 parent 44025b9
commit 2e4c4e0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 55 deletions.
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
diff --git a/examples/nextjs/src/app/[[...slug]]/page.js b/examples/nextjs/src/app/[[...slug]]/page.js
@@ -42,7 +42,10 @@ export default async function Home({ searchParams, params }) {
                 path,
                 params: searchParams,
             });
-            const pageAsset = await client.page.get(pageRequestParams);
+            const pageAsset = await client.page.get({
+                ...pageRequestParams,
+                depth: 3,
+            });
             const nav = await client.nav.get({
                 path: "/",
                 depth: 2,

diff --git a/examples/nextjs/src/components/content-types/calendarEvent.js b/examples/nextjs/src/components/content-types/calendarEvent.js
@@ -2,14 +2,21 @@ import Image from "next/image";
 import Link from "next/link";
 
 function extractLocationsAndActivities(contentlet) {
-    return contentlet.reduce(
-        (acc, { activities, ...location }) => {
+    const initialValue = {
+        locations: [],
+        activities: [],
+    };
+
+    return (
+        contentlet?.reduce((acc, { activities, ...location }) => {
+            // This is a relationship between Contentlets
+            // Event -> Location -> Activities
+            // Depth 3
             acc.activities = acc.activities.concat(activities);
             acc.locations.push(location);
 
             return acc;
-        },
-        { locations: [], activities: [] }
+        }, initialValue) ?? initialValue
     );
 }
 
@@ -31,36 +38,42 @@ function CalendarEvent({ image, title, urlMap, description, location }) {
                 <h4 className="block mb-2 text-2xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
                     {title}
                 </h4>
-                <div className="block mb-2 text-base antialiased leading-snug tracking-normal text-blue-gray-900 break-all">
-                    <span className="cursor-auto select-none font-semibold underline">
-                        Locations:
-                    </span>
-                    &nbsp;
-                    {locations.map(({ title, url }, index) => {
-                        return (
-                            <Link key={index} href={url}>
-                                <span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
-                                    {title}
-                                </span>
-                            </Link>
-                        );
-                    })}
-                </div>
-                <div className="block mb-2 text-base antialiased leading-snug tracking-normal text-blue-gray-900 break-all">
-                    <span className="cursor-auto select-none font-semibold underline">
-                        Activities:
-                    </span>
-                    &nbsp;
-                    {activities.slice(0, 3).map(({ title, urlMap }, index) => {
-                        return (
-                            <Link key={index} href={urlMap}>
-                                <span className="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">
-                                    {title}
-                                </span>
-                            </Link>
-                        );
-                    })}
-                </div>
+                {!!locations.length && !!locations[0]?.title && (
+                    <div className="block mb-2 text-base antialiased leading-snug tracking-normal text-blue-gray-900 break-all">
+                        <span className="cursor-auto select-none font-semibold underline">
+                            Locations:
+                        </span>
+                        &nbsp;
+                        {locations.map(({ title, url }, index) => {
+                            return (
+                                <Link key={index} href={url ?? ""}>
+                                    <span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
+                                        {title}
+                                    </span>
+                                </Link>
+                            );
+                        })}
+                    </div>
+                )}
+                {!!activities.length && !!activities[0]?.title && (
+                    <div className="block mb-2 text-base antialiased leading-snug tracking-normal text-blue-gray-900 break-all">
+                        <span className="cursor-auto select-none font-semibold underline">
+                            Activities:
+                        </span>
+                        &nbsp;
+                        {activities
+                            .slice(0, 3)
+                            .map(({ title, urlMap }, index) => {
+                                return (
+                                    <Link key={index} href={urlMap ?? ""}>
+                                        <span className="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">
+                                            {title}
+                                        </span>
+                                    </Link>
+                                );
+                            })}
+                    </div>
+                )}
                 <div
                     className="block mb-8 text-base antialiased font-normal leading-relaxed line-clamp-3"
                     dangerouslySetInnerHTML={{ __html: description }}

diff --git a/examples/nextjs/src/components/my-page.js b/examples/nextjs/src/components/my-page.js
@@ -40,7 +40,7 @@ const componentsMap = {
     calendarEvent: CalendarEvent,
     CallToAction: CallToAction,
     CustomNoComponent: CustomNoComponent,
-    BlockEditorItem: BlogWithBlockEditor
+    BlockEditorItem: BlogWithBlockEditor,
 };
 
 export function MyPage({ pageAsset, nav }) {
@@ -77,7 +77,12 @@ export function MyPage({ pageAsset, nav }) {
                         pageAsset: pageAsset,
                     }}
                     config={{
-                        pathname
+                        pathname,
+                        editor: {
+                            params: {
+                                depth: 3,
+                            },
+                        },
                     }}
                 />
             </main>