fix: clear the item filters after the dashboard has been switched (#612)

Bug: when switching from one dashboard to another, and item filters were set, then dashboard items from the first dashboard were being re-rendered briefly before the new dashboard was loaded. This was happening because the item filters were being cleared from the store prior to the dashboard switching. The store change triggered a re-render on the dashboard items. As part of the fix, several imports were added to actions/selected. I reordered the imports to group them, just for reading legibility.
dhis2 · Mar 4, 2020 · 8d8357f · 8d8357f
1 parent a89c1cb
commit 8d8357f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/actions/dashboards.js b/src/actions/dashboards.js
@@ -12,11 +12,6 @@ import {
 } from '../reducers/dashboards';
 import { sGetUserUsername } from '../reducers/user';
 import { tSetSelectedDashboardById, acSetSelectedId } from './selected';
-import { sGetSelectedId } from '../reducers/selected';
-import { sGetIsEditing } from '../reducers/editDashboard';
-import { sGetEditItemFiltersRoot } from '../reducers/editItemFilters';
-import { acSetItemFilters, acClearItemFilters } from './itemFilters';
-import { acClearEditItemFilters } from './editItemFilters';
 import { acClearEditDashboard } from './editDashboard';
 import {
     apiFetchDashboards,
@@ -87,20 +82,6 @@ export const tSelectDashboard = id => async (dispatch, getState) => {
 
         if (dashboardToSelect) {
             dispatch(tSetSelectedDashboardById(dashboardToSelect.id));
-
-            if (dashboardToSelect.id === sGetSelectedId(state)) {
-                if (sGetIsEditing(state)) {
-                    // disable filters when switching to edit mode
-                    dispatch(acClearItemFilters());
-                } else {
-                    // enable filters when switching to view mode
-                    dispatch(acSetItemFilters(sGetEditItemFiltersRoot(state)));
-                }
-            } else {
-                // clear filters when switching dashboard
-                dispatch(acClearEditItemFilters());
-                dispatch(acClearItemFilters());
-            }
         } else {
             dispatch(acSetSelectedId());
         }

diff --git a/src/actions/selected.js b/src/actions/selected.js
@@ -1,19 +1,29 @@
+import { getCustomDashboards, sGetDashboardById } from '../reducers/dashboards';
+import { sGetIsEditing } from '../reducers/editDashboard';
+import { sGetEditItemFiltersRoot } from '../reducers/editItemFilters';
 import {
     SET_SELECTED_ID,
     SET_SELECTED_ISLOADING,
     SET_SELECTED_SHOWDESCRIPTION,
+    sGetSelectedIsLoading,
+    sGetSelectedId,
 } from '../reducers/selected';
-import { acAddVisualization } from '../actions/visualizations';
-import { sGetSelectedIsLoading } from '../reducers/selected';
 import { sGetUserUsername } from '../reducers/user';
-import { getCustomDashboards, sGetDashboardById } from '../reducers/dashboards';
-import { apiFetchDashboard } from '../api/dashboards';
+
 import { acSetDashboardItems, acAppendDashboards } from './dashboards';
-import { withShape } from '../components/ItemGrid/gridUtil';
+import { acClearEditItemFilters } from './editItemFilters';
+import { acClearItemFilters, acSetItemFilters } from './itemFilters';
 import { tGetMessages } from '../components/Item/MessagesItem/actions';
 import { acReceivedSnackbarMessage, acCloseSnackbar } from './snackbar';
+import { acAddVisualization } from './visualizations';
+
+import { apiFetchDashboard } from '../api/dashboards';
 import { storePreferredDashboardId } from '../api/localStorage';
+
+import { withShape } from '../components/ItemGrid/gridUtil';
 import { loadingDashboardMsg } from '../components/SnackbarMessage/SnackbarMessage';
+import { extractFavorite } from '../components/Item/VisualizationItem/plugin';
+
 import {
     REPORT_TABLE,
     CHART,
@@ -22,7 +32,6 @@ import {
     EVENT_CHART,
     MESSAGES,
 } from '../modules/itemTypes';
-import { extractFavorite } from '../components/Item/VisualizationItem/plugin';
 import { orObject } from '../modules/util';
 
 // actions
@@ -45,6 +54,7 @@ export const acSetSelectedShowDescription = value => ({
 export const tLoadDashboard = id => async dispatch => {
     try {
         const dash = await apiFetchDashboard(id);
+
         dispatch(acAppendDashboards(dash));
 
         return Promise.resolve(dash);
@@ -100,6 +110,21 @@ export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
             }
         });
 
+        const state = getState();
+        if (id === sGetSelectedId(state)) {
+            if (sGetIsEditing(state)) {
+                // disable filters when switching to edit mode
+                dispatch(acClearItemFilters());
+            } else {
+                // enable filters when switching to view mode
+                dispatch(acSetItemFilters(sGetEditItemFiltersRoot(state)));
+            }
+        } else {
+            // clear filters when switching dashboard
+            dispatch(acClearEditItemFilters());
+            dispatch(acClearItemFilters());
+        }
+
         dispatch(acSetSelectedId(id));
 
         dispatch(acSetSelectedIsLoading(false));