From e3e0a3517882ef035ddf4873668dceea2c016df5 Mon Sep 17 00:00:00 2001 From: arpitnath Date: Sun, 10 Sep 2023 14:01:16 +0530 Subject: [PATCH] minor fixes --- frontend/src/Editor/EditorFunc.jsx | 2 +- frontend/src/Editor/Viewer.jsx | 84 +++++++++++++----------- frontend/src/_stores/dataQueriesStore.js | 4 +- 3 files changed, 50 insertions(+), 40 deletions(-) diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 68341f46dc..3e1866027a 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -1435,7 +1435,7 @@ const EditorComponent = (props) => { const currentState = props?.currentState; const editingVersion = props?.editingVersion; const appVersionPreviewLink = editingVersion - ? `/applications/${app.id}/versions/${editingVersion.id}/${currentState.page.handle}` + ? `/applications/${appId}/versions/${editingVersion.id}/${currentState.page.handle}` : ''; const deviceWindowWidth = 450; diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index 961dd087c8..38f23f246a 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -1,5 +1,11 @@ import React from 'react'; -import { appService, authenticationService, orgEnvironmentVariableService, organizationService } from '@/_services'; +import { + appService, + authenticationService, + dataqueryService, + orgEnvironmentVariableService, + organizationService, +} from '@/_services'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { Container } from './Container'; @@ -13,6 +19,7 @@ import { onEvent, runQuery, computeComponentState, + buildAppDefinition, } from '@/_helpers/appUtils'; import queryString from 'query-string'; import ViewerLogoIcon from './Icons/viewer-logo.svg'; @@ -71,23 +78,20 @@ class ViewerComponent extends React.Component { } setStateForApp = (data) => { - const copyDefinition = _.cloneDeep(data.definition); - const pagesObj = copyDefinition.pages || {}; - - const newDefinition = { - ...copyDefinition, - pages: pagesObj, - }; + const appDefData = buildAppDefinition(data); + // console.log('-----mohaan appDefData', { appDefData }); this.setState({ app: data, isLoading: false, isAppLoaded: true, - appDefinition: newDefinition || { components: {} }, + appDefinition: { ...appDefData }, }); }; - setStateForContainer = async (data) => { + setStateForContainer = async (data, appVersionId) => { + console.log('-----mohaan viewer2.0', { data }); + const appDefData = buildAppDefinition(data); const currentUser = this.state.currentUser; let userVars = {}; @@ -110,30 +114,34 @@ class ViewerComponent extends React.Component { } let queryState = {}; - data.data_queries.forEach((query) => { - if (query.pluginId || query?.plugin?.id) { - queryState[query.name] = { - ...query.plugin.manifestFile.data.source.exposedVariables, - ...this.props.currentState.queries[query.name], - }; - } else { - const dataSourceTypeDetail = DataSourceTypes.find((source) => source.kind === query.kind); - queryState[query.name] = { - ...dataSourceTypeDetail.exposedVariables, - ...this.props.currentState.queries[query.name], - }; - } - }); + const { data_queries } = await dataqueryService.getAll(appVersionId); + + if (data_queries.length > 0) { + data_queries.forEach((query) => { + if (query.pluginId || query?.plugin?.id) { + queryState[query.name] = { + ...query.plugin.manifestFile.data.source.exposedVariables, + ...this.props.currentState.queries[query.name], + }; + } else { + const dataSourceTypeDetail = DataSourceTypes.find((source) => source.kind === query.kind); + queryState[query.name] = { + ...dataSourceTypeDetail.exposedVariables, + ...this.props.currentState.queries[query.name], + }; + } + }); + } const variables = await this.fetchOrgEnvironmentVariables(data.slug, data.is_public); - const pages = Object.entries(data.definition.pages).map(([pageId, page]) => ({ id: pageId, ...page })); - const homePageId = data.definition.homePageId; + const pages = data.pages; + const homePageId = data.editing_version.homePageId; const startingPageHandle = this.props?.params?.pageHandle; const currentPageId = pages.filter((page) => page.handle === startingPageHandle)[0]?.id ?? homePageId; const currentPage = pages.find((page) => page.id === currentPageId); - useDataQueriesStore.getState().actions.setDataQueries(data.data_queries); + useDataQueriesStore.getState().actions.setDataQueries(data_queries); this.props.setCurrentState({ queries: queryState, components: {}, @@ -163,21 +171,23 @@ class ViewerComponent extends React.Component { ? `${this.state.deviceWindowWidth}px` : '1292px', selectedComponent: null, - dataQueries: data.data_queries, + dataQueries: data_queries, currentPageId: currentPage.id, pages: {}, - homepage: this.state.appDefinition?.pages?.[this.state.appDefinition?.homePageId]?.handle, + homepage: appDefData?.pages?.[this.state.appDefinition?.homePageId]?.handle, }, () => { - computeComponentState(data?.definition?.pages[currentPage.id]?.components).then(async () => { - this.setState({ initialComputationOfStateDone: true }); + const components = appDefData?.pages[currentPageId]?.components || {}; + + computeComponentState(components).then(async () => { + this.setState({ initialComputationOfStateDone: true, defaultComponentStateComputed: true }); console.log('Default component state computed and set'); - this.runQueries(data.data_queries); + this.runQueries(data_queries); // eslint-disable-next-line no-unsafe-optional-chaining - const { events } = this.state.appDefinition?.pages[this.state.currentPageId]; - for (const event of events ?? []) { - await this.handleEvent(event.eventId, event); - } + // const { events } = this.state.appDefinition?.pages[this.state.currentPageId]; + // for (const event of events ?? []) { + // await this.handleEvent(event.eventId, event); + // } }); } ); @@ -234,7 +244,7 @@ class ViewerComponent extends React.Component { .getAppByVersion(appId, versionId) .then((data) => { this.setStateForApp(data); - this.setStateForContainer(data); + this.setStateForContainer(data, versionId); }) .catch((error) => { this.setState({ diff --git a/frontend/src/_stores/dataQueriesStore.js b/frontend/src/_stores/dataQueriesStore.js index b8d9d41d54..9decb786be 100644 --- a/frontend/src/_stores/dataQueriesStore.js +++ b/frontend/src/_stores/dataQueriesStore.js @@ -26,9 +26,9 @@ export const useDataQueriesStore = create( ...initialState, actions: { // TODO: Remove editor state while changing currentState - fetchDataQueries: async (appId, selectFirstQuery = false, runQueriesOnAppLoad = false) => { + fetchDataQueries: async (appVersionId, selectFirstQuery = false, runQueriesOnAppLoad = false) => { set({ loadingDataQueries: true }); - const data = await dataqueryService.getAll(appId); + const data = await dataqueryService.getAll(appVersionId); set((state) => ({ dataQueries: sortByAttribute(data.data_queries, state.sortBy, state.sortOrder), loadingDataQueries: false,