added canvas widget normalizer

app/client/package.json

@@ -22,6 +22,7 @@
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
+    "normalizr": "^3.3.0",
     "prettier": "^1.16.0",
     "react": "^16.7.0",
     "react-dnd": "^7.0.2",

app/client/src/actions/CanvasActions.tsx

@@ -1,3 +1,18 @@
-export const a = () => {
+import { IContainerWidgetProps } from "../widgets/ContainerWidget"
-    
+import CanvasWidgetsNormalizer, { widgetSchema } from "../normalizers/CanvasWidgetsNormalizer"
-}
+import { LoadCanvasPayload, ActionTypes, ReduxAction } from "../constants/ActionConstants"
+
+export const loadCanvas = (canvasResponse: PageResponse): ReduxAction<LoadCanvasPayload> => {
+  const normalizedResponse = CanvasWidgetsNormalizer.normalize(canvasResponse)
+  return {
+    type: ActionTypes.LOAD_CANVAS,
+    payload: {
+        pageWidgetId: normalizedResponse.result,
+        widgets: normalizedResponse.entities.canvasWidgets
+    }
+  }
+}
+
+export interface PageResponse {
+  pageWidget: IContainerWidgetProps<any>
+}

app/client/src/constants/ActionConstants.tsx

@@ -1,24 +1,30 @@
 import ContainerWidget from "../widgets/ContainerWidget"
-import { IWidgetProps } from "../widgets/BaseWidget";
+import { IWidgetProps } from "../widgets/BaseWidget"
 
-export type ActionType = "LOAD_CANVAS" | "CLEAR_CANVAS" | "DROP_WIDGET_CANVAS" | "REMOVE_WIDGET_CANVAS" | "LOAD_WIDGET_PANE"
+export type ActionType =
+  | "LOAD_CANVAS"
+  | "CLEAR_CANVAS"
+  | "DROP_WIDGET_CANVAS"
+  | "REMOVE_WIDGET_CANVAS"
+  | "LOAD_WIDGET_PANE"
 export const ActionTypes: { [id: string]: ActionType } = {
-    LOAD_CANVAS: "LOAD_CANVAS",
+  LOAD_CANVAS: "LOAD_CANVAS",
-    CLEAR_CANVAS: "CLEAR_CANVAS",
+  CLEAR_CANVAS: "CLEAR_CANVAS",
-    DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",
+  DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",
-    REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS",
+  REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS",
-    LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE",
+  LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE"
 }
 
 export interface ReduxAction<T> {
-    actionType: ActionType
+  type: ActionType
-    payload: T
+  payload: T
 }
 
 export interface LoadCanvasPayload {
-    containerWidget: ContainerWidget
+  pageWidgetId: string
+  widgets: { [widgetId: string]: IWidgetProps }
 }
 
 export interface LoadWidgetPanePayload {
-    widgets: IWidgetProps[]
+  widgets: IWidgetProps[]
-}
+}

app/client/src/mockResponses/CanvasResponse.tsx

@@ -1,10 +1,5 @@
-import { CanvasReduxState } from "../reducers/uiReducers/canvasReducer"
+import { IContainerWidgetProps } from "../widgets/ContainerWidget"
-import { IWidgetProps } from "../widgets/BaseWidget"
-import ContainerWidget, {
-  IContainerWidgetProps
-} from "../widgets/ContainerWidget"
 import { RenderModes } from "../constants/WidgetConstants"
