reusable modules rendered on the page

jetskis · Sep 24, 2023 · e09c58b · e09c58b
1 parent 6c55fa3
commit e09c58b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/app/components/PageComponentList.jsx b/app/components/PageComponentList.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import reduce from 'lodash/reduce'
 
 import { Hero } from '~/components/sharable/hero'
 import { ValueProps } from '~/components/sharable/valueProps'
@@ -12,8 +13,24 @@ const COMPONENTS = {
 	'module.productGrid': ProductGrid
 };
 
+const unfurlGlobalComponents = (components = []) => {
+	return reduce(
+		components,
+		(componentsWithGlobalsUnfurled, component) => {
+			if (component._type === 'module.reusableModule') {
+				const globalComponents = component.module.modules || []
+				return [...componentsWithGlobalsUnfurled, ...globalComponents]
+			} else {
+				return [...componentsWithGlobalsUnfurled, component]
+			}
+		},
+		[],
+	)
+}
+
 const PageComponentList = ({components = [], componentProps = {}}) => {
-	const componentRows = components?.map((component, index) => {
+	const allComponents = unfurlGlobalComponents(components)
+	const componentRows = allComponents?.map((component, index) => {
 		const Component = COMPONENTS[component._type];
 
 		if (!Component)

diff --git a/app/queries/sanity.js b/app/queries/sanity.js
@@ -229,6 +229,23 @@ const MODULE_FAQS = groq`
   }
 `
 
+const MODULE_REUSABLE = groq`
+  (_type == 'module.reusableModule') => {
+    'module': module-> {
+      'modules': reusableComponentList[] {
+        _type,
+        _key,
+        ${MODULE_STANDARD_TEXT},
+        ${MODULE_VALUE_PROPS},
+        ${MODULE_FAQS},
+        ${MODULE_HERO},
+        ${MODULE_IMAGE},
+        ${MODULE_BIG_BENEFITS}
+      }
+    }
+  }
+`
+
 const MODULES = groq`
   _type,
   _key,
@@ -250,6 +267,7 @@ const PAGE_MODULES = groq`
   _key,
   ${MODULE_STANDARD_TEXT},
   ${MODULE_HERO},
+  ${MODULE_REUSABLE},
   ${MODULE_PRODUCT_GRID},
   ${MODULE_VALUE_PROPS},
   ${MODULE_FAQS}

diff --git a/app/root.jsx b/app/root.jsx
@@ -103,8 +103,6 @@ export default function App() {
 
   const {promo} = data.layout;
 
-  console.log('layout', data.layout)
-
   return (
     <ShopifyProvider {...shopifyConfig}>
       <html lang="en">

diff --git a/app/routes/($locale)._index.jsx b/app/routes/($locale)._index.jsx
@@ -29,6 +29,10 @@ export async function loader({context}) {
     }
   })
 
+  sanityData.homepage.modules.forEach(module => {
+    console.log('module', module)
+  })
+
   const shopifyProducts = await context.storefront.query(SHOPIFY_PRODUCTS_QUERY, {
     variables: {
       ids: [...new Set(productIds)],

diff --git a/cms/schemas/modules/reusableModule.js b/cms/schemas/modules/reusableModule.js
@@ -26,7 +26,7 @@ export default {
 	],
 	preview: {
 		select: {
-			title: 'title',
+			title: 'title'
 		},
 		prepare: selection => ({
 			...selection,