From e3ecb9974adc3918413443a0ff44eed7d6ba1cc1 Mon Sep 17 00:00:00 2001 From: Nikhil Nandgopal Date: Sat, 30 Mar 2019 18:00:42 +0530 Subject: [PATCH] added action creators to pass actions to sagas --- app/client/src/actions/pageActions.tsx | 16 ++++++++++++++ app/client/src/api/Api.tsx | 14 +++++++----- app/client/src/api/PageApi.tsx | 21 +++++++++++++++--- app/client/src/constants/ActionConstants.tsx | 3 +++ app/client/src/index.tsx | 3 +-- app/client/src/pages/Editor/Canvas.tsx | 11 ++++++---- app/client/src/sagas/CanvasSagas.tsx | 23 -------------------- app/client/src/sagas/PageSagas.tsx | 22 +++++++++++++++++++ app/client/src/sagas/index.tsx | 4 ++-- 9 files changed, 78 insertions(+), 39 deletions(-) create mode 100644 app/client/src/actions/pageActions.tsx delete mode 100644 app/client/src/sagas/CanvasSagas.tsx create mode 100644 app/client/src/sagas/PageSagas.tsx diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx new file mode 100644 index 0000000000..2fe48582fa --- /dev/null +++ b/app/client/src/actions/pageActions.tsx @@ -0,0 +1,16 @@ +import { + ReduxAction, + ActionTypes +} from "../constants/ActionConstants" +import { PageRequest } from "../api/PageApi" +import { RenderMode } from "../constants/WidgetConstants"; + +export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction => { + return { + type: ActionTypes.FETCH_PAGE, + payload: { + pageId: pageId, + renderMode: renderMode + } + } +} diff --git a/app/client/src/api/Api.tsx b/app/client/src/api/Api.tsx index c900a2757d..c685a29589 100644 --- a/app/client/src/api/Api.tsx +++ b/app/client/src/api/Api.tsx @@ -52,11 +52,15 @@ class Api { } static convertObjectToQueryParams(object: any): string { - const paramArray: string[] = _.map(_.keys(object), key => { - return encodeURIComponent(key) + "=" + encodeURIComponent(object[key]) - }) - return "?" + _.join(paramArray, "&") + if (!_.isNil(object)) { + const paramArray: string[] = _.map(_.keys(object), key => { + return encodeURIComponent(key) + "=" + encodeURIComponent(object[key]) + }) + return "?" + _.join(paramArray, "&") + } else { + return "" + } } } -export default Api \ No newline at end of file +export default Api diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx index fbfe6dbc69..b228590964 100644 --- a/app/client/src/api/PageApi.tsx +++ b/app/client/src/api/PageApi.tsx @@ -1,21 +1,36 @@ import Api from "./Api" import { IContainerWidgetProps } from "../widgets/ContainerWidget" import { ApiResponse } from "./ApiResponses" +import { RenderMode } from "../constants/WidgetConstants"; export interface PageRequest { - pageId: string + pageId: string, + renderMode: RenderMode +} + +export interface SavePageRequest { + pageWidget: IContainerWidgetProps } export interface PageResponse extends ApiResponse { pageWidget: IContainerWidgetProps } +export interface SavePageResponse { + pageId: string +} + class PageApi extends Api { - static url: string = "/page/" + static url: string = "/page" static fetchPage(pageRequest: PageRequest): Promise { - return Api.get(PageApi.url + pageRequest.pageId, pageRequest) + return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest) } + + static savePage(savePageRequest: SavePageRequest): Promise { + return Api.post(PageApi.url, undefined, savePageRequest) + } + } export default PageApi diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx index 957966faf6..4fb455989b 100644 --- a/app/client/src/constants/ActionConstants.tsx +++ b/app/client/src/constants/ActionConstants.tsx @@ -8,10 +8,13 @@ export type ActionType = | "DROP_WIDGET_CANVAS" | "REMOVE_WIDGET_CANVAS" | "LOAD_WIDGET_PANE" + | "FETCH_PAGE" + export const ActionTypes: { [id: string]: ActionType } = { UPDATE_CANVAS: "UPDATE_CANVAS", FETCH_CANVAS: "FETCH_CANVAS", CLEAR_CANVAS: "CLEAR_CANVAS", + FETCH_PAGE: "FETCH_PAGE", DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS", REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS", LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE" diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index edb7991113..acdfb89eea 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -13,13 +13,12 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry"; import { ThemeProvider, theme } from "./constants/DefaultTheme"; import createSagaMiddleware from 'redux-saga' import { rootSaga } from "./sagas" -import { ActionType } from "./constants/ActionConstants"; +import { ActionType, ReduxAction } from "./constants/ActionConstants"; WidgetBuilderRegistry.registerWidgetBuilders(); const sagaMiddleware = createSagaMiddleware() const store = createStore(appReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(rootSaga) -export const action = (type: ActionType) => store.dispatch({type}) ReactDOM.render( diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index fd7a4485b7..52bd51da74 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -4,13 +4,13 @@ import { AppState } from "../../reducers" import WidgetFactory from "../../utils/WidgetFactory" import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer"; import { IContainerWidgetProps } from "../../widgets/ContainerWidget"; -import { action } from "../../index" -import { ActionTypes } from "../../constants/ActionConstants"; +import { fetchPage } from "../../actions/pageActions"; +import { RenderModes } from "../../constants/WidgetConstants"; -class Canvas extends Component<{ pageWidget: IContainerWidgetProps, loadCanvas: Function }> { +class Canvas extends Component<{ pageWidget: IContainerWidgetProps, fetchPage: Function }> { componentDidMount() { - action(ActionTypes.FETCH_CANVAS) + this.props.fetchPage("123") } render() { @@ -34,6 +34,9 @@ const mapStateToProps = (state: AppState, props: any) => { const mapDispatchToProps = (dispatch: any) => { return { + fetchPage: (pageId: string) => { + return dispatch(fetchPage(pageId, RenderModes.CANVAS)) + } } } diff --git a/app/client/src/sagas/CanvasSagas.tsx b/app/client/src/sagas/CanvasSagas.tsx deleted file mode 100644 index 0755f527aa..0000000000 --- a/app/client/src/sagas/CanvasSagas.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import CanvasWidgetsNormalizer, { -} from "../normalizers/CanvasWidgetsNormalizer" -import { - ActionTypes, -} from "../constants/ActionConstants" -import PageApi, { PageResponse } from "../api/PageApi" -import { call, put, takeLeading, all, takeEvery } from "redux-saga/effects" - -export function* fetchCanvas() { - const pageResponse: PageResponse = yield call(PageApi.fetchPage, { - pageId: "123" - }) - const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse) - const payload = { - pageWidgetId: normalizedResponse.result, - widgets: normalizedResponse.entities.canvasWidgets - } - yield put({ type: ActionTypes.UPDATE_CANVAS, payload }) -} - -export function* watchFetchCanvas() { - yield takeEvery(ActionTypes.FETCH_CANVAS, fetchCanvas) -} diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx new file mode 100644 index 0000000000..8a8bb28a6e --- /dev/null +++ b/app/client/src/sagas/PageSagas.tsx @@ -0,0 +1,22 @@ +import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer" +import { ActionTypes, ReduxAction } from "../constants/ActionConstants" +import PageApi, { PageResponse, PageRequest } from "../api/PageApi" +import { call, put, takeLeading, all, takeEvery } from "redux-saga/effects" +import { RenderModes } from "../constants/WidgetConstants" + +export function* fetchPageSaga(pageRequestAction: ReduxAction) { + const pageRequest = pageRequestAction.payload + const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest) + if (pageRequest.renderMode === RenderModes.CANVAS) { + const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse) + const payload = { + pageWidgetId: normalizedResponse.result, + widgets: normalizedResponse.entities.canvasWidgets + } + yield put({ type: ActionTypes.UPDATE_CANVAS, payload }) + } +} + +export function* watchFetchPage() { + yield takeEvery(ActionTypes.FETCH_PAGE, fetchPageSaga) +} diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx index 6bc8bfd007..76ee3d0f52 100644 --- a/app/client/src/sagas/index.tsx +++ b/app/client/src/sagas/index.tsx @@ -1,6 +1,6 @@ import { all } from "redux-saga/effects" -import { watchFetchCanvas } from "../sagas/CanvasSagas" +import { watchFetchPage } from "../sagas/PageSagas" export function* rootSaga() { - yield all([watchFetchCanvas()]) + yield all([watchFetchPage()]) }