From c5b9a742c0ac8bd4a963eef4d882f8fe6bb31061 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 30 Mar 2022 18:21:35 -0700
Subject: [PATCH] fix: Cannot import from app in shared

---
 shared/editor/components/useComponentSize.ts | 31 ++++++++++++++++++++
 shared/editor/embeds/Berrycast.tsx           |  2 +-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 shared/editor/components/useComponentSize.ts

diff --git a/shared/editor/components/useComponentSize.ts b/shared/editor/components/useComponentSize.ts
new file mode 100644
index 000000000..24d929ccc
--- /dev/null
+++ b/shared/editor/components/useComponentSize.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+export default function useComponentSize(
+  ref: React.RefObject<HTMLElement>
+): { width: number; height: number } {
+  const [size, setSize] = useState({
+    width: ref.current?.clientWidth || 0,
+    height: ref.current?.clientHeight || 0,
+  });
+
+  useEffect(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(({ target }) => {
+        if (
+          size.width !== target.clientWidth ||
+          size.height !== target.clientHeight
+        ) {
+          setSize({ width: target.clientWidth, height: target.clientHeight });
+        }
+      });
+    });
+
+    if (ref.current) {
+      sizeObserver.observe(ref.current);
+    }
+
+    return () => sizeObserver.disconnect();
+  }, [ref]);
+
+  return size;
+}
diff --git a/shared/editor/embeds/Berrycast.tsx b/shared/editor/embeds/Berrycast.tsx
index 7bee1ef24..260a22b23 100644
--- a/shared/editor/embeds/Berrycast.tsx
+++ b/shared/editor/embeds/Berrycast.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import useComponentSize from "~/hooks/useComponentSize";
 import Frame from "../components/Frame";
+import useComponentSize from "../components/useComponentSize";
 import { EmbedProps as Props } from ".";
 
 const URL_REGEX = /^https:\/\/(www\.)?berrycast.com\/conversations\/(.*)$/;