From 8b3587ed13f7c9019a2606fa8e120e4146de3b7e Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 6 Jun 2024 14:56:15 +0200
Subject: [PATCH] fix: fetch visualization always when caching (DHIS2-17509)
 (#2986)

A previous fix for an item flashing issue caused the offline cache to
lack the request for the visualizations.
The fix looks at the recording state and triggers a fetch that can be
recorded.
---
 src/components/Item/VisualizationItem/Item.js | 10 ++++++++++
 src/pages/view/ItemGrid.js                    |  1 +
 2 files changed, 11 insertions(+)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 93f30c97b..f17f235bf 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -114,6 +114,15 @@ class Item extends Component {
         this.setState({ configLoaded: true })
     }
 
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.isRecording &&
+            this.props.isRecording !== prevProps.isRecording
+        ) {
+            apiFetchVisualization(this.props.item)
+        }
+    }
+
     isFullscreenSupported = () => {
         const el = getGridItemElement(this.props.item.id)
         return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
@@ -322,6 +331,7 @@ Item.propTypes = {
     dashboardMode: PropTypes.string,
     gridWidth: PropTypes.number,
     isEditing: PropTypes.bool,
+    isRecording: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     setActiveType: PropTypes.func,
diff --git a/src/pages/view/ItemGrid.js b/src/pages/view/ItemGrid.js
index 28241b1ef..0a112be77 100644
--- a/src/pages/view/ItemGrid.js
+++ b/src/pages/view/ItemGrid.js
@@ -109,6 +109,7 @@ const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {
                     item={item}
                     gridWidth={gridWidth}
                     dashboardMode={VIEW}
+                    isRecording={forceLoad}
                     onToggleItemExpanded={onToggleItemExpanded}
                 />
             </ProgressiveLoadingContainer>