design-comuni-plone-theme 11.17.0 → 11.18.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 
 
+## [11.18.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.17.0...v11.18.0) (2024-07-19)
+
+
+### Features
+
+* add pagination to cards listings in Venue, refactor pagination logic into custom hook ([#726](https://github.com/RedTurtle/design-comuni-plone-theme/issues/726)) ([305a467](https://github.com/RedTurtle/design-comuni-plone-theme/commit/305a46764ba337ff01ed576f06a6b2bf065e7ff6))
+
+
+### Bug Fixes
+
+* site settings issues with race conditions and hook rendering ([5f350bc](https://github.com/RedTurtle/design-comuni-plone-theme/commit/5f350bc2548e7d835380d8a1631ca2d37afd1bff))
+
+
+### Documentation
+
+* updated publiccode and release log ([955ff49](https://github.com/RedTurtle/design-comuni-plone-theme/commit/955ff499c78b34fb472ce9ddf2df9267d0f432fe))
+
 ## [11.17.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.16.0...v11.17.0) (2024-07-16)
 
 

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
 -->
 
+## Versione 11.18.0 (19/07/2024)
+
+### Migliorie
+
+- Aggiunta la paginazione per le card presenti sotto i campi "Sede di" e "Servizi presenti nel luogo", ora verranno mostrati solo 4 elementi alla volta.
+
 ## Versione 11.17.0 (16/07/2024)
 
 ### Novità

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.17.0",
+  "version": "11.18.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -159,7 +159,7 @@
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.1.1",
-    "volto-site-settings": "0.4.3",
+    "volto-site-settings": "0.4.4",
     "volto-slimheader": "0.1.2",
     "volto-social-settings": "3.0.0",
     "volto-subblocks": "2.1.0",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-07-16'
+releaseDate: '2024-07-19'
 softwareType: standalone/web
-softwareVersion: 11.17.0
+softwareVersion: 11.18.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/AppExtras/SiteSettingsExtras.jsx

@@ -5,30 +5,36 @@ CUSTOMIZATIONS:
 
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { Helmet } from '@plone/volto/helpers';
 import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
 const SiteSettingsExtras = (props) => {
   const intl = useIntl();
+  const subsite = useSelector((state) => state.subsite?.data);
   let siteTitle = SiteProperty({
     property: 'site_title',
     getValue: true,
     defaultValue: getSiteProperty('siteTitle', intl.locale),
+    // TODO DEPRECATED: remove and only use defaultValue in v12
+    forceValue: subsite?.title || getSiteProperty('siteTitle', intl.locale),
   });
 
   const parentSiteTitle = SiteProperty({
     property: 'site_title',
     getValue: true,
     getParent: true,
-    defaultValue: getSiteProperty('parentSiteTitle', intl.locale),
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    // TODO DEPRECATED: remove and only use defaultValue in v12
+    forceValue: getSiteProperty('siteTitle', intl.locale),
   });
 
   if (parentSiteTitle !== siteTitle) {
     siteTitle = siteTitle + ' - ' + parentSiteTitle;
   }
 
-  siteTitle = siteTitle.replaceAll('\\n', ' - ');
+  siteTitle = siteTitle?.replaceAll('\\n', ' - ') ?? '';
 
   return <Helmet titleTemplate={`%s - ${siteTitle}`} />;
 };

package/src/components/ItaliaTheme/BrandText/BrandText.jsx

@@ -9,26 +9,24 @@ const BrandText = ({ mobile = false, subsite, getParent = false }) => {
   // TODO DEPRECATED: remove and only use SiteProperty
   const deprecatedSiteTitle =
     subsite?.title || getSiteProperty('siteTitle', intl.locale);
-  let title =
-    deprecatedSiteTitle ||
-    SiteProperty({
-      property: 'site_title',
-      defaultValue: getSiteProperty('siteTitle', intl.locale),
-      getValue: true,
-      getParent: getParent,
-    });
+  let title = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSiteTitle,
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
 
   // TODO DEPRECATED: remove and only use SiteProperty
   const deprecatedSiteSubtitle =
     subsite?.description || getSiteProperty('siteSubtitle', intl.locale);
-  const description =
-    deprecatedSiteSubtitle ||
-    SiteProperty({
-      property: 'site_subtitle',
-      defaultValue: getSiteProperty('siteSubtitle', intl.locale),
-      getValue: true,
-      getParent: getParent,
-    });
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    forceValue: deprecatedSiteSubtitle,
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
   const titleSplit = title?.split('\n') ?? null;
   title = titleSplit?.map((t, i) => (
     <React.Fragment key={i}>

package/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx

@@ -35,14 +35,13 @@ const HeaderSlim = () => {
     intl.locale,
   );
 
-  const subsiteParentSiteTitle =
-    deprecatedSubsiteParentSiteTitle ||
-    SiteProperty({
-      property: 'site_title',
-      defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
-      getValue: true,
-      getParent: true,
-    });
+  const subsiteParentSiteTitle = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSubsiteParentSiteTitle,
+    defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
 
   const target = subsite ? null : '_blank';
   return (
@@ -55,7 +54,7 @@ const HeaderSlim = () => {
           rel="noopener noreferrer"
         >
           {!subsite && staticParentSiteTitle}
-          {subsite && subsiteParentSiteTitle.replaceAll('\\n', ' - ')}
+          {subsite && (subsiteParentSiteTitle?.replaceAll('\\n', ' - ') ?? '')}
         </HeaderBrand>
         <HeaderRightZone>
           <HeaderSlimRightZone />

package/src/components/ItaliaTheme/Pagination/Pagination.jsx

@@ -58,7 +58,6 @@ class Pagination extends Component {
 
   handleItemClick = (e, nextActivePage) => {
     const { activePage: prevActivePage } = this.state;
-
     // Heads up! We need the cast to the "number" type there, as `activePage` can be a string
     if (+prevActivePage === +nextActivePage) return;
     this.setState({ activePage: nextActivePage.children });

package/src/components/ItaliaTheme/View/Commons/RelatedArticles.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OfficeCard } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const RelatedArticles = ({
   id = 'related-articles',
@@ -12,6 +14,9 @@ const RelatedArticles = ({
   show_title = true,
   noMargin = false,
 }) => {
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: items });
+
   return (
     <article
       id={id}
@@ -27,7 +32,7 @@ const RelatedArticles = ({
       ) : null}
 
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-        {items?.map((item, i) => (
+        {batches?.map((item, i) => (
           <OfficeCard
             key={item['@id']}
             office={item}
@@ -36,6 +41,11 @@ const RelatedArticles = ({
           />
         ))}
       </div>
+      <Pagination
+        activePage={currentPage}
+        totalPages={pageNumbers}
+        onPageChange={onPaginationChange}
+      />
     </article>
   );
 };

package/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx

@@ -18,14 +18,13 @@ const ServizioMetatag = ({ content }) => {
   const intl = useIntl();
   // TODO DEPRECATED use only SiteProperty
   const deprecatedSiteTitle = getSiteProperty('siteTitle', intl.locale);
-  let siteTitle =
-    deprecatedSiteTitle ||
-    SiteProperty({
-      property: 'site_title',
-      getValue: true,
-      defaultTitle: getSiteProperty('siteTitle', intl.locale),
-    });
-  siteTitle = siteTitle.replaceAll('\\n', ' - ');
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSiteTitle,
+    getValue: true,
+    defaultTitle: getSiteProperty('siteTitle', intl.locale),
+  });
+  siteTitle = siteTitle?.replaceAll('\\n', ' - ') ?? '';
 
   const schemaOrg = {
     '@context': 'https://schema.org',

package/src/components/ItaliaTheme/View/UOView/UOServices.jsx

@@ -11,6 +11,7 @@ import {
 } from 'design-react-kit';
 import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   servizi_offerti: {
@@ -19,34 +20,15 @@ const messages = defineMessages({
   },
 });
 
-//* Pagination **/
-const divideServicesIntoBatches = (arr, batchSize) => {
-  const batches = [];
-  for (let i = 0; i < arr.length; i += batchSize) {
-    batches.push(arr.slice(i, i + batchSize));
-  }
-  return batches;
-};
-
 const UOServices = ({ content }) => {
   const intl = useIntl();
 
-  const [currentPage, setCurrentPage] = useState(1);
-  const bSize = 4;
-
-  //* Calcolo numero pagine
-
   const servizi_offerti =
     content.servizi_offerti === undefined || content.servizi_offerti === null
       ? []
       : content.servizi_offerti;
-
-  const pageNumbers = Math.ceil(servizi_offerti.length / bSize);
-
-  const onPaginationChange = (activePage) => {
-    const current = activePage?.children ?? 1;
-    setCurrentPage(current);
-  };
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: servizi_offerti });
 
   return content?.servizi_offerti?.length > 0 ? (
     <section
@@ -57,9 +39,7 @@ const UOServices = ({ content }) => {
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
       <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
-        {divideServicesIntoBatches(content?.servizi_offerti, bSize)[
-          currentPage - 1
-        ]?.map((servizio, i) => (
+        {batches?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">
               <CardBody>
@@ -79,7 +59,7 @@ const UOServices = ({ content }) => {
         <Pagination
           activePage={currentPage}
           totalPages={pageNumbers}
-          onPageChange={(e, { activePage }) => onPaginationChange(activePage)}
+          onPageChange={onPaginationChange}
         />
       </div>
     </section>

package/src/helpers/index.js

@@ -53,3 +53,4 @@ export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Tra
 
 export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry';
 export { useHomePath } from 'design-comuni-plone-theme/helpers/url';
+export { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers/usePaginatedItemsSection.hook.ts';

package/src/helpers/usePaginatedItemsSection.hook.ts

@@ -0,0 +1,63 @@
+import { useState, useMemo } from 'react';
+import type { IntlShape } from 'react-intl';
+
+interface usePaginatedItemsSectionProps {
+  data: Array<any> | null | undefined;
+  bSize?: number;
+}
+
+type ActivePage = {
+  active: boolean;
+  type: 'pageItem' | string;
+  ellipsisItem: '...' | string | null | undefined;
+  isPrevButtonInactive: boolean;
+  isForwButtonInactive: boolean;
+  children: number;
+  intl: IntlShape;
+};
+
+type PaginationFunctionExtraArgs = {
+  activePage: ActivePage;
+  onClick: (
+    e: MouseEvent | KeyboardEvent,
+    obj: PaginationFunctionExtraArgs,
+  ) => void;
+};
+
+export const DEFAULT_PAGINATED_CARDS_SECTION_BSIZE = 4;
+
+function getBatches(
+  arr: usePaginatedItemsSectionProps['data'],
+  batchSize: number,
+): any[][] {
+  const batches = [];
+  if (arr) {
+    for (let i = 0; i < arr.length; i += batchSize) {
+      batches.push(arr.slice(i, i + batchSize));
+    }
+  }
+  return batches;
+}
+
+export function usePaginatedItemsSection({
+  data,
+  bSize = DEFAULT_PAGINATED_CARDS_SECTION_BSIZE,
+}: usePaginatedItemsSectionProps) {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const pageNumbers = data ? Math.ceil(data.length / bSize) : 0;
+
+  const onPaginationChange = (
+    _e: MouseEvent | KeyboardEvent,
+    { activePage }: PaginationFunctionExtraArgs,
+  ) => {
+    const current = activePage?.children ?? 1;
+    setCurrentPage(current);
+  };
+  const batches: Array<any> = useMemo(() => {
+    const currentIndex = currentPage - 1;
+    return getBatches(data, bSize)[currentIndex];
+  }, [data, bSize, currentPage]);
+
+  return { batches, currentPage, onPaginationChange, pageNumbers };
+}