From 2b5a748682dbf7bd5c77dbc8a0283f98312d178f Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 10 May 2023 14:53:56 +0530
Subject: [PATCH] Upon saving the  edited changes in the table, it is not
 mutating query object (#5784)

* bug fixed: Table edit and save changing the referenced data

* bug fixed : upon changing the data to the Table, component still persists previous data if it has been updated before

* when table is edited, and its reference data is changed, it does not show new data rather persists updated data

* removing unused code

* code refactor

* bug fixed: upon click on save changes,updatedData exposed var is getting reset
---
 frontend/src/Editor/Components/Table/Table.jsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 0ebd4f62ea..b856647c48 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -103,6 +103,8 @@ export function Table({
     hideColumnSelectorButton,
   } = loadPropertiesAndStyles(properties, styles, darkMode, component);
 
+  const updatedDataReference = useRef([]);
+
   const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
     ...draggableStyle,
     userSelect: 'none',
@@ -298,11 +300,13 @@ export function Table({
   }
 
   function handleChangesSaved() {
+    const clonedTableData = _.cloneDeep(tableData);
     Object.keys(changeSet).forEach((key) => {
-      tableData[key] = {
-        ..._.merge(tableData[key], changeSet[key]),
+      clonedTableData[key] = {
+        ..._.merge(clonedTableData[key], changeSet[key]),
       };
     });
+    updatedDataReference.current = _.cloneDeep(clonedTableData);
 
     setExposedVariables({
       changeSet: {},
@@ -427,6 +431,7 @@ export function Table({
 
   const data = useMemo(() => {
     if (!_.isEqual(properties.data, prevDataFromProps.current)) {
+      if (!_.isEmpty(updatedDataReference.current)) updatedDataReference.current = [];
       if (
         !_.isEmpty(exposedVariables.newRows) ||
         !_.isEmpty(tableDetails.addNewRowsDetails.newRowsDataUpdates) ||
@@ -437,7 +442,7 @@ export function Table({
         });
       }
     }
-    return tableData;
+    return _.isEmpty(updatedDataReference.current) ? tableData : updatedDataReference.current;
   }, [
     tableData.length,
     tableDetails.changeSet,
@@ -703,7 +708,10 @@ export function Table({
   };
   useEffect(() => {
     if (_.isEmpty(changeSet)) {
-      setExposedVariable('updatedData', tableData);
+      setExposedVariable(
+        'updatedData',
+        _.isEmpty(updatedDataReference.current) ? tableData : updatedDataReference.current
+      );
     }
   }, [JSON.stringify(changeSet)]);