From 6f276907162fbb05005ca4e9b45e1221e669b149 Mon Sep 17 00:00:00 2001
From: Michael Donaldson <mike@mike-donaldson.com>
Date: Thu, 24 Dec 2020 14:19:45 +0000
Subject: [PATCH] Implement RenderContent component

---
 src/components/RenderContent.test.ts | 71 ++++++++++++++++++++++++++++
 src/components/RenderContent.ts      | 23 +++++++++
 src/index.ts                         |  2 +
 3 files changed, 96 insertions(+)
 create mode 100644 src/components/RenderContent.test.ts
 create mode 100644 src/components/RenderContent.ts

diff --git a/src/components/RenderContent.test.ts b/src/components/RenderContent.test.ts
new file mode 100644
index 0000000..121007e
--- /dev/null
+++ b/src/components/RenderContent.test.ts
@@ -0,0 +1,71 @@
+import { RenderContent } from '../index';
+import { extractContent } from './RenderContent';
+
+describe('RenderContent', () => {
+
+  test('extractContent should return empty array when content is null', async () => {
+    // Call function
+    const result = extractContent(null);
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  test('extractContent should correctly handle single resources', async () => {
+    // Call function
+    const result = extractContent({
+      id: 'itemId',
+      type: 'itemType',
+      foo: 'bar'
+    });
+    // Assert
+    expect(result).toEqual([{
+      componentName: 'itemType',
+      props: {
+        id: 'itemId',
+        type: 'itemType',
+        foo: 'bar'
+      }
+    }]);
+  });
+
+  test('extractContent should correctly handle resource arrays', async () => {
+    // Call function
+    const result = extractContent([
+      {
+        id: 'itemId',
+        type: 'itemType',
+        foo: 'bar'
+      },
+      {
+        id: 'itemId2',
+        type: 'itemType2',
+        foo2: 'bar2'
+      }
+    ]);
+    // Assert
+    expect(result).toEqual([
+      {
+        componentName: 'itemType',
+        props: {
+          id: 'itemId',
+          type: 'itemType',
+          foo: 'bar'
+        }
+      },
+      {
+        componentName: 'itemType2',
+        props: {
+          id: 'itemId2',
+          type: 'itemType2',
+          foo2: 'bar2'
+        }
+      }
+    ]);
+  });
+
+  test('RenderContent should have been initialised correctly', async () => {
+    expect(RenderContent.render).not.toBeUndefined();
+    expect(RenderContent.props).not.toBeUndefined();
+  });
+
+});
diff --git a/src/components/RenderContent.ts b/src/components/RenderContent.ts
new file mode 100644
index 0000000..bba57dc
--- /dev/null
+++ b/src/components/RenderContent.ts
@@ -0,0 +1,23 @@
+import { renderContentFactory } from '@vue-storefront/core';
+
+import { LexascmsContent } from '../types/lexascms';
+
+export const extractContent = function (content: LexascmsContent | null) {
+  // Ensure content is an array
+  if (content === null) {
+    content = [];
+  } else if (!(content instanceof Array)) {
+    content = [ content ];
+  }
+  // Generate component map
+  const componentMap = content.map(contentItem => ({
+    componentName: contentItem.type,
+    props: contentItem
+  }));
+  // Return
+  return componentMap;
+}
+
+export const RenderContent = renderContentFactory({
+  extractContent
+});
diff --git a/src/index.ts b/src/index.ts
index f010a48..4b0f1d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
+import { RenderContent } from './components/RenderContent';
 import { useContent } from './composables/useContent';
 import { LexascmsSetupConfig } from './types/lexascms';
 
@@ -15,6 +16,7 @@ const setup = (config: LexascmsSetupConfig) => {
 
 export {
   getConfig,
+  RenderContent,
   setup,
   useContent
 };
\ No newline at end of file