Merge pull request #547 from lowdefy/fix-header

fix(renderer): Remove extra root context and pass page properties to Helmet.

packages/renderer/src/page/Helmet.js

@@ -17,11 +17,10 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-const BindHelmet = ({ pageProperties }) => {
+const BindHelmet = ({ properties }) => {
   return (
     <Helmet>
-      <meta charSet="utf-8" />
-      <title>{pageProperties.title}</title>
+      <title>{properties.title}</title>
     </Helmet>
   );
 };

packages/renderer/src/page/Page.js

@@ -22,6 +22,7 @@ import { useQuery, gql } from '@apollo/client';
 
 import { Loading } from '@lowdefy/block-tools';
 import { get, urlQuery } from '@lowdefy/helpers';
+import { makeContextId } from '@lowdefy/engine';
 
 import Helmet from './Helmet';
 import Block from './block/Block';
@@ -66,28 +67,26 @@ const PageContext = ({ lowdefy }) => {
 
   return (
     <>
-      <Helmet pageProperties={get(data.page, 'properties', { default: {} })} />
       <div id={pageId}>
         <Context
-          block={{
-            id: `root:${pageId}`,
-            blockId: `root:${pageId}`,
-            type: 'Context',
-            meta: {
-              category: 'context',
-            },
-            areas: { root: { blocks: [data.page] } },
-          }}
-          context={null}
-          contextId={`root:${pageId}`}
+          block={data.page}
+          contextId={makeContextId({
+            blockId: pageId,
+            pageId,
+            urlQuery: lowdefy.urlQuery,
+          })}
           lowdefy={lowdefy}
           render={(context) => (
-            <Block
-              block={context.RootBlocks.map[data.page.blockId]}
-              Blocks={context.RootBlocks}
-              context={context}
-              lowdefy={lowdefy}
-            />
+            <>
+              <Helmet properties={context.RootBlocks.map[pageId].eval.properties} />
+              <Block
+                block={context.RootBlocks.map[pageId]}
+                Blocks={context.RootBlocks}
+                context={context}
+                isRoot={true}
+                lowdefy={lowdefy}
+              />
+            </>
           )}
         />
       </div>

packages/renderer/src/page/block/Block.js

@@ -22,7 +22,7 @@ import LoadBlock from './LoadBlock';
 import LoadingBlock from './LoadingBlock';
 import CategorySwitch from './CategorySwitch';
 
-const Block = ({ block, Blocks, context, lowdefy }) => {
+const Block = ({ block, Blocks, context, isRoot, lowdefy }) => {
   const [updates, setUpdate] = useState(0);
   lowdefy.updaters[block.id] = () => setUpdate(updates + 1);
   const Loading = (
@@ -40,6 +40,7 @@ const Block = ({ block, Blocks, context, lowdefy }) => {
               Blocks={Blocks}
               Component={Comp}
               context={context}
+              isRoot={isRoot}
               lowdefy={lowdefy}
               updates={updates}
             />

packages/renderer/src/page/block/CategorySwitch.js

@@ -23,17 +23,26 @@ import Container from './Container';
 import Context from './Context';
 import List from './List';
 
-const CategorySwitch = ({ block, Blocks, Component, context, lowdefy }) => {
+const CategorySwitch = ({ block, Blocks, Component, context, isRoot, lowdefy }) => {
+  if (isRoot) {
+    return (
+      <Container
+        block={context.RootBlocks.areas.root.blocks[0]}
+        Blocks={context.RootBlocks}
+        Component={Component}
+        context={context}
+        lowdefy={lowdefy}
+      />
+    );
+  }
   if (!block.eval) return null; // Renderer updates before eval is executed for the first time on lists. See #520
   if (block.eval.visible === false)
     return <div id={`vs-${block.blockId}`} style={{ display: 'none' }} />;
-
   switch (block.meta.category) {
     case 'context':
       return (
         <Context
           block={block}
-          context={context}
           contextId={makeContextId({
             urlQuery: lowdefy.urlQuery,
             pageId: lowdefy.pageId,