passing callback instead of CollectionGridView (this)

2 files changed, 21 insertions, 15 deletions

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index ebb710af6..d06bb3192 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -112,12 +112,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         />;
     }
 
-    //@action
+
     /**
      * Saves the layouts received from the Grid to the Document.
      * @param layouts `Layout[]`
      */
-    set layout(layouts: Layout[]) {
+    @undoBatch
+    setLayout(layouts: Layout[]) {
 
         console.log("setting layout in CollectionGridView");
         console.log(layouts?.[0].w);
@@ -197,6 +198,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     /**
      * Checks whether a new node has been added to the grid and updates the Document accordingly.
      */
+    @undoBatch
     checkUpdate() {
         const previousLength = (this.props.Document.gridLayouts as List<Doc>)?.length;
         if (this.childLayoutPairs.length > previousLength) {
@@ -216,16 +218,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.checkUpdate();
 
+        const docList: Doc[] = DocListCast(this.props.Document.gridLayouts);
+
         const contents: JSX.Element[] = this.contents;
-        const layout: Layout[] = this.toLayoutList(DocListCast(this.props.Document.gridLayouts));
+        const layout: Layout[] = this.toLayoutList(docList);
 
-        if (layout.length === 0) {
-            console.log("layouts not loaded");
-        }
-        else {
-            console.log("rendering with this");
-            console.log(layout[0].w);
-        }
+        // if (layout.length === 0) {
+        //     console.log("layouts not loaded");
+        // }
+        // else {
+        //     console.log("rendering with this");
+        //     console.log(layout[0].w);
+        // }
 
 
         return (
@@ -235,15 +239,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
                 }}
                 ref={this.createDashEventsTarget}
-                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+            //onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
             >
                 <Grid
                     width={this.props.PanelWidth()}
                     nodeList={contents}
                     layout={layout}
-                    gridView={this}
                     numCols={this.props.Document.numCols as number}
                     rowHeight={this.props.Document.rowHeight as number}
+                    setLayout={(layout: Layout[]) => this.setLayout(layout)}
                 />
             </div>
         );
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index d400f2810..a5f5c724a 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -15,26 +15,28 @@ interface GridProps {
     width: number;
     nodeList: JSX.Element[] | null;
     layout: Layout[];
-    gridView: CollectionGridView;
     numCols: number;
     rowHeight: number;
+    setLayout: Function;
 }
 
 /**
  * Wrapper around the actual GridLayout of `react-grid-layout`.
  */
 @observer
-export default class Grid extends React.Component<GridProps, GridLayout.ResponsiveProps> {
+export default class Grid extends React.Component<GridProps> {
 
     /**
      * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document.
      * @param layout `Layout[]`
      */
     onLayoutChange(layout: Layout[]) {
-        this.props.gridView.layout = layout;
+        console.log("setting in grid component" + layout[0].w);
+        this.props.setLayout(layout);
     }
 
     render() {
+        console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w);
         return (
             <GridLayout className="layout"
                 layout={this.props.layout}