From 78513b0298df86930e8bf751cd80cb37262db251 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Thu, 24 Oct 2019 14:53:50 +0530 Subject: [PATCH] WIP: Trigger Preview and Publish Api --- app/client/src/actions/pageActions.tsx | 1 - app/client/src/api/PageApi.tsx | 5 +- .../src/constants/ReduxActionConstants.tsx | 6 ++ app/client/src/pages/Editor/EditorHeader.tsx | 24 ++++++++ app/client/src/pages/Editor/index.tsx | 56 ++++++++++++++++++- .../src/reducers/uiReducers/editorReducer.tsx | 1 - app/client/src/sagas/ApplicationSagas.tsx | 6 +- app/client/src/sagas/PageSagas.tsx | 23 ++++++-- app/client/src/sagas/index.tsx | 2 + app/client/src/selectors/editorSelectors.tsx | 5 ++ 10 files changed, 117 insertions(+), 12 deletions(-) diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 248edb4d5f..1b2fc3c1f6 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -126,7 +126,6 @@ export const updateWidget = ( ): ReduxAction< WidgetAddChild | WidgetMove | WidgetRemoveChild | WidgetResize | WidgetDelete > => { - console.log(operation, widgetId, payload); return { type: ReduxActionTypes["WIDGET_" + operation], payload: { widgetId, ...payload }, diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx index 5379043585..22a89345c4 100644 --- a/app/client/src/api/PageApi.tsx +++ b/app/client/src/api/PageApi.tsx @@ -37,7 +37,10 @@ export type FetchPageResponse = ApiResponse & { }; export type FetchPublishedPageResponse = ApiResponse & { - data: {}; + data: { + id: string; + dsl: Partial>; + }; }; export interface SavePageResponse extends ApiResponse { diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 27d6ff8aab..54ecc50ace 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -102,6 +102,12 @@ export interface UpdateCanvasPayload { currentApplicationId: string; } +export interface LayoutPayload { + layoutId: string; + pageId: string; + widgets: { [widgetId: string]: WidgetProps }; +} + export interface ShowPropertyPanePayload { widgetId: string; node: RefObject; diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx index b29af5a434..fc50c643de 100644 --- a/app/client/src/pages/Editor/EditorHeader.tsx +++ b/app/client/src/pages/Editor/EditorHeader.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { Breadcrumbs, IBreadcrumbProps, Spinner } from "@blueprintjs/core"; +import { BaseButton } from "../../components/canvas/Button"; const Header = styled.header` display: flex; @@ -20,6 +21,13 @@ const NotificationText = styled.div` flex-grow: 1; `; +const PreviewPublishSection = styled.div` + display: flex; + justify-content: space-evenly; + align-items: center; + flex-grow: 1; +`; + const StretchedBreadCrumb = styled(Breadcrumbs)` flex-grow: 10; * { @@ -34,6 +42,8 @@ const StretchedBreadCrumb = styled(Breadcrumbs)` type EditorHeaderProps = { notificationText?: string; pageName: string; + onPublish: React.FormEventHandler; + onPreview: React.FormEventHandler; }; export const EditorHeader = (props: EditorHeaderProps) => { @@ -50,6 +60,20 @@ export const EditorHeader = (props: EditorHeaderProps) => { {props.notificationText && } {props.notificationText} + + + + ); }; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index f159c973e3..d4f616de03 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -6,6 +6,12 @@ import EditorHeader from "./EditorHeader"; import EditorsRouter from "./routes"; import NavBar from "../../components/editor/NavBar"; import WidgetsEditor from "./WidgetsEditor"; +import { + getCurrentApplicationId, + getCurrentLayoutId, + getCurrentPageId, +} from "../../selectors/editorSelectors"; +import { ReduxActionTypes } from "../../constants/ReduxActionConstants"; const MainContainer = styled.div` display: flex; @@ -14,15 +20,33 @@ const MainContainer = styled.div` type EditorProps = { currentPageName: string; isSaving: boolean; + currentApplicationId?: string; + currentLayoutId: string; + currentPageId: string; + publishApplication: Function; + previewPage: Function; }; class Editor extends Component { + handlePublish = () => { + if (this.props.currentApplicationId) + this.props.publishApplication(this.props.currentApplicationId); + }; + handlePreview = () => { + this.props.previewPage( + this.props.currentPageId, + this.props.currentLayoutId, + ); + //TODO(abhinav): Add logic to open in a different tab. + }; public render() { return (
@@ -34,9 +58,37 @@ class Editor extends Component { } } -const mapStateToProps = (state: AppState): EditorProps => ({ +const mapStateToProps = (state: AppState) => ({ currentPageName: state.ui.editor.currentPageName, isSaving: state.ui.editor.isSaving, + currentApplicationId: getCurrentApplicationId(state), + currentPageId: getCurrentPageId(state), + currentLayoutId: getCurrentLayoutId(state), }); -export default connect(mapStateToProps)(Editor); +const mapDispatchToProps = (dispatch: any) => { + return { + publishApplication: (applicationId: string) => { + dispatch({ + type: ReduxActionTypes.PUBLISH_APPLICATION_INIT, + payload: { + applicationId, + }, + }); + }, + previewPage: (pageId: string, layoutId: string) => { + dispatch({ + type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT, + payload: { + pageId, + layoutId, + }, + }); + }, + }; +}; + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(Editor); diff --git a/app/client/src/reducers/uiReducers/editorReducer.tsx b/app/client/src/reducers/uiReducers/editorReducer.tsx index 225022e562..06e59d0c8f 100644 --- a/app/client/src/reducers/uiReducers/editorReducer.tsx +++ b/app/client/src/reducers/uiReducers/editorReducer.tsx @@ -26,7 +26,6 @@ const editorReducer = createReducer(initialState, { state: EditorReduxState, action: ReduxAction, ) => { - console.log(action.payload); const { currentPageId, currentPageName, diff --git a/app/client/src/sagas/ApplicationSagas.tsx b/app/client/src/sagas/ApplicationSagas.tsx index 82685db1f6..6ffffe508e 100644 --- a/app/client/src/sagas/ApplicationSagas.tsx +++ b/app/client/src/sagas/ApplicationSagas.tsx @@ -22,7 +22,9 @@ export function* publishApplicationSaga( ); const isValidResponse = yield validateResponse(response); if (isValidResponse) { - console.log(response); + yield put({ + type: ReduxActionTypes.PUBLISH_APPLICATION_SUCCESS, + }); } } catch (error) { yield put({ @@ -34,7 +36,7 @@ export function* publishApplicationSaga( } } -export default function* pageSagas() { +export default function* applicationSagas() { yield all([ takeLatest( ReduxActionTypes.PUBLISH_APPLICATION_INIT, diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index a5fdeb8152..2c6d985295 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -4,6 +4,7 @@ import { ReduxActionErrorTypes, ReduxAction, UpdateCanvasPayload, + LayoutPayload, } from "../constants/ReduxActionConstants"; import { updateCanvas, savePageSuccess } from "../actions/pageActions"; import PageApi, { @@ -72,14 +73,26 @@ export function* fetchPublishedPageSaga( pageRequestAction: ReduxAction, ) { try { - const pageRequest = pageRequestAction.payload; - const fetchPublishedPageResponse: FetchPublishedPageResponse = yield call( + const request: FetchPublishedPageRequest = pageRequestAction.payload; + const response: FetchPublishedPageResponse = yield call( PageApi.fetchPublishedPage, - pageRequest, + request, ); - const isValidResponse = yield validateResponse(fetchPublishedPageResponse); + const isValidResponse = yield validateResponse(response); if (isValidResponse) { - console.log(fetchPublishedPageResponse); + const normalizedResponse = CanvasWidgetsNormalizer.normalize( + response.data.dsl, + ); + const layoutPayload: LayoutPayload = { + widgets: normalizedResponse, + layoutId: response.data.id, + pageId: request.pageId, + }; + + yield put({ + type: ReduxActionTypes.FETCH_PUBLISED_PAGE_SUCCESS, + payload: layoutPayload, + }); } } catch (error) { yield put({ diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx index bab99a2020..e8fda26751 100644 --- a/app/client/src/sagas/index.tsx +++ b/app/client/src/sagas/index.tsx @@ -5,6 +5,7 @@ import { watchActionSagas } from "./ActionSagas"; import widgetOperationSagas from "./WidgetOperationSagas"; import errorSagas from "./ErrorSagas"; import configsSagas from "./ConfigsSagas"; +import applicationSagas from "./ApplicationSagas"; import { watchResourcesSagas } from "./ResourcesSagas"; export function* rootSaga() { yield all([ @@ -15,5 +16,6 @@ export function* rootSaga() { spawn(errorSagas), spawn(configsSagas), spawn(watchResourcesSagas), + spawn(applicationSagas), ]); } diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index 7ff90a64b7..5dbe4e2a44 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -38,6 +38,11 @@ export const getCurrentPageName = createSelector( (editor: EditorReduxState) => editor.currentPageName, ); +export const getCurrentApplicationId = createSelector( + getEditorState, + (editor: EditorReduxState) => editor.currentApplicationId, +); + export const getIsPageSaving = createSelector( getEditorState, (editor: EditorReduxState) => editor.isSaving,