From 595183b2958053e398aa872867b718eb1eb9c00e Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 10 Oct 2023 15:48:56 +0200
Subject: [PATCH] fix: Slate in blocks

---
 .../ItaliaTheme/Blocks/Callout/Edit.jsx       |   2 -
 .../Blocks/TextCard/SimpleCard/Block.jsx      | 137 -------------
 .../TextCard/SimpleCard/BodyWrapper.jsx       |   2 +-
 .../Blocks/TextCard/SimpleCard/Edit.jsx       | 187 +++++++++++-------
 .../Blocks/TextCard/SimpleCard/View.jsx       |  26 ++-
 5 files changed, 135 insertions(+), 219 deletions(-)
 delete mode 100644 src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx

diff --git a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
index 221f5d47b..6990e5d1a 100644
--- a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
-import { isEqual } from 'lodash';
 import { SidebarPortal } from '@plone/volto/components';
 
 import { Callout, CalloutTitle, CalloutText } from 'design-react-kit';
@@ -34,7 +33,6 @@ const Edit = ({
   onChangeBlock,
   block,
   onSelectBlock,
-  onAddBlock,
   selected,
   ...otherProps
 }) => {
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx
deleted file mode 100644
index 84e2fabc5..000000000
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
-import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
-import { defineMessages, useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { TextBlockView } from '@plone/volto-slate/blocks/Text';
-import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Divider } from 'semantic-ui-react';
-import cx from 'classnames';
-
-const messages = defineMessages({
-  simple_card_title: {
-    id: 'Type the title…',
-    defaultMessage: 'Type the title…',
-  },
-  simple_card_content: {
-    id: 'Type description…',
-    defaultMessage: 'Digita la descrizione…',
-  },
-  simple_card_click: {
-    id: 'Type text…',
-    defaultMessage: 'Digita il testo…',
-  },
-});
-
-const Block = ({
-  inEditMode,
-  data,
-  block,
-  onChange,
-  selected,
-  ...otherProps
-}) => {
-  const intl = useIntl();
-  const title = data?.simple_card_title;
-  const content = data?.simple_card_content;
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField && otherProps.onSelectBlock) {
-      otherProps.onSelectBlock(block);
-    }
-  }, [selectedField]);
-
-  return (
-    <div className="simple-text-card-wrapper">
-      <Card
-        color="white"
-        className=" card-bg rounded"
-        noWrapper={false}
-        space
-        tag="div"
-      >
-        <CardBody>
-          <div className={cx('simple-text-card', { 'cms-ui': inEditMode })}>
-            {inEditMode ? (
-              <>
-                <CardTitle tag="h4">
-                  <TextEditorWidget
-                    {...otherProps}
-                    showToolbar={false}
-                    data={data}
-                    block={block}
-                    fieldName="simple_card_title"
-                    selected={selectedField === 'title'}
-                    onChangeBlock={(block, data) =>
-                      onChange(data, 'simple_card_title')
-                    }
-                    placeholder={intl.formatMessage(messages.simple_card_title)}
-                    setSelected={() => {
-                      setSelectedField('title');
-                    }}
-                    focusNextField={() => {
-                      setSelectedField('content');
-                    }}
-                  />
-                </CardTitle>
-                <Divider />
-
-                <CardText>
-                  <TextEditorWidget
-                    {...otherProps}
-                    showToolbar={true}
-                    data={data}
-                    fieldName="simple_card_content"
-                    selected={selectedField === 'content'}
-                    block={block}
-                    onChangeBlock={(block, data) =>
-                      onChange(data, 'simple_card_content')
-                    }
-                    placeholder={intl.formatMessage(
-                      messages.simple_card_content,
-                    )}
-                    focusPrevField={() => {
-                      setSelectedField('title');
-                    }}
-                  />
-                </CardText>
-              </>
-            ) : (
-              <>
-                <CardTitle tag="h4" id={block.id + '-title'}>
-                  {title}
-                </CardTitle>
-                <Divider />
-                <div>
-                  <CardText>
-                    <TextBlockView data={{ value: content }} />
-                  </CardText>
-                </div>
-              </>
-            )}
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-  );
-};
-
-Block.propTypes = {
-  entityMap: PropTypes.any,
-  data: PropTypes.any,
-  block: PropTypes.any,
-  inEditMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func,
-};
-
-export default Block;
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
index be14338e6..f5dcbc3e1 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
@@ -8,7 +8,7 @@ const BodyWrapper = ({ inEditMode, children }) => {
         'public-ui': inEditMode,
       })}
     >
