diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index f975a1da57..4e440bf4d0 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -19,6 +19,9 @@ import { useCurrentState } from '@/_stores/currentStateStore'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useEditorStore } from '@/_stores/editorStore'; import { shallow } from 'zustand/shallow'; +import _ from 'lodash'; +// eslint-disable-next-line import/no-unresolved +import { diff } from 'deep-object-diff'; const NO_OF_GRIDS = 43; @@ -79,7 +82,7 @@ export const Container = ({ shallow ); - const [boxes, setBoxes] = useState(components); + const [boxes, setBoxes] = useState([]); const [isDragging, setIsDragging] = useState(false); const [isResizing, setIsResizing] = useState(false); const [commentsPreviewList, setCommentsPreviewList] = useState([]); @@ -195,7 +198,12 @@ export const Container = ({ if (componendAdded) { opts.componentAdded = true; } - appDefinitionChanged(newDefinition, opts); + + const shouldUpdate = !_.isEmpty(diff(appDefinition, newDefinition)); + if (shouldUpdate) { + appDefinitionChanged(newDefinition, opts); + } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [boxes]); diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx index 0e2e4270be..b4bf4ee261 100644 --- a/frontend/src/Editor/SubContainer.jsx +++ b/frontend/src/Editor/SubContainer.jsx @@ -15,6 +15,8 @@ import { useCurrentState } from '@/_stores/currentStateStore'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; import { useMounted } from '@/_hooks/use-mount'; +// eslint-disable-next-line import/no-unresolved +import { diff } from 'deep-object-diff'; const NO_OF_GRIDS = 43; @@ -251,7 +253,11 @@ export const SubContainer = ({ opts.componentAdded = true; } - appDefinitionChanged(newDefinition, opts); + const shouldUpdate = !_.isEmpty(diff(appDefinition, newDefinition)); + + if (shouldUpdate) { + appDefinitionChanged(newDefinition, opts); + } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [boxes]); diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js index 7bd42ef208..1d638c698e 100644 --- a/frontend/src/_stores/utils.js +++ b/frontend/src/_stores/utils.js @@ -99,6 +99,9 @@ function updateValueInJson(json, path, value) { export function isParamFromTableColumn(appDiff, definition) { const path = generatePath(appDiff, 'columns') || generatePath(appDiff, 'actions'); + if (!path) { + return false; + } const value2 = getValueFromJson(definition, path);