fix: modulistica view race condition on rendering content items (#43)

src/actions/getModulisticaItems.js

@@ -0,0 +1,18 @@
+export const GET_MODULISTICA_ITEMS = 'GET_MODULISTICA_ITEMS';
+export const RESET_MODULISTICA_ITEMS = 'RESET_MODULISTICA_ITEMS';
+
+export function getModulisticaItems(path) {
+  return {
+    type: GET_MODULISTICA_ITEMS,
+    request: {
+      op: 'get',
+      path,
+    },
+  };
+}
+
+export function resetModulisticaItems() {
+  return {
+    type: RESET_MODULISTICA_ITEMS,
+  };
+}

src/actions/index.js

@@ -29,6 +29,12 @@ import {
   getDettagliProcedimento,
   GET_DETTAGLI_PROCEDIMENTO,
 } from './getDettagliProcedimento';
+import {
+  getModulisticaItems,
+  resetModulisticaItems,
+  GET_MODULISTICA_ITEMS,
+  RESET_MODULISTICA_ITEMS,
+} from './getModulisticaItems';
 import {
   getSearchBandiFilters,
   GET_SEARCH_BANDI_FILTERS,
@@ -48,6 +54,10 @@ export {
   GET_AMMINISTRAZIONE_TRASPARENTE,
   getDettagliProcedimento,
   GET_DETTAGLI_PROCEDIMENTO,
+  getModulisticaItems,
+  GET_MODULISTICA_ITEMS,
+  resetModulisticaItems,
+  RESET_MODULISTICA_ITEMS,
   getTwitterPosts,
   GET_TWITTER_POSTS,
   setOriginalQuery,

src/components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView.jsx

@@ -6,8 +6,11 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
-import { getContent, resetContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getModulisticaItems,
+  resetModulisticaItems,
+} from 'design-comuni-plone-theme/actions';
 import {
   PageHeader,
   RelatedItems,
@@ -36,31 +39,25 @@ const messages = defineMessages({
  */
 
 const CartellaModulisticaView = ({ content }) => {
-  const modulistica_key = 'modulistica';
-  const locationContent = useSelector((state) => state.content.subrequests);
+  const modulisticaItems = useSelector((state) => state.modulisticaItems);
   const dispatch = useDispatch();
   const intl = useIntl();
+
+  const hasItems = content.items?.length > 0;
+  const modulistica_items_url =
+    content['@components']['modulistica-items']['@id'];
+
   useEffect(() => {
-    if (
-      content?.items?.length > 0 &&
-      !locationContent[modulistica_key]?.loaded
-    ) {
-      const modulistica_items_url =
-        content['@components']['modulistica-items']['@id'];
-
-      dispatch(
-        getContent(
-          flattenToAppURL(modulistica_items_url),
-          null,
-          modulistica_key,
-        ),
-      );
-      return () => dispatch(resetContent(modulistica_key));
+    if (hasItems && !modulisticaItems.loading && !modulisticaItems.loaded) {
+      dispatch(getModulisticaItems(flattenToAppURL(modulistica_items_url)));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dispatch, hasItems, modulisticaItems, modulistica_items_url]);
+
+  useEffect(() => {
+    return () => dispatch(resetModulisticaItems());
+  }, [dispatch]);
 
-  const modulistica = locationContent[modulistica_key]?.data?.items ?? [];
+  const modulistica = modulisticaItems?.data?.items ?? [];
 
   return (
     <>

src/reducers/index.js

@@ -10,6 +10,7 @@ import { calendarSearchReducer } from './calendarSearchReducer';
 import { calendarDaySearchReducer } from './calendarDaySearchReducer';
 import { amministrazioneTrasparenteTree } from './amministrazioneTrasparenteTree';
 import { dettagliProcedimento } from './dettagliProcedimento';
+import { modulisticaItems } from './modulisticaItems';
 import { twitterPosts } from './twitterPosts';
 import { originalQueryReducer } from './originalQueryReducer';
 import { searchBandiFiltersReducer } from './searchBandiFiltersReducer';
@@ -32,6 +33,7 @@ const reducers = {
   calendarDaySearch: calendarDaySearchReducer,
   amministrazioneTrasparenteTree: amministrazioneTrasparenteTree,
   dettagliProcedimento: dettagliProcedimento,
+  modulisticaItems,
   twitterPosts: twitterPosts,
   originalQuery: originalQueryReducer,
   searchBandiFilters: searchBandiFiltersReducer,

src/reducers/modulisticaItems.js

@@ -0,0 +1,51 @@
+/**
+ * Search filters reducer
+ * @module src/reducers/getdettagliProcedimento
+ */
+
+import {
+  GET_MODULISTICA_ITEMS,
+  RESET_MODULISTICA_ITEMS,
+} from 'design-comuni-plone-theme/actions';
+
+const initialState = {
+  error: null,
+  data: {},
+  loading: false,
+  loaded: false,
+};
+
+export const modulisticaItems = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case `${GET_MODULISTICA_ITEMS}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loading: true,
+        loaded: false,
+      };
+
+    case `${GET_MODULISTICA_ITEMS}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        data: action.result,
+        loading: false,
+        loaded: true,
+      };
+
+    case `${GET_MODULISTICA_ITEMS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        loading: false,
+        loaded: false,
+      };
+    case RESET_MODULISTICA_ITEMS:
+      return {
+        ...initialState,
+      };
+    default:
+      return state;
+  }
+};