From 665df53a39cc90d4155b3c8436a88986aa7a5b23 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 3 Oct 2024 21:07:57 +0200
Subject: [PATCH] fix: new sections without add and change listeners (#1230)

---
 .../board/sections/gridstack/use-gridstack.ts | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
index c305c75f5..636065131 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
@@ -195,6 +195,32 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     [moveItemToSection, moveInnerSectionToSection, section.id],
   );
 
+  // initialize the gridstack
+  useEffect(() => {
+    const isReady = initializeGridstack({
+      section,
+      itemIds,
+      refs: {
+        items: itemRefs,
+        wrapper: wrapperRef,
+        gridstack: gridRef,
+      },
+      sectionColumnCount: columnCount,
+    });
+
+    // If the section is ready mark it as ready
+    // When all sections are ready the board is ready and will get visible
+    if (isReady) {
+      markAsReady(section.id);
+    }
+
+    // Only run this effect when the section items change
+  }, [itemIds.length, columnCount]);
+
+  /**
+   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
+   * because we need the gridstack object to add the listeners
+   */
   useEffect(() => {
     if (!isEditMode) return;
     const currentGrid = gridRef.current;
@@ -231,28 +257,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     };
   }, [isEditMode, onAdd, onChange]);
 
-  // initialize the gridstack
-  useEffect(() => {
-    const isReady = initializeGridstack({
-      section,
-      itemIds,
-      refs: {
-        items: itemRefs,
-        wrapper: wrapperRef,
-        gridstack: gridRef,
-      },
-      sectionColumnCount: columnCount,
-    });
-
-    // If the section is ready mark it as ready
-    // When all sections are ready the board is ready and will get visible
-    if (isReady) {
-      markAsReady(section.id);
-    }
-
-    // Only run this effect when the section items change
-  }, [itemIds.length, columnCount]);
-
   const sectionHeight = section.kind === "dynamic" && "height" in section ? (section.height as number) : null;
 
   // We want the amount of rows in a dynamic section to be the height of the section in the outer gridstack