design-comuni-plone-theme/src/components/ItaliaTheme/Footer/FooterInfos.jsx

Volto Theme for Italia design guidelines

/**
 * FooterInfos component.
 * @module components/Footer/FooterInfos
 */

import React, { useEffect, useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';

import { defineMessages, useIntl } from 'react-intl';
import { Row, Col } from 'design-react-kit';
import { ConditionalLink } from '@plone/volto/components';
import { flattenHTMLToAppURL } from '@plone/volto/helpers';
import { getEditableFooterColumns, getItemsByPath } from 'volto-editablefooter';
import {
  FooterNewsletterSubscribe,
  FooterSocials,
} from 'design-comuni-plone-theme/components/ItaliaTheme';

import { TextBlockView } from '@plone/volto-slate/blocks/Text';
import { fromHtml } from 'design-comuni-plone-theme/config/Slate/utils';
import { useHomePath } from 'design-comuni-plone-theme/helpers';

const messages = defineMessages({
  goToPage: {
    id: 'Vai alla pagina',
    defaultMessage: 'Vai alla pagina',
  },
});

const FooterInfos = () => {
  const intl = useIntl();
  const N_COLUMNS = 4;
  const location = useLocation();
  const dispatch = useDispatch();
  const homepath = useHomePath();

  const [footerColumns, setFooterColumns] = useState([]);
  const [colWidth, setColWidth] = useState(3);

  const confLoading = useSelector(
    (state) => state.editableFooterColumns.loadingResults,
  );
  const footerConfiguration = useSelector(
    (state) => state.editableFooterColumns?.result,
  );

  useEffect(() => {
    if (!footerConfiguration && !confLoading) {
      dispatch(getEditableFooterColumns());
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    //filter rootpaths
    const fc = getItemsByPath(
      footerConfiguration,
      location?.pathname?.length ? location.pathname : homepath,
    );
    fc.forEach((column) => {
      if (__CLIENT__) {
        column.slateText = fromHtml(column.text);
      }
    });

    const ncolumns = fc.length < N_COLUMNS ? fc.length : N_COLUMNS;
    setFooterColumns(fc);
    setColWidth(12 / ncolumns);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [footerConfiguration, location]);

  return (
    <Row tag="div">
      {footerColumns
        .filter((c) => c.visible)
        .map((column, index) => (
          <Col
            lg={colWidth}
            md={colWidth}
            className="pb-2"
            tag="div"
            widths={['xs', 'sm', 'md', 'lg', 'xl']}
            key={index}
          >
            <p className="h4">
              {column?.title && (
                <ConditionalLink
                  condition={column.titleLink?.length > 0}
                  item={column.titleLink?.[0]}
                  to={column.titleLink?.[0]?.['@id'] ? null : ''}
                  title={
                    intl.formatMessage(messages.goToPage) + ':' + column.title
                  }
                >
                  {column.title}
                </ConditionalLink>
              )}
            </p>
            {column.showSocial && <FooterSocials />}
            {column.slateText ? (
              <TextBlockView data={{ value: column.slateText }} />
            ) : (
              column.text && (
                <div
                  dangerouslySetInnerHTML={{
                    __html: flattenHTMLToAppURL(column.text.data),
                  }}
                />
              )
            )}
            {/* <TextBlockView id={index} data={{ value: data.text }} /> */}
            {column.newsletterSubscribe && <FooterNewsletterSubscribe />}
          </Col>
        ))}
    </Row>
  );
};

export default FooterInfos;