From cb2e26cb0a3d29b27cef87223100de1a46fddcbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Henrik=20=C3=98verland?=
 <janhenrik.overland@gmail.com>
Date: Wed, 5 Jun 2024 14:22:34 +0200
Subject: [PATCH] fix: fetch visualization always when caching (#2988) (#2992)

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.

(cherry picked from commit c1201fa46dfbb8ee524dbc1087bad9f45bc22c65)

Co-authored-by: Edoardo Sabadelli <edoardo@dhis2.org>
---
 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 3aa9f6fd9..8685711b0 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -104,6 +104,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)
@@ -280,6 +289,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 017e765f5..9beb65bd3 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>