fix: review follow up

contentful · Apr 11, 2024 · 97a6a78 · 97a6a78
1 parent 6f418e1
commit 97a6a78
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/packages/core/src/utils/pathSchema.ts b/packages/core/src/utils/pathSchema.ts
@@ -142,3 +142,18 @@ const chunkSegments = (
 
   return chunks.filter(excludeEmptyChunks);
 };
+
+export const lastPathNamedSegmentEq = (path: string, expectedName: string) => {
+  // `/key123/fields/featureImage/~locale/fields/file/~locale`
+  // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
+  const segments = path.split('/');
+
+  if (segments.length < 2) {
+    console.warn(
+      `[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`,
+    );
+    return false;
+  }
+  const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
+  return secondLast === expectedName;
+};
diff --git a/packages/core/src/utils/transformers/media/transformMedia.ts b/packages/core/src/utils/transformers/media/transformMedia.ts
@@ -10,7 +10,7 @@ import { Asset, AssetFile } from 'contentful';
 import { getOptimizedBackgroundImageAsset } from './getOptimizedBackgroundImageAsset';
 import { getOptimizedImageAsset } from './getOptimizedImageAsset';
 import { getBoundValue } from '@/utils/transformers/getBoundValue';
-import { isDeepPath } from '@/utils';
+import { isDeepPath, lastPathNamedSegmentEq } from '@/utils';
 
 export const transformMedia = (
   asset: Asset,
@@ -23,8 +23,7 @@ export const transformMedia = (
 
   // If it is not a deep path and not pointing to the file of the asset,
   // it is just pointing to a normal field and therefore we just resolve the value as normal field
-  const splitPath = path.split('/');
-  if (!isDeepPath(path) && splitPath[splitPath.length - 2] !== 'file') {
+  if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
     return getBoundValue(asset, path);
   }
 

diff --git a/packages/test-app/src/components/CustomImageComponent.tsx b/packages/test-app/src/components/CustomImageComponent.tsx
@@ -0,0 +1,8 @@
+export function CustomImageComponent(props: any) {
+  return (
+    <>
+      <img src={props.src} style={{ height: '100px', width: '100px' }} />
+      <span>{props.src}</span>
+    </>
+  );
+}
diff --git a/packages/test-app/src/eb-config.ts b/packages/test-app/src/eb-config.ts
@@ -1,5 +1,6 @@
 import { defineComponents } from '@contentful/experiences-sdk-react';
 import ComponentWithChildren from './components/ComponentWithChildren';
+import { CustomImageComponent } from './components/CustomImageComponent';
 
 defineComponents([
   {
@@ -22,4 +23,18 @@ defineComponents([
       wrapComponent: false,
     },
   },
+  {
+    component: CustomImageComponent,
+    definition: {
+      id: 'custom-image',
+      name: 'Custom Image',
+      category: 'Custom Components',
+      variables: {
+        src: {
+          displayName: 'SRC',
+          type: 'Media',
+        },
+      },
+    },
+  },
 ]);