fix: icons in NumbersBlock and Sidebar Widget not updating (#402)

* fix: added conditions and state management to update icons

* chore: updated REALEASE.md

* fix: change logic for updating a FontAwesomeIcon component, change state management

* fix: condition for attempting dynamic import of svg icon in FontAwesomeIcon component

* fix: remove unnecessary state in NumbersBlock Edit component

* fix: remove unnecessary state in NumbersBlock Edit component

* chore: updated RELEASE.md

* chore: rollback widget change that is not needed anymore

---------

Co-authored-by: Martina Bustacchini <[email protected]>
Co-authored-by: Piero Nicolli <[email protected]>

RELEASE.md

@@ -49,6 +49,7 @@
 
 ### Fix
 
+- Le icone del Blocco Numeri, del Blocco Icone e della Sidebar si aggiornano istantaneamente quando vengono cambiate
 - Sistemato un bug nell'header dei sottositi che mostrava le voci del menu del sito padre anche se queste erano indicate come non visibili nella configurazione del menu.
 
 ## Versione 10.3.0 (08/11/2023)

src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx

@@ -49,6 +49,7 @@ class Edit extends SubblocksEdit {
     super(props);
     this.state.selectedField = 'title';
   }
+
   /**
    * Render method.
    * @method render

src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -7,7 +7,11 @@ import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index';
 
 const FontAwesomeIcon = (props) => {
   const { className, icon, prefix, title } = props;
-  const [loadedIcon, setLoadedIcon] = React.useState(null);
+  const [loadedIcon, setLoadedIcon] = React.useState({
+    module: null,
+    iconName: '',
+    family: 'solid',
+  });
 
   const getIconAlias = (icon, aliasList) => {
     if (icon in aliasList) {
@@ -17,40 +21,58 @@ const FontAwesomeIcon = (props) => {
     }
   };
 
-  let prefixKey = prefix;
-  let iconName = '';
-
-  if (Array.isArray(icon)) {
-    prefixKey = icon[0];
-    iconName = getIconAlias(icon[1], fontAwesomeAliases);
-  } else {
-    iconName = getIconAlias(icon, fontAwesomeAliases);
-  }
+  const getIconInfo = (icon, prefix) => {
+    let prefixKey = prefix;
+    let iconName = '';
+    if (Array.isArray(icon)) {
+      prefixKey = icon[0];
+      iconName = getIconAlias(icon[1], fontAwesomeAliases);
+    } else {
+      iconName = getIconAlias(icon, fontAwesomeAliases);
+    }
 
-  const prefixFolder =
-    prefixKey === 'fab' ? 'brands' : prefixKey === 'far' ? 'regular' : 'solid';
+    return [
+      prefixKey === 'fab'
+        ? 'brands'
+        : prefixKey === 'far'
+        ? 'regular'
+        : 'solid',
+      iconName,
+    ];
+  };
 
   React.useEffect(() => {
-    if (iconName && !loadedIcon) {
+    const [prefixFolder, iconName] = getIconInfo(icon, prefix);
+    if (
+      iconName &&
+      (iconName !== loadedIcon.iconName || prefixFolder !== loadedIcon.family)
+    ) {
       import(
         `design-comuni-plone-theme/icons/fontawesome-free-6.4.0-web/svgs/${prefixFolder}/${iconName}.svg`
       )
         .then((_loadedIcon) => {
-          setLoadedIcon(_loadedIcon);
+          setLoadedIcon({
+            module: _loadedIcon.default,
+            iconName,
+            family: prefixFolder,
+          });
         })
         .catch((error) => {});
     }
-  }, [iconName, loadedIcon, prefixFolder]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [icon, prefix, loadedIcon]);
 
-  return loadedIcon ? (
+  return loadedIcon.module ? (
     <svg
-      xmlns={loadedIcon.attributes && loadedIcon.attributes.xmlns}
-      viewBox={loadedIcon.attributes && loadedIcon.attributes.viewBox}
+      xmlns={loadedIcon.module.attributes && loadedIcon.module.attributes.xmlns}
+      viewBox={
+        loadedIcon.module.attributes && loadedIcon.module.attributes.viewBox
+      }
       className={`icon fa-icon ${className ?? ''}`}
       dangerouslySetInnerHTML={{
         __html: title
-          ? `<title>${title}</title>${loadedIcon.content}`
-          : loadedIcon.content,
+          ? `<title>${title}</title>${loadedIcon.module.content}`
+          : loadedIcon.module.content,
       }}
     />
   ) : icon ? (

src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
@@ -14,6 +13,7 @@ const messages = defineMessages({
 const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {
   const intl = useIntl();
   const parts = icon?.split(' ') ?? [];
+
   return (
     <Form.Field inline className="help" id="icon-preview-widget-id">
       <Grid>