fix: items can not be placed in newly created dynamic section without saving (#1513)

* fix: items can not be placed in newly created dynamic section without saving

* docs: add comments above hooks with notice about specific order

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -71,15 +71,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       ? section.width
       : board.columnCount;
 
-  useCssVariableConfiguration({
-    columnCount,
-    gridRef,
-    wrapperRef,
-    width,
-    height,
-    isDynamic: section.kind === "dynamic",
-  });
-
   const itemRefKeys = Object.keys(itemRefs.current);
   // define items in itemRefs for easy access and reference to items
   if (itemRefKeys.length !== itemIds.length) {
@@ -95,11 +86,6 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     });
   }
 
-  // Toggle the gridstack to be static or not based on the edit mode
-  useEffect(() => {
-    gridRef.current?.setStatic(!isEditMode);
-  }, [isEditMode]);
-
   const onChange = useCallback(
     (changedNode: GridStackNode) => {
       const id = changedNode.el?.getAttribute("data-id");
@@ -258,14 +244,40 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     };
   }, [isEditMode, onAdd, onChange]);
 
+  /**
+   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
+   * because we need the gridstack object to add the listeners
+   * Toggle the gridstack to be static or not based on the edit mode
+   */
+  useEffect(() => {
+    gridRef.current?.setStatic(!isEditMode);
+  }, [isEditMode]);
+
   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
+  /**
+   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
+   * because we need the gridstack object to add the listeners
+   * We want the amount of rows in a dynamic section to be the height of the section in the outer gridstack
+   */
   useEffect(() => {
     if (!sectionHeight) return;
     gridRef.current?.row(sectionHeight);
   }, [sectionHeight]);
 
+  /**
+   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
+   * because we need the gridstack object to add the listeners
+   */
+  useCssVariableConfiguration({
+    columnCount,
+    gridRef,
+    wrapperRef,
+    width,
+    height,
+    isDynamic: section.kind === "dynamic",
+  });
+
   return {
     refs: {
       items: itemRefs,