-import { Colors } from "../constants/StyleConstants"
 
 const CanvasResponse: IContainerWidgetProps<any> = {
   widgetId: "0",
@@ -14,7 +9,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
   topRow: 100,
   bottomRow: 700,
   leftColumn: 100,
-  rightColumn: 800,
+  rightColumn: 1000,
   parentColumnSpace: 1,
   parentRowSpace: 1,
   renderMode: RenderModes.CANVAS,
@@ -52,10 +47,10 @@ const CanvasResponse: IContainerWidgetProps<any> = {
     {
       widgetId: "4",
       widgetType: "CALLOUT_WIDGET",
-      topRow: 3,
+      topRow: 2,
-      leftColumn: 2,
+      leftColumn: 8,
-      bottomRow: 8,
+      bottomRow: 4,
-      rightColumn: 4,
+      rightColumn: 14,
       id: "sample_id",
       title: "Visually important content",
       description:
@@ -86,7 +81,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       size: 20
     },
     {
-      widgetId: "6",
+      widgetId: "7",
       widgetType: "BREADCRUMBS_WIDGET",
       topRow: 6,
       leftColumn: 2,
@@ -107,7 +102,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       ]
     },
     {
-      widgetId: "7",
+      widgetId: "8",
       widgetType: "TAG_INPUT_WIDGET",
       topRow: 7,
       leftColumn: 1,
@@ -118,7 +113,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       renderMode: RenderModes.CANVAS
     },
     {
-      widgetId: "8",
+      widgetId: "9",
       widgetType: "NUMERIC_INPUT_WIDGET",
       topRow: 4,
       leftColumn: 1,
@@ -129,7 +124,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       renderMode: RenderModes.CANVAS
     },
     {
-      widgetId: "8",
+      widgetId: "10",
       widgetType: "CHECKBOX_WIDGET",
       topRow: 6,
       leftColumn: 1,
@@ -151,7 +146,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       ]
     },
     {
-      widgetId: "9",
+      widgetId: "11",
       widgetType: "RADIO_GROUP_WIDGET",
       topRow: 6,
       leftColumn: 1,

app/client/src/normalizers/CanvasWidgetsNormalizer.tsx

@@ -0,0 +1,21 @@
+import { normalize, schema, denormalize } from 'normalizr';
+import { PageResponse } from '../actions/CanvasActions';
+import { IContainerWidgetProps } from '../widgets/ContainerWidget';
+
+export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }, );
+const widgets = new schema.Array(widgetSchema);
+widgetSchema.define({ children: widgets });
+
+class CanvasWidgetsNormalizer {
+
+    static normalize(pageResponse: PageResponse): { entities: any, result: any } {
+        return normalize(pageResponse.pageWidget, widgetSchema)
+    }
+
+    static denormalize(pageWidgetId: string, entities: any): IContainerWidgetProps<any> {
+        return denormalize(pageWidgetId, widgetSchema, entities)
+    }
+
+}
+
+export default CanvasWidgetsNormalizer

app/client/src/pages/Editor/Canvas.tsx

@@ -2,15 +2,24 @@ import React, { Component } from "react"
 import { connect } from "react-redux"
 import { AppState } from "../../reducers"
 import WidgetFactory from "../../utils/WidgetFactory"
