From db3b6591d57f5c63e9f971e695b4d981979edb8b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 23 Mar 2024 14:54:04 +0530
Subject: [PATCH] improve element size observer hook props

---
 src/app/components/room-card/RoomCard.tsx |  2 +-
 src/app/hooks/useElementSizeObserver.ts   | 10 +++++-----
 src/app/organisms/room/RoomInput.tsx      |  9 ++++++---
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 74b5d26e..ccbd297f 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -46,7 +46,7 @@ export function RoomCardGrid({ children }: { children: ReactNode }) {
   const gridRef = useRef<HTMLDivElement>(null);
 
   useElementSizeObserver(
-    gridRef,
+    useCallback(() => gridRef.current, []),
     useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), [])
   );
 
diff --git a/src/app/hooks/useElementSizeObserver.ts b/src/app/hooks/useElementSizeObserver.ts
index 16c54068..452a7312 100644
--- a/src/app/hooks/useElementSizeObserver.ts
+++ b/src/app/hooks/useElementSizeObserver.ts
@@ -1,14 +1,14 @@
-import { RefObject, useCallback } from 'react';
+import { useCallback } from 'react';
 import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
 
 export const useElementSizeObserver = <T extends Element>(
-  elementRef: RefObject<T>,
+  element: () => T | null,
   onResize: (width: number, height: number, element: T) => void
 ) => {
   useResizeObserver(
     useCallback(
       (entries) => {
-        const target = elementRef.current;
+        const target = element();
         if (!target) return;
         const targetEntry = getResizeObserverEntry(target, entries);
         if (targetEntry) {
@@ -16,8 +16,8 @@ export const useElementSizeObserver = <T extends Element>(
           onResize(width, height, target);
         }
       },
-      [elementRef, onResize]
+      [element, onResize]
     ),
-    useCallback(() => elementRef.current, [elementRef])
+    element
   );
 };
diff --git a/src/app/organisms/room/RoomInput.tsx b/src/app/organisms/room/RoomInput.tsx
index 0eefee93..dfd28570 100644
--- a/src/app/organisms/room/RoomInput.tsx
+++ b/src/app/organisms/room/RoomInput.tsx
@@ -102,10 +102,10 @@ import {
   trimReplyFromFormattedBody,
 } from '../../utils/room';
 import { sanitizeText } from '../../utils/sanitize';
-import { useScreenSize } from '../../hooks/useScreenSize';
 import { CommandAutocomplete } from './CommandAutocomplete';
 import { Command, SHRUG, useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
+import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 
 interface RoomInputProps {
   editor: Editor;
@@ -171,9 +171,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const pickFile = useFilePicker(handleFiles, true);
     const handlePaste = useFilePasteHandler(handleFiles);
     const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
+    const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
 
-    const [, screenWidth] = useScreenSize();
-    const hideStickerBtn = screenWidth < 500;
+    useElementSizeObserver(
+      useCallback(() => document.body, []),
+      useCallback((width) => setHideStickerBtn(width < 500), [])
+    );
 
     useEffect(() => {
       Transforms.insertFragment(editor, msgDraft);