Drag drop monitor, code cleanup

app/client/src/constants/ApiConstants.tsx

@@ -5,7 +5,7 @@ export type ContentType = "application/json" | "application/x-www-form-urlencode
 export type EncodingType = "gzip"
 
 export const PROD_BASE_URL = "https://mobtools.com/api/"
-export const MOCK_BASE_URL = "https://d952e53e-3dac-42b7-a55d-a93c5df678b8.mock.pstmn.io"
+export const MOCK_BASE_URL = "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io"
 export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
 export const BASE_URL = MOCK_BASE_URL
 export const REQUEST_TIMEOUT_MS = 2000

app/client/src/editorComponents/ContainerComponent.tsx

@@ -36,22 +36,6 @@ const ContainerComponent = (props: ContainerProps) => {
   })
   return <Container ref={drop} {...props}>{props.children}</Container> 
 }
-// class ContainerComponent extends BaseComponent<ContainerProps> {
-//   render() {
-//     const addWidgetFn = this.props.addWidget;
-//     const [, drop] = useDrop({
-//       accept: Object.values(WidgetTypes),
-//       drop(item: DraggableWidget, monitor) {
-//         console.log("dropped")
-//         if (addWidgetFn){
-//           addWidgetFn(item.type);
-//         }
-//         return undefined
-//       },
-//     })
-//     return <Container {...this.props}>{this.props.children}</Container>
-//   }
-// }
 
 export interface ContainerProps extends IComponentProps {
   children?: JSX.Element[] | JSX.Element;

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

@@ -52,10 +52,9 @@ interface ArtBoardProps {
 const Canvas = (props: CanvasProps) => {
   const [width, setWidth] = React.useState(1)
   const artBoardMask: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
-  const [collectedProps, drop] = useDrop({
+  const [, drop] = useDrop({
     accept: Object.values(WidgetTypes),
-    drop(item: DraggableWidget, monitor) {
+    drop(item: DraggableWidget) {
-      console.log("dropped", collectedProps, item, monitor.didDrop())
       props.addWidget(item.type, item.key);
       return undefined
     },
@@ -66,7 +65,6 @@ const Canvas = (props: CanvasProps) => {
     if (el) {
       const rect = el.getBoundingClientRect()
       setWidth(rect.width)
-      console.log(rect)
     }
   }, [setWidth])
 

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

@@ -58,8 +58,6 @@ const EditorDragLayer: React.FC = () => {
     isDragging: monitor.isDragging(),
   }))
 
-  // console.log("itemType", itemType, "isDragging", isDragging, "item", item, "initialOffset", initialOffset, "currentOffset", currentOffset);
-
   function renderItem() {
       return WidgetFactory.createWidget({
         widgetType: itemType as WidgetType,

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

@@ -57,7 +57,6 @@ const WidgetCard = (props: WidgetCardProps) => {
         x: Math.ceil(rect.left),
         y: Math.ceil(rect.top)
       })
-      console.log(rect)
     }
   }, [setInitialOffset])
 

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

@@ -9,7 +9,6 @@ import WidgetCardsPane from "./WidgetCardsPane"
 import EditorHeader from "./EditorHeader"
 import { WidgetType } from "../../constants/WidgetConstants"
 import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
-import { fetchWidgetCards } from "../../actions/widgetCardsPaneActions"
 import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
 import { fetchPage, addWidget } from "../../actions/pageActions"
 import { RenderModes } from "../../constants/WidgetConstants"
@@ -44,19 +43,17 @@ const EditorWrapper = styled.div`
 type EditorProps = {
   pageWidget: ContainerWidgetProps<any> | any;
   fetchCanvasWidgets: Function;
-  fetchWidgetCardsPane: Function;
   cards: { [id: string]: IWidgetCardProps[] } | any;
   addPageWidget: Function;
+  page: string;
 }
 
 class Editor extends Component<EditorProps> {
   componentDidMount() {
-    this.props.fetchWidgetCardsPane()
     this.props.fetchCanvasWidgets("1")
   }
 
   addWidgetToCanvas = (widgetType: WidgetType, key: string): void => {
-    console.log(widgetType);
     this.props.addPageWidget("1", {
       key: key,
       bottomRow: 9,
@@ -74,10 +71,6 @@ class Editor extends Component<EditorProps> {
     })
   }
 
-  // removeWidgetFromCanvas = (widgetId: string): null => {
-
-  // }
-
   public render() {
     return (
       <React.Fragment>
@@ -107,7 +100,6 @@ const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState
 const mapDispatchToProps = (dispatch: any) => {
   return {
     fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
-    fetchWidgetCardsPane: () => dispatch(fetchWidgetCards()),
     addPageWidget: (pageId: string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
   }
 }

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

@@ -39,7 +39,7 @@ const canvasWidgetsReducer = createReducer(initialState, {
 })
 
 export interface CanvasWidgetsReduxState {
-  [widgetId: string]: IFlattenedWidgetProps
+  [widgetId: string]: IFlattenedWidgetProps;
 }
 
 export default canvasWidgetsReducer

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

@@ -35,7 +35,7 @@ export interface EditorReduxState {
   pageWidget?: ContainerWidgetProps<any>;
   cards?: {
     [id: string]: IWidgetCardProps[];
-  }
+  };
 }
 
 export default editorReducer

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

@@ -14,7 +14,6 @@ const widgetCardsPaneReducer = createReducer(initialState, {
     state: WidgetCardsPaneReduxState,
     action: ReduxAction<LoadWidgetCardsPanePayload>
   ) => {
-    console.log(action)
     return { cards: action.payload.cards }
   }
 })

app/client/src/widgets/BaseWidget.tsx

@@ -69,7 +69,6 @@ abstract class BaseWidget<
       widgetState.height !== this.state.height ||
       widgetState.width !== this.state.width
     ) {
-      // console.log("*** " + this.props.widgetId + " " + JSON.stringify(widgetState))
       this.setState(widgetState)
     }
   }
@@ -98,7 +97,6 @@ abstract class BaseWidget<
   }
 
   getComponentPaneView(): JSX.Element {
-    console.log(this.props)
     return (
       <DraggableComponent
         {...this.props}