fix: constructor items inner data structure (#386)

Author: gorgeousvlad

src/components/BlockBase/BlockBase.tsx

@@ -11,7 +11,7 @@ import './BlockBase.scss';
 const b = block('block-base');
 
 const BlockBase = (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => {
-    const {anchor, visible, children, className, resetPaddings, qa} = props;
+    const {anchor, visible, children, className, resetPaddings, qa, index = 0} = props;
 
     return (
         <Col
@@ -20,7 +20,7 @@ const BlockBase = (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) =>
             reset={true}
             dataQa={qa}
         >
-            <BlockDecoration>
+            <BlockDecoration id={index}>
                 {anchor && <Anchor id={anchor.url} className={b('anchor')} />}
                 {children}
             </BlockDecoration>

src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 
 import BlockBase from '../../../../components/BlockBase/BlockBase';
-import {Block, WithChildren} from '../../../../models';
+import {Block, BlockBaseProps, WithChildren} from '../../../../models';
 import {block} from '../../../../utils';
 
-const b = block('constructor-block');
-interface ConstructorBlockProps {
+interface ConstructorBlockProps extends Pick<BlockBaseProps, 'index'> {
     data: Block;
 }
 
+const b = block('constructor-block');
+
 export const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>> = ({
+    index = 0,
     data,
     children,
 }) => {
     const {anchor, visible, type} = data;
 
     return (
         <BlockBase
+            index={index}
             className={b({type})}
             anchor={anchor}
             visible={visible}

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

@@ -2,7 +2,6 @@ import React, {Fragment, ReactElement, useContext} from 'react';
 
 import _ from 'lodash';
 
-import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
 import {Block, ConstructorItem as ConstructorItemType} from '../../../../models';
 import {getBlockKey} from '../../../../utils';
@@ -58,20 +57,20 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
             }
 
             itemElement = (
-                <ConstructorItem data={item} blockKey={blockId}>
+                <ConstructorItem data={item} key={blockId} blockKey={blockId}>
                     {children}
                 </ConstructorItem>
             );
         }
 
-        return (
-            <BlockIdContext.Provider value={blockId} key={blockId}>
-                {blockTypes.includes(item.type) ? (
-                    <ConstructorBlock data={item as Block}>{itemElement}</ConstructorBlock>
-                ) : (
-                    itemElement
-                )}
-            </BlockIdContext.Provider>
+        return blockTypes.includes(item.type) ? (
+            //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+            // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+            <ConstructorBlock data={item as Block} key={blockId} index={index}>
+                {itemElement}
+            </ConstructorBlock>
+        ) : (
+            itemElement
         );
     };
 

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

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react';
 
+import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
 import {ConstructorItem as ConstructorItemType, WithChildren} from '../../../../models';
@@ -9,15 +10,19 @@ export interface ConstructorItemProps {
     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 = ({

src/customization/BlockDecoration.tsx

@@ -1,27 +1,24 @@
 import React, {Fragment, PropsWithChildren, useContext} from 'react';
 
-import {BlockIdContext} from '../context/blockIdContext';
 import {InnerContext} from '../context/innerContext';
 import {BlockDecorationProps} from '../models';
-import {getBlockIndexFromId} from '../utils';
 
-export const BlockDecoration = (props: PropsWithChildren<BlockDecorationProps>) => {
-    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
+export const BlockDecoration = ({
+    id,
+    children: blockChildren,
+}: PropsWithChildren<BlockDecorationProps>) => {
     const {headerBlockTypes} = useContext(InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
+    const isHeader = Boolean(typeof id === 'string' && headerBlockTypes.includes(id));
 
-    const block = <Fragment>{props.children}</Fragment>;
+    const block = <Fragment>{blockChildren}</Fragment>;
     const blockDecorators = useContext(InnerContext).customization?.decorators?.block;
 
     if (!blockDecorators) {
         return block;
     }
 
     return blockDecorators.reduce(
-        (children, decorator) => (
-            <Fragment>{decorator({children, id: blockId, isHeader})}</Fragment>
-        ),
+        (children, decorator) => <Fragment>{decorator({children, id, isHeader})}</Fragment>,
         block,
     );
 };

src/models/constructor-items/blocks.ts

@@ -63,6 +63,7 @@ export interface Childable {
 
 //block props
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

src/models/customization.ts

@@ -1,7 +1,7 @@
 import {PropsWithChildren} from 'react';
 
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 
 export interface BlockDecoratorProps extends PropsWithChildren {

src/utils/blocks.ts

@@ -96,6 +96,3 @@ export const getShareLink = (
             return undefined;
     }
 };
-
-export const getBlockIndexFromId = (blockId?: string) =>
-    Number(blockId?.split('-')?.slice(-1).pop());