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,