fix: move BlockIdContext.Provider inside ConstructorItem and ConstructorLoadable (#201)

Author: niktverd

src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx

@@ -3,7 +3,6 @@ import React, {Fragment, ReactElement, useContext} from 'react';
 
 import {getBlockKey} from '../../../../utils';
 import {InnerContext} from '../../../../context/innerContext';
-import {BlockIdContext} from '../../../../context/blockIdContext';
 import {Block, ConstructorItem as ConstructorItemType, ShouldRenderBlock} from '../../../../models';
 import {ConstructorLoadable} from '../ConstructorLoadable';
 import {ConstructorItem} from '../ConstructorItem';
@@ -37,6 +36,7 @@ export const ConstructorBlocks = ({items, shouldRenderBlock}: ConstructorBlocksP
         if ('loadable' in item && item.loadable) {
             const {source, serviceId, params} = item.loadable;
             const config = _.get(loadables, source);
+
             if (!config) {
                 return null;
             }
@@ -57,9 +57,9 @@ export const ConstructorBlocks = ({items, shouldRenderBlock}: ConstructorBlocksP
             }
 
             itemElement = (
-                <BlockIdContext.Provider value={blockId} key={blockId}>
-                    <ConstructorItem data={item}>{children}</ConstructorItem>
-                </BlockIdContext.Provider>
+                <ConstructorItem data={item} key={blockId} blockKey={blockId}>
+                    {children}
+                </ConstructorItem>
             );
         }
 

src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx

@@ -1,22 +1,35 @@
 import React, {useContext} from 'react';
 import {ConstructorItem as ConstructorItemType, WithChildren} from '../../../../models';
 import {InnerContext} from '../../../../context/innerContext';
+import {BlockIdContext} from '../../../../context/blockIdContext';
 
 export interface ConstructorItemProps {
     data: ConstructorItemType;
+    blockKey?: string;
 }
 
-export const ConstructorItem = ({data, children}: WithChildren<ConstructorItemProps>) => {
+export const ConstructorItem = ({
+    data,
+    blockKey = '',
+    children,
+}: WithChildren<ConstructorItemProps>) => {
     const {itemMap} = useContext(InnerContext);
     const {type, ...rest} = data;
 
     const Component = itemMap[type] as React.ComponentType<
         React.ComponentProps<typeof itemMap[typeof type]>
     >;
 
-    return <Component {...rest}>{children}</Component>;
+    return (
+        <BlockIdContext.Provider value={blockKey}>
+            <Component {...rest}>{children}</Component>
+        </BlockIdContext.Provider>
+    );
 };
 
-export const ConstructorHeader = ({data}: Pick<ConstructorItemProps, 'data'>) => (
-    <ConstructorItem data={data} key={data.type} />
+export const ConstructorHeader = ({
+    data,
+    blockKey = '',
+}: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => (
+    <ConstructorItem data={data} key={data.type} blockKey={blockKey} />
 );

src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx

@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import Loadable, {LoadableComponentsProps} from '../../../Loadable/Loadable';
 import {LoadableConfigItem} from '../../../../models';
 import {InnerContext} from '../../../../context/innerContext';
+import {BlockIdContext} from '../../../../context/blockIdContext';
 
 interface ConstructorLoadableProps
     extends Omit<LoadableComponentsProps, 'Component' | 'ChildComponent' | 'fetch'> {
@@ -19,15 +20,17 @@ export const ConstructorLoadable = (props: ConstructorLoadableProps) => {
     >;
 
     return (
-        <Loadable
-            key={blockKey}
-            block={block}
-            blockKey={blockKey}
-            Component={Component}
-            ChildComponent={ChildComponent}
-            fetch={fetch}
-            serviceId={serviceId}
-            params={params}
-        />
+        <BlockIdContext.Provider value={blockKey} key={blockKey}>
+            <Loadable
+                key={blockKey}
+                block={block}
+                blockKey={blockKey}
+                Component={Component}
+                ChildComponent={ChildComponent}
+                fetch={fetch}
+                serviceId={serviceId}
+                params={params}
+            />
+        </BlockIdContext.Provider>
     );
 };