refactor: simplify use-webchat-resizer

hubtype · Sep 19, 2024 · b77cc69 · b77cc69
1 parent 4dbb311
commit b77cc69
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/packages/botonic-react/src/webchat/hooks/use-device-adapter.ts b/packages/botonic-react/src/webchat/hooks/use-device-adapter.ts
@@ -21,7 +21,7 @@ export const useDeviceAdapter = (host, isWebchatOpen) => {
     window.innerHeight
   )
 
-  const { handleKeyboardShown, handleKeyboardHidden } = useWebchatResizer(host)
+  const { handleKeyboardShown, handleKeyboardHidden } = useWebchatResizer()
 
   const { handleOnTouchMoveEvents, handleScrollEvents } =
     useScrollbarController(currentDevice, host)

diff --git a/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts b/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts
@@ -3,36 +3,42 @@ import { useContext } from 'react'
 import { WebchatContext } from '../../contexts'
 import { useScrollToBottom } from './use-scroll-to-bottom'
 
-export const useWebchatResizer = host => {
+const calculateResizedPercentualWebchatHeight = webchatElement => {
+  const webchatHeight = webchatElement.clientHeight || 0
+  const keyboardOffset =
+    (window.visualViewport && window.visualViewport.height) ||
+    window.innerHeight
+  let newWebchatPercentualHeight = keyboardOffset / webchatHeight
+  newWebchatPercentualHeight =
+    Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
+  return newWebchatPercentualHeight
+}
+
+const calculateResizedPxChatAreaHeight = (
+  webchatElement,
+  headerElement,
+  inputPanelElement
+) => {
+  return (
+    webchatElement.clientHeight -
+    headerElement.clientHeight -
+    inputPanelElement.clientHeight
+  )
+}
+
+export const useWebchatResizer = () => {
   const { webchatRef, chatAreaRef, inputPanelRef, headerRef } =
     useContext(WebchatContext)
-  const { scrollToBottom } = useScrollToBottom({ host })
 
   const handleKeyboardShown = () => {
-    const calculateNewWebchatElementHeight = () => {
-      const webchatHeight = webchatRef.current?.clientHeight || 0
-      const keyboardOffset =
-        (window.visualViewport && window.visualViewport.height) ||
-        window.innerHeight
-      let newWebchatPercentualHeight = keyboardOffset / webchatHeight
-      newWebchatPercentualHeight =
-        Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
-      return newWebchatPercentualHeight
-    }
-
     if (
       webchatRef.current &&
       chatAreaRef.current &&
       headerRef.current &&
       inputPanelRef.current
     ) {
-      const newWebchatPercentualHeight = `${calculateNewWebchatElementHeight()}%`
-      webchatRef.current.style.height = newWebchatPercentualHeight
-
-      const newChatAreaHeight = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
-
-      chatAreaRef.current.style.height = newChatAreaHeight
-      scrollToBottom()
+      webchatRef.current.style.height = `${calculateResizedPercentualWebchatHeight(webchatRef.current)}%`
+      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight(webchatRef.current, headerRef.current, inputPanelRef.current)}px`
     }
   }
 
@@ -44,7 +50,7 @@ export const useWebchatResizer = host => {
       headerRef.current
     ) {
       webchatRef.current.style.height = '100%'
-      chatAreaRef.current.style.height = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
+      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight(webchatRef.current, headerRef.current, inputPanelRef.current)}px`
     }
   }