From 0ec952bb89872018cfbc153dba10d90569463278 Mon Sep 17 00:00:00 2001
From: rogup <rohit5.gup@gmail.com>
Date: Thu, 14 Dec 2023 00:40:50 +0000
Subject: [PATCH] Add Redux DevTools sanitizers

---
 src/index.js | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 2538d3ed..963e6c30 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,9 +24,40 @@ import './assets/styles/style.scss';
 
 analytics.init();
 
-//Enable REDUX DevTools if in dev mode
+// Enable Redux DevTools if in dev mode
 console.log('dev mode: ', constants.DEV_MODE);
-const composeEnhancers = constants.DEV_MODE ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose;
+
+// Properties fetched from boundary service can be long, so we should prevent Redux DevTools from
+// displaying the whole list and using excessive memory
+const LONG_LIST_THRESHOLD = 20;
+
+const actionSanitizer = (action) => (
+    (action.type === 'FETCH_PROPERTIES_SUCCESS' ||
+    action.type === 'SET_MULTIPLE_SELECTED_PROPERTIES') &&
+    action.payload &&
+    action.payload.length > LONG_LIST_THRESHOLD
+        ? { ...action, payload: '<<LONG_LIST>>' }
+        : action
+);
+const stateSanitizer = (state) => {
+    const landOwnership = state.landOwnership.highlightedProperties.length > LONG_LIST_THRESHOLD
+        ? { ...state.landOwnership, highlightedProperties: '<<LONG_LIST>>' }
+        : state.landOwnership;
+    const relatedProperties = state.relatedProperties.properties.length > LONG_LIST_THRESHOLD
+        ? (state.relatedProperties.selectedProperty.length > LONG_LIST_THRESHOLD
+            ? { ...state.relatedProperties, properties: '<<LONG_LIST>>', selectedProperty: '<<LONG_LIST>>' }
+            : { ...state.relatedProperties, properties: '<<LONG_LIST>>' }
+        )
+        : state.relatedProperties;
+
+    return { ...state, landOwnership, relatedProperties };
+};
+
+const composeEnhancers =
+    constants.DEV_MODE && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ actionSanitizer, stateSanitizer })
+        : compose;
+
 // Create store from rootReducer with Thunk middleware
 const store = createStore(rootReducer, {}, composeEnhancers(
     applyMiddleware(ReduxThunk)