From d145aef9fde02b70586dacf9172821e195aa3bc1 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 9 Apr 2024 18:14:14 +0530 Subject: [PATCH 1/8] fixes: component should correctly re-redner --- frontend/src/Editor/Components/TextInput.jsx | 8 +++----- frontend/src/_stores/editorStore.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx index 6084aa16d9..fca4800ec7 100644 --- a/frontend/src/Editor/Components/TextInput.jsx +++ b/frontend/src/Editor/Components/TextInput.jsx @@ -224,7 +224,7 @@ export const TextInput = function TextInput({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [disable]); - const renderInput = () => ( + return ( <>
); - - return <>{renderInput()}; }; diff --git a/frontend/src/_stores/editorStore.js b/frontend/src/_stores/editorStore.js index cc540c6992..ce550ed609 100644 --- a/frontend/src/_stores/editorStore.js +++ b/frontend/src/_stores/editorStore.js @@ -118,5 +118,5 @@ export const flushComponentsToRender = (componentIds = []) => { if (!componentIds.length) return; useEditorStore.getState().actions.flushComponentsNeedsUpdateOnNextRender(componentIds); - useResolveStore.getState().actions.getLastUpdatedRefs(); + useResolveStore.getState().actions.flushLastUpdatedRefs(); }; From 5d48385d502318fe62c55e45f076f6a1994bbde7 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 9 Apr 2024 21:57:14 +0530 Subject: [PATCH 2/8] handle viewer page entitiy references --- frontend/src/Editor/Viewer.jsx | 282 +++++++++++++++++++-------------- 1 file changed, 162 insertions(+), 120 deletions(-) diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index 011a4bdc5a..f8e38250f1 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -50,8 +50,6 @@ import { useResolveStore } from '@/_stores/resolverStore'; import { findComponentsWithReferences } from '@/_helpers/editorHelpers'; import { findAllEntityReferences } from '@/_stores/utils'; import { dfs } from '@/_stores/handleReferenceTransactions'; -// eslint-disable-next-line import/no-unresolved -import produce from 'immer'; class ViewerComponent extends React.Component { constructor(props) { @@ -104,7 +102,125 @@ class ViewerComponent extends React.Component { }); useEditorStore.getState().actions.updateEditorState({ - appDefinition: { ...appDefData }, + appDefinition: appDefData, + }); + }; + + onViewerLoadUpdateEntityReferences = (pageId, loadType) => { + const appDefData = useEditorStore.getState().appDefinition; + const appJson = JSON.parse(JSON.stringify(appDefData)); + const currentPageId = pageId ?? this.state.currentPageId; + const currentComponents = appJson.pages[currentPageId].components; + let dataQueries = JSON.parse(JSON.stringify(useDataQueriesStore.getState().dataQueries)); + let allEvents = JSON.parse(JSON.stringify(useAppDataStore.getState().events)); + + const entityReferencesInComponentDefinitions = findAllEntityReferences(currentComponents, [])?.filter( + (entity) => entity && isValidUUID(entity) + ); + + const entityReferencesInQueryOptions = findAllEntityReferences(dataQueries, [])?.filter( + (entity) => entity && isValidUUID(entity) + ); + + const entityReferencesInEvents = findAllEntityReferences(allEvents, [])?.filter( + (entity) => entity && isValidUUID(entity) + ); + + const manager = useResolveStore.getState().referenceMapper; + + if (Array.isArray(entityReferencesInComponentDefinitions) && entityReferencesInComponentDefinitions?.length > 0) { + let newComponentDefinition = JSON.parse(JSON.stringify(currentComponents)); + + entityReferencesInComponentDefinitions.forEach((entity) => { + const entityrefExists = manager.has(entity); + + if (entityrefExists) { + const value = manager.get(entity); + + newComponentDefinition = dfs(newComponentDefinition, entity, value); + } + }); + + const newAppDefinition = { + ...appJson, + pages: { + ...appJson.pages, + [currentPageId]: { + ...appJson.pages[currentPageId], + components: newComponentDefinition, + }, + }, + }; + + useEditorStore.getState().actions.updateEditorState({ + isUpdatingEditorStateInProcess: false, + appDefinition: newAppDefinition, + }); + + this.setState({ + appDefinition: newAppDefinition, + }); + } + + if (Array.isArray(entityReferencesInQueryOptions) && entityReferencesInQueryOptions?.length > 0) { + let newQueryOptions = {}; + dataQueries?.forEach((query) => { + newQueryOptions[query.id] = query.options; + ``; + }); + + entityReferencesInQueryOptions.forEach((entity) => { + const entityrefExists = manager.has(entity); + + if (entityrefExists) { + const value = manager.get(entity); + newQueryOptions = dfs(newQueryOptions, entity, value); + } + }); + + dataQueries = dataQueries.map((query) => { + const queryId = query.id; + const dqOptions = newQueryOptions[queryId]; + + return { + ...query, + options: dqOptions, + }; + }); + + useDataQueriesStore.getState().actions.setDataQueries(dataQueries, 'mappingUpdate'); + } + + if (Array.isArray(entityReferencesInEvents) && entityReferencesInEvents?.length > 0) { + let newEvents = JSON.parse(JSON.stringify(allEvents)); + + entityReferencesInEvents.forEach((entity) => { + const entityrefExists = manager.has(entity); + + if (entityrefExists) { + const value = manager.get(entity); + newEvents = dfs(newEvents, entity, value); + } + }); + + this.props.updateState({ + events: newEvents, + }); + } + + computeComponentState(currentComponents).then(async () => { + this.setState({ initialComputationOfStateDone: true, defaultComponentStateComputed: true }); + useCurrentStateStore.getState().actions.setEditorReady(true); + + if (loadType === 'appload') { + this.runQueries(dataQueries); + } + + const currentPageEvents = this.state.events.filter( + (event) => event.target === 'page' && event.sourceId === this.state.currentPageId + ); + + await this.handleEvent('onPageLoad', currentPageEvents); }); }; @@ -198,7 +314,7 @@ class ViewerComponent extends React.Component { }); useEditorStore.getState().actions.toggleCurrentLayout(this.props?.currentLayout == 'mobile' ? 'mobile' : 'desktop'); this.props.updateState({ events: data.events ?? [] }); - const currentPageComponents = appDefData?.pages[currentPageId]?.components; + const currentPageComponents = appDefData?.pages[currentPage.id]?.components; if (currentPageComponents && !_.isEmpty(currentPageComponents)) { const referenceManager = useResolveStore.getState().referenceMapper; @@ -234,110 +350,7 @@ class ViewerComponent extends React.Component { events: data.events ?? [], }, () => { - // const components = appDefData?.pages[currentPageId]?.components || {}; - - const appJson = JSON.parse(JSON.stringify(appDefData)); - const currentPageId = useEditorStore.getState().currentPageId; - const currentComponents = useEditorStore.getState().appDefinition?.pages?.[currentPageId]?.components; - let dataQueries = JSON.parse(JSON.stringify(useDataQueriesStore.getState().dataQueries)); - let allEvents = JSON.parse(JSON.stringify(useAppDataStore.getState().events)); - - const entityReferencesInComponentDefinitions = findAllEntityReferences(currentComponents, [])?.filter( - (entity) => entity && isValidUUID(entity) - ); - - const entityReferencesInQueryOptions = findAllEntityReferences(dataQueries, [])?.filter( - (entity) => entity && isValidUUID(entity) - ); - - const entityReferencesInEvents = findAllEntityReferences(allEvents, [])?.filter( - (entity) => entity && isValidUUID(entity) - ); - - const manager = useResolveStore.getState().referenceMapper; - - if ( - Array.isArray(entityReferencesInComponentDefinitions) && - entityReferencesInComponentDefinitions?.length > 0 - ) { - let newComponentDefinition = JSON.parse(JSON.stringify(currentComponents)); - - entityReferencesInComponentDefinitions.forEach((entity) => { - const entityrefExists = manager.has(entity); - - if (entityrefExists) { - const value = manager.get(entity); - newComponentDefinition = dfs(newComponentDefinition, entity, value); - } - }); - - const newAppDefinition = produce(appJson, (draft) => { - draft.pages[homePageId].components = newComponentDefinition; - }); - - useEditorStore.getState().actions.updateEditorState({ - isUpdatingEditorStateInProcess: false, - appDefinition: newAppDefinition, - }); - } - - if (Array.isArray(entityReferencesInQueryOptions) && entityReferencesInQueryOptions?.length > 0) { - let newQueryOptions = {}; - dataQueries?.forEach((query) => { - newQueryOptions[query.id] = query.options; - ``; - }); - - entityReferencesInQueryOptions.forEach((entity) => { - const entityrefExists = manager.has(entity); - - if (entityrefExists) { - const value = manager.get(entity); - newQueryOptions = dfs(newQueryOptions, entity, value); - } - }); - - dataQueries = dataQueries.map((query) => { - const queryId = query.id; - const dqOptions = newQueryOptions[queryId]; - - return { - ...query, - options: dqOptions, - }; - }); - - useDataQueriesStore.getState().actions.setDataQueries(dataQueries, 'mappingUpdate'); - } - - if (Array.isArray(entityReferencesInEvents) && entityReferencesInEvents?.length > 0) { - let newEvents = JSON.parse(JSON.stringify(allEvents)); - - entityReferencesInEvents.forEach((entity) => { - const entityrefExists = manager.has(entity); - - if (entityrefExists) { - const value = manager.get(entity); - newEvents = dfs(newEvents, entity, value); - } - }); - - this.props.updateState({ - events: newEvents, - }); - } - - computeComponentState(currentComponents).then(async () => { - this.setState({ initialComputationOfStateDone: true, defaultComponentStateComputed: true }); - useCurrentStateStore.getState().actions.setEditorReady(true); - this.runQueries(dataQueries); - - const currentPageEvents = this.state.events.filter( - (event) => event.target === 'page' && event.sourceId === this.state.currentPageId - ); - - await this.handleEvent('onPageLoad', currentPageEvents); - }); + this.onViewerLoadUpdateEntityReferences(currentPage.id, 'appload'); } ); }; @@ -637,6 +650,8 @@ class ViewerComponent extends React.Component { const defaultParams = getPreviewQueryParams(); if (this.state.currentPageId === id) return; + useCurrentStateStore.getState().actions.setEditorReady(false); + useResolveStore.getState().actions.resetStore(); const { handle } = this.state.appDefinition.pages[id]; @@ -654,16 +669,43 @@ class ViewerComponent extends React.Component { ? `version=${navigationParams.version}` : ''; - this.props.navigate( - `/applications/${this.state.slug}/${handle}?${!_.isEmpty(defaultParams) ? navigationParamsString : ''}${ - queryParamsString ? `${!_.isEmpty(defaultParams) ? '&' : ''}${queryParamsString}` : '' - }`, - { - state: { - isSwitchingPage: true, - }, + useEditorStore.getState().actions.updateEditorState({ + currentPageId: id, + }); + + const currentPageComponents = this.state.appDefinition?.pages[id]?.components; + + if (currentPageComponents && !_.isEmpty(currentPageComponents)) { + const referenceManager = useResolveStore.getState().referenceMapper; + + const newComponents = Object.keys(currentPageComponents).map((componentId) => { + const component = currentPageComponents[componentId]; + + if (!referenceManager.get(componentId)) { + return { + id: componentId, + name: component.component.name, + }; + } + }); + + try { + useResolveStore.getState().actions.addEntitiesToMap(newComponents); + } catch (error) { + console.error(error); } - ); + } + + const toNavigate = `/applications/${this.state.slug}/${handle}?${ + !_.isEmpty(defaultParams) ? navigationParamsString : '' + }${queryParamsString ? `${!_.isEmpty(defaultParams) ? '&' : ''}${queryParamsString}` : ''}`; + + this.props.navigate(toNavigate, { + state: { + isSwitchingPage: true, + }, + }); + this.onViewerLoadUpdateEntityReferences(id, 'page-switch'); }; handleEvent = (eventName, events, options) => { @@ -890,11 +932,12 @@ class ViewerComponent extends React.Component { } const withStore = (Component) => (props) => { const currentState = useCurrentStateStore(); - const { currentLayout, queryConfirmationList, currentPageId } = useEditorStore( + const { currentLayout, queryConfirmationList, currentPageId, appDefinition } = useEditorStore( (state) => ({ currentLayout: state?.currentLayout, queryConfirmationList: state?.queryConfirmationList, currentPageId: state?.currentPageId, + appDefinition: state?.appDefinition, }), shallow ); @@ -920,13 +963,12 @@ const withStore = (Component) => (props) => { await new Promise((resolve) => setTimeout(resolve, 0)); } - // Flush only updated components flushComponentsToRender(updatedComponentIds); } React.useEffect(() => { if (lastUpdatedRef.length > 0) { - const currentComponents = useEditorStore.getState().appDefinition?.pages?.[currentPageId]?.components || {}; + const currentComponents = appDefinition?.pages?.[currentPageId]?.components || {}; const componentIdsWithReferences = findComponentsWithReferences(currentComponents, lastUpdatedRef); if (componentIdsWithReferences.length > 0) { From 291bd29ff9bfe89cff114e0c5220c9d05eaf57d4 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 9 Apr 2024 22:49:24 +0530 Subject: [PATCH 3/8] fixes: moving components via keyboard should update the editor --- frontend/src/Editor/Container.jsx | 2 +- frontend/src/Editor/Editor.jsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index d2d742209c..6787110c8a 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -189,7 +189,7 @@ export const Container = ({ } else { const diffState = diff(components, boxes); - if (!_.isEmpty(diffState) && !isOnlyLayoutUpdate(diffState)) { + if (!_.isEmpty(diffState)) { setBoxes(components); } } diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index ad6ec31dfa..2c11b6e848 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -1290,7 +1290,9 @@ const EditorComponent = (props) => { const _appDefinition = JSON.parse(JSON.stringify(appDefinition)); let newComponents = _appDefinition?.pages[currentPageId].components; const selectedComponents = useEditorStore.getState()?.selectedComponents; + const componentsIds = []; for (const selectedComponent of selectedComponents) { + componentsIds.push(selectedComponent.id); let top = newComponents[selectedComponent.id].layouts[currentLayout].top; let left = newComponents[selectedComponent.id].layouts[currentLayout].left; const width = newComponents[selectedComponent.id]?.layouts[currentLayout]?.width; @@ -1327,6 +1329,8 @@ const EditorComponent = (props) => { _appDefinition.pages[currentPageId].components = newComponents; appDefinitionChanged(_appDefinition, { containerChanges: true, widgetMovedWithKeyboard: true }); + // console.log('arpit::', { componentsIds }); + // updateComponentsNeedsUpdateOnNextRender(componentsIds); }; const copyComponents = () => From dfa441749bf935ba5c3d07a000c44a6203012f56 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 9 Apr 2024 23:16:19 +0530 Subject: [PATCH 4/8] fixes: adds expected to have () in the auto-complete for the component functions. --- frontend/src/Editor/CodeEditor/autocompleteExtensionConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Editor/CodeEditor/autocompleteExtensionConfig.js b/frontend/src/Editor/CodeEditor/autocompleteExtensionConfig.js index ab08f79e82..a85238987c 100644 --- a/frontend/src/Editor/CodeEditor/autocompleteExtensionConfig.js +++ b/frontend/src/Editor/CodeEditor/autocompleteExtensionConfig.js @@ -67,7 +67,7 @@ export const generateHints = (hints, totalReferences = 1) => { if (!hints) return []; const suggestions = hints.map(({ hint, type }) => { - let displayedHint = type === 'js_method' ? `${hint}()` : hint; + let displayedHint = type === 'js_method' || type === 'Function' ? `${hint}()` : hint; const maxHintLength = 20; const hintLength = displayedHint.length; From 50ca363f6ab7dc97c9475fcab759ddeb1df0cd52 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Tue, 9 Apr 2024 23:31:25 +0530 Subject: [PATCH 5/8] fixes; generate hints as per multi-references typed by the usr --- frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx index 0b620851be..cb834b0498 100644 --- a/frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx +++ b/frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx @@ -130,7 +130,7 @@ const EditorInput = ({ if (totalReferences > 1) { const currentWord = queryInput.split('{{').pop().split('}}')[0]; - queryInput = currentWord; + queryInput = '{{' + currentWord + '}}'; } let completions = getAutocompletion(queryInput, validationType, hints, totalReferences); From a12ca9fed88abc9e92e2e0d05e27a4433a1be72a Mon Sep 17 00:00:00 2001 From: arpitnath Date: Wed, 10 Apr 2024 02:13:39 +0530 Subject: [PATCH 6/8] Remove requestIdleCallback to resolve drag-and-drop UI freezing This commit removes the use of handleLowPriorityWork with requestIdleCallback, which previously deferred state updates of draggable components to the browser's idle periods. This change ensures immediate state updates during drag-and-drop actions, providing a smoother and more responsive user experience. --- frontend/src/Editor/Container.jsx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 6787110c8a..416e7a6b0e 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -594,23 +594,21 @@ export const Container = ({ ...updatedBoxes, }; - handleLowPriorityWork(() => { - const diffState = diff(boxes, newBoxes); + const diffState = diff(boxes, newBoxes); - setBoxes((prev) => { - const updatedComponentsAsperDiff = Object.keys(diffState).reduce((acc, key) => { - const component = newBoxes[key]; - if (component) { - acc[key] = component; - } - return acc; - }, {}); + setBoxes((prev) => { + const updatedComponentsAsperDiff = Object.keys(diffState).reduce((acc, key) => { + const component = newBoxes[key]; + if (component) { + acc[key] = component; + } + return acc; + }, {}); - return { - ...prev, - ...updatedComponentsAsperDiff, - }; - }); + return { + ...prev, + ...updatedComponentsAsperDiff, + }; }); updateCanvasHeight(newBoxes); From 4745d0019cd42e64f68c169fc9d45a6df5df7bda Mon Sep 17 00:00:00 2001 From: arpitnath Date: Thu, 11 Apr 2024 11:35:18 +0530 Subject: [PATCH 7/8] fixes: editor crash on switching versions from viewer --- frontend/src/Editor/Container.jsx | 4 +++- frontend/src/Editor/Viewer.jsx | 13 ++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 416e7a6b0e..10e9e63e23 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -244,6 +244,8 @@ export const Container = ({ return; } + if (!appDefinition.pages[currentPageId]?.components) return; + const newDefinition = { ...appDefinition, pages: { @@ -251,7 +253,7 @@ export const Container = ({ [currentPageId]: { ...appDefinition.pages[currentPageId], components: { - ...appDefinition.pages[currentPageId].components, + ...appDefinition.pages[currentPageId]?.components, ...boxes, }, }, diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index f8e38250f1..5075d5e7c5 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -709,7 +709,18 @@ class ViewerComponent extends React.Component { }; handleEvent = (eventName, events, options) => { - return onEvent(this.getViewerRef(), eventName, events, options, 'view'); + const latestEvents = useAppDataStore.getState().events; + + const filteredEvents = latestEvents.filter((event) => { + const foundEvent = events.find((e) => e.id === event.id); + return foundEvent && foundEvent.name === eventName; + }); + + try { + return onEvent(this.getViewerRef(), eventName, filteredEvents, options, 'view'); + } catch (error) { + console.error(error); + } }; computeCanvasMaxWidth = () => { From 91897d5865a4b5a7f600a4bb73f3b17c158e1d27 Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Thu, 11 Apr 2024 18:28:57 +0530 Subject: [PATCH 8/8] Moved currentState out of Editor & Container --- frontend/src/Editor/Container.jsx | 9 +++++---- frontend/src/Editor/Editor.jsx | 14 ++++++-------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 10e9e63e23..98a2cf6382 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -13,7 +13,6 @@ import config from 'config'; import Spinner from '@/_ui/Spinner'; import { useHotkeys } from 'react-hotkeys-hook'; import { addComponents, addNewWidgetToTheEditor, isPDFSupported } from '@/_helpers/appUtils'; -import { useCurrentState } from '@/_stores/currentStateStore'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useEditorStore } from '@/_stores/editorStore'; import { useAppInfo } from '@/_stores/appDataStore'; @@ -31,7 +30,7 @@ import { useDraggedSubContainer, useGridStore } from '@/_stores/gridStore'; const deviceWindowWidth = EditorConstants.deviceWindowWidth; export const Container = ({ - canvasWidth, + widthOfCanvas, mode, snapToGrid, onComponentClick, @@ -72,10 +71,13 @@ export const Container = ({ shallow ); + const canvasWidth = widthOfCanvas + ? widthOfCanvas + : document.getElementsByClassName('canvas-area')[0]?.getBoundingClientRect()?.width; const gridWidth = canvasWidth / noOfGrids; + const { appId } = useAppInfo(); - const currentState = useCurrentState(); const { appVersionsId, isVersionReleased } = useAppVersionStore( (state) => ({ appVersionsId: state?.editingVersion?.id, @@ -762,7 +764,6 @@ export const Container = ({ onEvent, appDefinition, appDefinitionChanged, - currentState, appLoading, zoomLevel, setSelectedComponent, diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index 2c11b6e848..ae031d9268 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -59,7 +59,7 @@ import { useDataSourcesStore } from '@/_stores/dataSourcesStore'; import { useDataQueriesStore } from '@/_stores/dataQueriesStore'; import { useAppVersionStore, useAppVersionActions } from '@/_stores/appVersionStore'; import { useQueryPanelStore } from '@/_stores/queryPanelStore'; -import { useCurrentStateStore, useCurrentState, getCurrentState } from '@/_stores/currentStateStore'; +import { useCurrentStateStore, getCurrentState } from '@/_stores/currentStateStore'; import { computeAppDiff, computeComponentPropertyDiff, @@ -184,8 +184,6 @@ const EditorComponent = (props) => { shallow ); - const currentState = useCurrentState(); - const [zoomLevel, setZoomLevel] = useState(1); const [isQueryPaneDragging, setIsQueryPaneDragging] = useState(false); const [isQueryPaneExpanded, setIsQueryPaneExpanded] = useState(false); //!check where this is used @@ -241,7 +239,7 @@ const EditorComponent = (props) => { }); useCurrentStateStore.getState().actions.setCurrentState({ globals: { - ...currentState.globals, + ...getCurrentState().globals, theme: { name: props?.darkMode ? 'dark' : 'light' }, urlparams: JSON.parse(JSON.stringify(queryString.parse(props.location.search))), currentUser: userVars, @@ -621,7 +619,7 @@ const EditorComponent = (props) => { const changeDarkMode = (newMode) => { useCurrentStateStore.getState().actions.setCurrentState({ globals: { - ...currentState.globals, + ...getCurrentState().globals, theme: { name: newMode ? 'dark' : 'light' }, }, }); @@ -1618,7 +1616,7 @@ const EditorComponent = (props) => { }; const globals = { - ...currentState.globals, + ...getCurrentState().globals, }; useCurrentStateStore.getState().actions.setCurrentState({ globals, page }); }; @@ -1660,7 +1658,7 @@ const EditorComponent = (props) => { const queryParamsString = queryParams.map(([key, value]) => `${key}=${value}`).join('&'); const globals = { - ...currentState.globals, + ...getCurrentState().globals, urlparams: JSON.parse(JSON.stringify(queryString.parse(queryParamsString))), }; @@ -2098,7 +2096,7 @@ const EditorComponent = (props) => { {defaultComponentStateComputed && ( <>