refactor(graphview): put resize handling in its own hook

src/hooks/useResizeHandler.ts

@@ -0,0 +1,43 @@
+import { useEffect, MutableRefObject } from 'react';
+import { ResizeObserver } from 'resize-observer';
+import { useStoreActions } from '../store/hooks';
+
+import { getDimensions } from '../utils';
+
+export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
+  const updateSize = useStoreActions((actions) => actions.updateSize);
+
+  useEffect(() => {
+    let resizeObserver: ResizeObserver;
+
+    const updateDimensions = () => {
+      if (!rendererNode.current) {
+        return;
+      }
+
+      const size = getDimensions(rendererNode.current);
+
+      if (size.height === 0 || size.width === 0) {
+        console.warn('The React Flow parent container needs a width and a height to render the graph.');
+      }
+
+      updateSize(size);
+    };
+
+    updateDimensions();
+    window.onresize = updateDimensions;
+
+    if (rendererNode.current) {
+      resizeObserver = new ResizeObserver(() => updateDimensions());
+      resizeObserver.observe(rendererNode.current);
+    }
+
+    return () => {
+      window.onresize = null;
+
+      if (resizeObserver && rendererNode.current) {
+        resizeObserver.unobserve(rendererNode.current!);
+      }
+    };
+  }, []);
+};