-      <div>{children}</div>
+      {children}
     </div>
   );
 };
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
index 0ccbb7163..a4c05bef6 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
@@ -3,92 +3,127 @@
  * @module components/Blocks/TitleVM/Edit
  */
 
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Block from './Block';
-import { injectIntl } from 'react-intl';
-import { isEqual } from 'lodash';
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import BodyWrapper from './BodyWrapper';
 
+const messages = defineMessages({
+  simple_card_title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+  simple_card_content: {
+    id: 'Type description…',
+    defaultMessage: 'Digita la descrizione…',
+  },
+  simple_card_click: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
 /**
- * Edit title block class.
+ * Edit Calloout block class.
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    index: PropTypes.number.isRequired,
-    onChangeField: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onAddBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    block: PropTypes.string.isRequired,
-  };
+const Edit = ({
+  data,
+  onChangeBlock,
+  block,
+  onSelectBlock,
+  selected,
+  ...otherProps
+}) => {
+  const intl = useIntl();
+  const [selectedField, setSelectedField] = useState('title');
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs SimpleCard Edit block
-   */
-  constructor(props) {
-    super(props);
-
-    if (!__SERVER__) {
+  useEffect(() => {
+    if (selected && !selectedField) {
+      setSelectedField('title');
+    } else if (!selected) {
+      setSelectedField(null);
     }
-  }
-
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {}
+  }, [selected]);
 
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(obj, fieldname) {
-    if (!isEqual(obj[fieldname], this.props.data[fieldname])) {
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        [fieldname]: obj[fieldname],
-      });
+  useEffect(() => {
+    if (!selected && selectedField) {
+      onSelectBlock(block);
     }
-  }
+  }, [selectedField]);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (__SERVER__) {
-      return <div />;
-    }
-    return (
-      <BodyWrapper data={this.props.data} inEditMode={true}>
-        <Block
-          {...this.props}
-          data={this.props.data}
-          onChange={(obj, fieldname) => this.onChange(obj, fieldname)}
-          inEditMode={true}
-        />
-      </BodyWrapper>
-    );
-  }
-}
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <BodyWrapper data={data} inEditMode={true}>
+      <div className="simple-text-card-wrapper">
+        <Card
+          color="white"
+          className="card-bg rounded"
+          noWrapper={false}
+          space
+          tag="div"
+        >
+          <CardBody>
+            <div className="cms-ui">
+              <CardTitle tag="h4">
+                <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={false}
+                  data={data}
+                  block={block}
+                  fieldName="simple_card_title"
+                  selected={selectedField === 'title'}
+                  onChangeBlock={onChangeBlock}
+                  placeholder={intl.formatMessage(messages.simple_card_title)}
+                  setSelected={() => {
+                    setSelectedField('title');
+                  }}
+                  focusNextField={() => {
+                    setSelectedField('content');
+                  }}
+                />
+              </CardTitle>
+              <div>
+                <CardText>
+                  <TextEditorWidget
+                    {...otherProps}
+                    showToolbar={true}
+                    data={data}
+                    fieldName="simple_card_content"
+                    selected={selectedField === 'content'}
+                    block={block}
+                    onChangeBlock={onChangeBlock}
+                    placeholder={intl.formatMessage(
+                      messages.simple_card_content,
+                    )}
+                    focusPrevField={() => {
+                      setSelectedField('title');
+                    }}
+                  />
+                </CardText>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </BodyWrapper>
+  );
+};
+
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onAddBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+};
 
-export default injectIntl(Edit);
+export default Edit;
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx
index 3e365d080..b1f2c12ec 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx
@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Block from './Block';
+import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
 import BodyWrapper from './BodyWrapper';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 /**
  * View title block class.
@@ -14,10 +15,29 @@ import BodyWrapper from './BodyWrapper';
  * @extends Component
  */
 
-const TextCardView = ({ data, id }) => {
+const TextCardView = ({ data, id, block }) => {
   return (
     <BodyWrapper data={data} inEditMode={false}>
-      <Block data={data} inEditMode={false} block={{ id: id }} />
+      <div className="simple-text-card-wrapper">
+        <Card
+          color="white"
+          className="card-bg rounded"
+          noWrapper={false}
+          space
+          tag="div"
+        >
+          <CardBody>
+            <CardTitle tag="h4" id={id + '-title'}>
+              {data.simple_card_title}
+            </CardTitle>
+            <div>
+              <CardText>
+                <TextBlockView data={{ value: data.simple_card_content }} />
+              </CardText>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
     </BodyWrapper>
   );
 };