adding wrapper (connect, select) for using mainValue as prop in DynamicZone/Component

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -18,7 +18,7 @@ import { useContentTypeLayout } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import FieldComponent from '../../../FieldComponent';
 import Rectangle from './Rectangle';
-import useMainValue from './hooks/useMainValue';
+import { connect, select } from './utils';
 
 const ActionStack = styled(Stack)`
   svg {
@@ -56,15 +56,11 @@ const Component = ({
   removeComponentFromDynamicZone,
   showDownIcon,
   showUpIcon,
+  // Passed with the select function
+  mainValue,
 }) => {
   const { formatMessage } = useIntl();
   const { getComponentLayout } = useContentTypeLayout();
-  const componentLayoutData = useMemo(() => {
-    const layout = getComponentLayout(componentUid);
-
-    return layout;
-  }, [componentUid, getComponentLayout]);
-  const mainValue = useMainValue(componentLayoutData, [name, index]);
   const { icon, friendlyName } = useMemo(() => {
     const {
       info: { icon, displayName },
@@ -193,6 +189,12 @@ Component.propTypes = {
   removeComponentFromDynamicZone: PropTypes.func.isRequired,
   showDownIcon: PropTypes.bool.isRequired,
   showUpIcon: PropTypes.bool.isRequired,
+  mainValue: PropTypes.string.isRequired,
 };
 
-export default memo(Component, isEqual);
+const Memoized = memo(Component, isEqual);
+
+export default connect(
+  Memoized,
+  select
+);

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/connect.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/index.js

@@ -0,0 +1,2 @@
+export { default as connect } from './connect';
+export { default as select } from './select';

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/select.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import useMainValue from '../hooks/useMainValue';
+import { useContentTypeLayout } from '../../../../../hooks';
+
+function useSelect({ componentUid, name, index }) {
+  const { getComponentLayout } = useContentTypeLayout();
+  const componentLayoutData = useMemo(() => {
+    const layout = getComponentLayout(componentUid);
+
+    return layout;
+  }, [componentUid, getComponentLayout]);
+  const mainValue = useMainValue(componentLayoutData, [name, index]);
+
+  return {
+    mainValue,
+  };
+}
+
+export default useSelect;