refactor: Simplify browserViewBounds handling

1 files changed, 9 insertions, 62 deletions

diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 0187fee..1ea03c8 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -21,97 +21,44 @@
 import { throttle } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import Box from '@mui/material/Box';
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import type { BrowserViewBounds } from '@sophie/shared';
+import React, { useCallback, useRef } from 'react';
 
 import { useStore } from './StoreProvider';
 
 export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() {
   const {
-    shared: {
-      browserViewBounds: {
-        x: storeX,
-        y: storeY,
-        width: storeWidth,
-        height: storeHeight,
-      },
-    },
     setBrowserViewBounds,
   } = useStore();
 
-  const [
-    {
-      x: currentX,
-      y: currentY,
-      width: currentWidth,
-      height: currentHeight,
-    },
-    setBounds,
-  ] = useState<BrowserViewBounds>({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    if (storeX !== currentX
-        || storeY !== currentY
-        || storeWidth !== currentWidth
-        || storeHeight !== currentHeight) {
-      setBrowserViewBounds({
-        x: currentX,
-        y: currentY,
-        width: currentWidth,
-        height: currentHeight,
-      });
-    }
-  }, [
-    storeX,
-    storeY,
-    storeWidth,
-    storeHeight,
-    setBrowserViewBounds,
-    currentX,
-    currentY,
-    currentWidth,
-    currentHeight,
-  ]);
-
-  const onResize = useCallback(throttle(([boxEntry]: ResizeObserverEntry[]) => {
-    if (boxEntry) {
+  const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
+    if (entry) {
       const {
         x,
         y,
         width,
         height,
-      } = boxEntry.target.getBoundingClientRect();
-      setBounds({
+      } = entry.target.getBoundingClientRect();
+      setBrowserViewBounds({
         x,
         y,
         width,
         height,
       });
     }
-  }, 100), [setBounds]);
+  }, 100), [setBrowserViewBounds]);
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  const ref = useCallback((box: HTMLElement | null) => {
+  const ref = useCallback((element: HTMLElement | null) => {
     if (resizeObserverRef.current !== null) {
       resizeObserverRef.current.disconnect();
     }
-    if (box === null) {
+    if (element === null) {
       resizeObserverRef.current = null;
       return;
     }
     resizeObserverRef.current = new ResizeObserver(onResize);
-    resizeObserverRef.current.observe(box);
+    resizeObserverRef.current.observe(element);
   }, [onResize, resizeObserverRef]);
 
   return (