From 45a9a95e38d47493cf30ce3845167dc22b227843 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:16:29 -0700
Subject: [PATCH] Fix nodeRefs dependency, since map is not a reliable
 dependency (#31)

---
 frontend/faraday/lib/TileLayout.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/faraday/lib/TileLayout.tsx b/frontend/faraday/lib/TileLayout.tsx
index 45cca293f..a24aa5f97 100644
--- a/frontend/faraday/lib/TileLayout.tsx
+++ b/frontend/faraday/lib/TileLayout.tsx
@@ -45,6 +45,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
 
     const [layoutTreeState, dispatch] = useLayoutTreeStateReducerAtom(layoutTreeStateAtom);
     const [nodeRefs, setNodeRefs] = useState<Map<string, RefObject<HTMLDivElement>>>(new Map());
+    const [nodeRefsGen, setNodeRefsGen] = useState<number>(0);
 
     useEffect(() => {
         console.log("layoutTreeState changed", layoutTreeState);
@@ -56,6 +57,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
                 prev.set(id, ref);
                 return prev;
             });
+            setNodeRefsGen((prev) => prev + 1);
         },
         [setNodeRefs]
     );
@@ -67,6 +69,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
                     prev.delete(id);
                     return prev;
                 });
+                setNodeRefsGen((prev) => prev + 1);
             } else {
                 console.log("deleteRef id not found", id);
             }
@@ -133,13 +136,13 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
                 );
             }
         }, 30),
-        [activeDrag, overlayContainerRef, displayContainerRef, layoutTreeState.leafs, nodeRefs]
+        [activeDrag, overlayContainerRef, displayContainerRef, layoutTreeState.leafs, nodeRefsGen]
     );
 
     // Update the transforms whenever we drag something and whenever the layout updates.
     useLayoutEffect(() => {
         updateTransforms();
-    }, [activeDrag, layoutTreeState, updateTransforms]);
+    }, [updateTransforms]);
 
     useResizeObserver(overlayContainerRef, () => updateTransforms());