-import { CanvasReduxState } from "../../reducers/uiReducers/canvasReducer"
+import { loadCanvas } from "../../actions/CanvasActions";
+import CanvasResponse from "../../mockResponses/CanvasResponse";
+import { denormalize } from "normalizr";
+import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
+import { IContainerWidgetProps } from "../../widgets/ContainerWidget";
+
+class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, loadCanvas: Function }> {
+
+  componentDidMount() {
+    this.props.loadCanvas()
+  }
 
-class Canvas extends Component<{ canvas: CanvasReduxState<any> }> {
   render() {
-    const canvasWidgetData = this.props.canvas.canvasWidgetProps
+    const pageWidget = this.props.pageWidget
     return (
       <div>
-        {canvasWidgetData
+        {pageWidget
-          ? WidgetFactory.createWidget(canvasWidgetData)
+          ? WidgetFactory.createWidget(pageWidget)
           : undefined}
       </div>
     )
@@ -18,13 +27,18 @@ class Canvas extends Component<{ canvas: CanvasReduxState<any> }> {
 }
 
 const mapStateToProps = (state: AppState, props: any) => {
+  const pageWidget = CanvasWidgetsNormalizer.denormalize(state.ui.canvas.pageWidgetId, state.entities)
   return {
-    canvas: state.ui.canvas
+    pageWidget: pageWidget
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
-  return {}
+  return {
+    loadCanvas: () => {
+      dispatch(loadCanvas({ pageWidget: CanvasResponse }))
+    }
+  }
 }
 
 export default connect(

app/client/src/pages/Editor/index.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react"
-import { Card } from "@blueprintjs/core"
 import Canvas from "./Canvas"
 import WidgetPane from "./WidgetPane"
 

app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx

@@ -4,23 +4,31 @@ import {
   LoadCanvasPayload,
   ReduxAction
 } from "../../constants/ActionConstants"
-import { IWidgetProps } from "../../widgets/BaseWidget";
+import { IWidgetProps } from "../../widgets/BaseWidget"
+import { RenderModes } from "../../constants/WidgetConstants"
 
 const initialState: CanvasWidgetsReduxState = {
-
+  "0": {
+    widgetId: "0",
+    widgetType: "CONTAINER_WIDGET",
+    topRow: 100,
+    bottomRow: 700,
+    leftColumn: 100,
+    rightColumn: 800,
+    parentColumnSpace: 1,
+    parentRowSpace: 1,
+    renderMode: RenderModes.CANVAS
+  }
 }
 
-const canvasWidgetsReducer = createReducer(
+const canvasWidgetsReducer = createReducer(initialState, {
-  initialState,
+  [ActionTypes.LOAD_CANVAS]: (
-  {
+    state: CanvasWidgetsReduxState,
-    [ActionTypes.LOAD_CANVAS]: (
+    action: ReduxAction<LoadCanvasPayload>
-      state: CanvasWidgetsReduxState,
+  ) => {
-      action: ReduxAction<LoadCanvasPayload>
+    return { ...action.payload.widgets }
-    ) => {
-      return { ...action.payload }
-    }
   }
-)
+})
 
 export interface CanvasWidgetsReduxState {
   [widgetId: string]: IWidgetProps

app/client/src/reducers/index.tsx

@@ -3,7 +3,7 @@ import entityReducer from "./entityReducers"
 import uiReducer from "./uiReducers"
 import { CanvasReduxState } from "./uiReducers/canvasReducer"
 import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
-import { WidgetPaneReduxState } from "./uiReducers/widgetPaneReducer";
+import { WidgetPaneReduxState } from "./uiReducers/widgetPaneReducer"
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -14,7 +14,7 @@ export default appReducer
 
 export interface AppState {
   ui: {
-    canvas: CanvasReduxState<any>,
+    canvas: CanvasReduxState
     widgetPane: WidgetPaneReduxState
   }
   entities: {

app/client/src/reducers/uiReducers/canvasReducer.tsx

@@ -4,25 +4,22 @@ import {
   LoadCanvasPayload,
   ReduxAction
 } from "../../constants/ActionConstants"
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
-import { IWidgetProps } from "../../widgets/BaseWidget";
-import CanvasResponse from "../../mockResponses/CanvasResponse"
 
-const initialState: CanvasReduxState<any> = {
+const initialState: CanvasReduxState = {
-  canvasWidgetProps: CanvasResponse
+  pageWidgetId: "0"
 }
 
 const canvasReducer = createReducer(initialState, {
   [ActionTypes.LOAD_CANVAS]: (
-    state: CanvasReduxState<any>,
+    state: CanvasReduxState,
     action: ReduxAction<LoadCanvasPayload>
   ) => {
-    return { containerWidget: action.payload }
+    return { pageWidgetId: action.payload.pageWidgetId }
   }
 })
 
-export interface CanvasReduxState<T extends IWidgetProps> {
+export interface CanvasReduxState {
-  canvasWidgetProps?: IContainerWidgetProps<any>
+  pageWidgetId: string
 }
 
 export default canvasReducer

app/client/src/reducers/uiReducers/widgetPaneReducer.tsx

@@ -10,12 +10,12 @@ import WidgetPaneResponse from "../../mockResponses/WidgetPaneResponse"
 const initialState: WidgetPaneReduxState = WidgetPaneResponse
 
 const widgetPaneReducer = createReducer(initialState, {
-  [ActionTypes.LOAD_CANVAS]: (
+  // [ActionTypes.LOAD_CANVAS]: (
-    state: WidgetPaneReduxState,
+  //   state: WidgetPaneReduxState,
-    action: ReduxAction<LoadWidgetPanePayload>
+  //   action: ReduxAction<LoadWidgetPanePayload>
-  ) => {
+  // ) => {
-    return { widgets: action.payload.widgets }
+  //   return { widgets: action.payload.widgets }
-  }
+  // }
 })
 
 export interface WidgetPaneReduxState {

app/client/src/utils/PicassoUtils.tsx

@@ -2,11 +2,11 @@ import { ReduxAction } from "../constants/ActionConstants"
 
 export const createReducer = (
   initialState: any,
-  handlers: { [actionType: string]: Function }
+  handlers: { [type: string]: Function }
 ) => {
   return function reducer(state = initialState, action: ReduxAction<any>) {
-    if (handlers.hasOwnProperty(action.actionType)) {
+    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.actionType](state, action)
+      return handlers[action.type](state, action)
     } else {
       return state
     }