From 18363a5bc1c14d5e14bbe5faba7a1a8c29337596 Mon Sep 17 00:00:00 2001 From: Arpit Date: Mon, 16 Oct 2023 15:43:38 +0530 Subject: [PATCH] fixes: fixes on on app load switch page action via run queires (#7858) * fixes: fixes on on app load switch page action via run queires * Fix * refactor * Fix on load event not appearing on viewer --------- Co-authored-by: Nakul Nagargade --- frontend/src/Editor/Container.jsx | 10 +++--- frontend/src/Editor/EditorFunc.jsx | 39 +++++++++++++++++++----- frontend/src/Editor/Viewer.jsx | 16 +++++----- frontend/src/_stores/dataQueriesStore.js | 4 +-- frontend/src/_stores/editorStore.js | 2 ++ 5 files changed, 49 insertions(+), 22 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index e13fa3a277..19d2eb7bf2 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -413,17 +413,17 @@ export const Container = ({ const paramUpdated = useCallback( (id, param, value) => { - if (Object.keys(value).length > 0) { + if (boxes.length && Object.keys(value)?.length > 0) { setBoxes((boxes) => update(boxes, { [id]: { $merge: { component: { - ...boxes[id].component, + ...boxes[id]?.component, definition: { - ...boxes[id].component.definition, + ...boxes[id]?.component?.definition, properties: { - ...boxes[id].component.definition.properties, + ...boxes?.[id]?.component?.definition?.properties, [param]: value, }, }, @@ -434,7 +434,7 @@ export const Container = ({ ); } }, - [setBoxes] + [boxes, setBoxes] ); const handleAddThread = async (e) => { diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index bc9909cffc..116e288131 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -29,6 +29,7 @@ import { removeSelectedComponent, buildAppDefinition, buildComponentMetaDefinition, + runQueries, } from '@/_helpers/appUtils'; import { Confirm } from './Viewer/Confirm'; import { Tooltip as ReactTooltip } from 'react-tooltip'; @@ -55,11 +56,11 @@ import { useDataSourcesStore } from '@/_stores/dataSourcesStore'; import { useDataQueries, useDataQueriesStore } from '@/_stores/dataQueriesStore'; import { useAppVersionStore, useAppVersionActions, useAppVersionState } from '@/_stores/appVersionStore'; import { useQueryPanelStore } from '@/_stores/queryPanelStore'; -import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore'; +import { useCurrentStateStore, useCurrentState, getCurrentState } from '@/_stores/currentStateStore'; import { computeAppDiff, computeComponentPropertyDiff, isParamFromTableColumn, resetAllStores } from '@/_stores/utils'; import { setCookie } from '@/_helpers/cookie'; import { useEditorActions, useEditorState, useEditorStore } from '@/_stores/editorStore'; -import { useAppDataActions, useAppInfo } from '@/_stores/appDataStore'; +import { useAppDataActions, useAppInfo, useAppDataStore } from '@/_stores/appDataStore'; import { useMounted } from '@/_hooks/use-mount'; // eslint-disable-next-line import/no-unresolved import { diff } from 'deep-object-diff'; @@ -81,7 +82,8 @@ const EditorComponent = (props) => { const { updateState, updateAppDefinitionDiff, updateAppVersion, setIsSaving, createAppVersionEventHandlers } = useAppDataActions(); - const { updateEditorState, updateQueryConfirmationList, setSelectedComponents } = useEditorActions(); + const { updateEditorState, updateQueryConfirmationList, setSelectedComponents, setCurrentPageId } = + useEditorActions(); const { setAppVersions } = useAppVersionActions(); const { isVersionReleased, editingVersion, releasedVersionId } = useAppVersionState(); @@ -101,6 +103,7 @@ const EditorComponent = (props) => { showComments, showLeftSidebar, queryConfirmationList, + currentPageId, } = useEditorState(); const dataQueries = useDataQueries(); @@ -121,7 +124,6 @@ const EditorComponent = (props) => { const currentState = useCurrentState(); - const [currentPageId, setCurrentPageId] = useState(null); const [zoomLevel, setZoomLevel] = useState(1); const [isQueryPaneDragging, setIsQueryPaneDragging] = useState(false); const [isQueryPaneExpanded, setIsQueryPaneExpanded] = useState(false); //!check where this is used @@ -275,6 +277,18 @@ const EditorComponent = (props) => { } }; + const getEditorRef = () => { + const editorRef = { + appDefinition: useEditorStore.getState().appDefinition, + queryConfirmationList: useEditorStore.getState().queryConfirmationList, + updateQueryConfirmationList: updateQueryConfirmationList, + navigate: props.navigate, + switchPage: switchPage, + currentPageId: useEditorStore.getState().currentPageId, + }; + return editorRef; + }; + const fetchApps = async (page) => { const { apps } = await appService.getAll(page); @@ -391,7 +405,10 @@ const EditorComponent = (props) => { }; const fetchDataQueries = async (id, selectFirstQuery = false, runQueriesOnAppLoad = false) => { - await useDataQueriesStore.getState().actions.fetchDataQueries(id, selectFirstQuery, runQueriesOnAppLoad); + // // editorRef can be undefined when runQueriesOnAppLoad + await useDataQueriesStore + .getState() + .actions.fetchDataQueries(id, selectFirstQuery, runQueriesOnAppLoad, getEditorRef()); }; const fetchDataSources = (id) => { @@ -528,7 +545,7 @@ const EditorComponent = (props) => { }; const handleEvent = (eventName, event, options) => { - return onEvent(editorRef, eventName, event, options, 'edit'); + return onEvent(getEditorRef(), eventName, event, options, 'edit'); }; const handleRunQuery = (queryId, queryName) => runQuery(editorRef, queryId, queryName); @@ -705,7 +722,7 @@ const EditorComponent = (props) => { await fetchDataQueries(data.editing_version?.id, true, true); const currentPageEvents = data.events.filter((event) => event.target === 'page' && event.sourceId === homePageId); - await handleEvent('onPageLoad', currentPageEvents); + await handleEvent('onPageLoad', currentPageEvents, {}, true); }; const fetchApp = async (startingPageHandle, onMount = false) => { @@ -1270,7 +1287,13 @@ const EditorComponent = (props) => { }; const switchPage = (pageId, queryParams = []) => { - if (currentPageId === pageId && currentState.page.handle === appDefinition?.pages[pageId]?.handle) { + // This are fetched from store to handle runQueriesOnAppLoad + const currentPageId = useEditorStore.getState().currentPageId; + const appDefinition = useEditorStore.getState().appDefinition; + const appId = useAppDataStore.getState()?.appId; + const pageHandle = getCurrentState().pageHandle; + + if (currentPageId === pageId && pageHandle === appDefinition?.pages[pageId]?.handle) { return; } const { name, handle } = appDefinition.pages[pageId]; diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index e87724e976..4583505b90 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -226,7 +226,7 @@ class ViewerComponent extends React.Component { runQueries = (data_queries) => { data_queries.forEach((query) => { if (query.options.runOnPageLoad && isQueryRunnable(query)) { - runQuery(this, query.id, query.name, undefined, 'view'); + runQuery(this.getViewerRef(), query.id, query.name, undefined, 'view'); } }); }; @@ -553,17 +553,19 @@ class ViewerComponent extends React.Component { ); }; - handleEvent = (eventName, events, options) => { - const { appDefinition, currentPageId } = this.state; - const viewerRef = { - appDefinition: appDefinition, + getViewerRef() { + return { + appDefinition: this.state.appDefinition, queryConfirmationList: this.props.queryConfirmationList, updateQueryConfirmationList: this.updateQueryConfirmationList, navigate: this.props.navigate, switchPage: this.switchPage, - currentPageId: currentPageId, + currentPageId: this.state.currentPageId, }; - onEvent(viewerRef, eventName, events, options, 'view'); + } + + handleEvent = (eventName, events, options) => { + onEvent(this.getViewerRef(), eventName, events, options, 'view'); }; computeCanvasMaxWidth = () => { diff --git a/frontend/src/_stores/dataQueriesStore.js b/frontend/src/_stores/dataQueriesStore.js index 557e690435..72f4e22c99 100644 --- a/frontend/src/_stores/dataQueriesStore.js +++ b/frontend/src/_stores/dataQueriesStore.js @@ -31,7 +31,7 @@ export const useDataQueriesStore = create( ...initialState, actions: { // TODO: Remove editor state while changing currentState - fetchDataQueries: async (appVersionId, selectFirstQuery = false, runQueriesOnAppLoad = false) => { + fetchDataQueries: async (appVersionId, selectFirstQuery = false, runQueriesOnAppLoad = false, ref) => { set({ loadingDataQueries: true }); const data = await dataqueryService.getAll(appVersionId); set((state) => ({ @@ -62,7 +62,7 @@ export const useDataQueriesStore = create( } // Runs query on loading application - if (runQueriesOnAppLoad) runQueries(data.data_queries, {}); + if (runQueriesOnAppLoad) runQueries(data.data_queries, ref); }, setDataQueries: (dataQueries) => set({ dataQueries }), deleteDataQueries: (queryId) => { diff --git a/frontend/src/_stores/editorStore.js b/frontend/src/_stores/editorStore.js index 82d86fbe36..a42dc2ae88 100644 --- a/frontend/src/_stores/editorStore.js +++ b/frontend/src/_stores/editorStore.js @@ -38,6 +38,7 @@ const initialState = { defaultComponentStateComputed: false, showLeftSidebar: true, queryConfirmationList: [], + currentPageId: null, }; export const useEditorStore = create( @@ -85,6 +86,7 @@ export const useEditorStore = create( selectedComponents: newSelectedComponents, }); }, + setCurrentPageId: (currentPageId) => set({ currentPageId }), }, }), { name: STORE_NAME }