added action creators to pass actions to sagas

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<PageRequest> => {
+  return {
+    type: ActionTypes.FETCH_PAGE,
+    payload: {
+      pageId: pageId,
+      renderMode: renderMode
+    }
+  }
+}

app/client/src/api/Api.tsx

@@ -52,10 +52,14 @@ class Api {
   }
 
   static convertObjectToQueryParams(object: any): string {
+    if (!_.isNil(object)) {
       const paramArray: string[] = _.map(_.keys(object), key => {
         return encodeURIComponent(key) + "=" + encodeURIComponent(object[key])
       })
       return "?" + _.join(paramArray, "&")
+    } else {
+      return ""
+    }
   }
 }
 

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<any>
 }
 
 export interface PageResponse extends ApiResponse {
   pageWidget: IContainerWidgetProps<any>
 }
 
+export interface SavePageResponse {
+  pageId: string
+}
+
 class PageApi extends Api {
-  static url: string = "/page/"
+  static url: string = "/page"
   
   static fetchPage(pageRequest: PageRequest): Promise<PageResponse> {
-    return Api.get(PageApi.url + pageRequest.pageId, pageRequest)
+    return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest)
   }
+
+  static savePage(savePageRequest: SavePageRequest): Promise<PageResponse> {
+    return Api.post(PageApi.url, undefined, savePageRequest)
+  }
+
 }
 
 export default PageApi

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"

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(
   <Provider store={store}>

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 { fetchPage } from "../../actions/pageActions";
-import { ActionTypes } from "../../constants/ActionConstants";
+import { RenderModes } from "../../constants/WidgetConstants";
 
-class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, loadCanvas: Function }> {
+class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, 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))
+    }
   }
 }
 

app/client/src/sagas/CanvasSagas.tsx

@@ -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)
-}

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<PageRequest>) {
+  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)
+}

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()])
 }