From 345e5772e7c64a4427b555706fcbb7db8d68b60d Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 15 Oct 2021 14:48:59 +0200
Subject: [PATCH] Refactor refBreak (#76)

---
 packages/react-chat/src/contexts/narrowProvider.tsx  |  4 ++--
 .../hooks/{useRefWidthBreak.ts => useRefBreak.ts}    | 12 ++++--------
 2 files changed, 6 insertions(+), 10 deletions(-)
 rename packages/react-chat/src/hooks/{useRefWidthBreak.ts => useRefBreak.ts} (59%)

diff --git a/packages/react-chat/src/contexts/narrowProvider.tsx b/packages/react-chat/src/contexts/narrowProvider.tsx
index 9b52d6e4..99dcd2d2 100644
--- a/packages/react-chat/src/contexts/narrowProvider.tsx
+++ b/packages/react-chat/src/contexts/narrowProvider.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
 
-import { useRefWidthBreak } from "../hooks/useRefWidthBreak";
+import { useRefBreak } from "../hooks/useRefBreak";
 
 const NarrowContext = createContext<boolean>(false);
 
@@ -14,6 +14,6 @@ interface NarrowProviderProps {
 }
 
 export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
-  const narrow = useRefWidthBreak(myRef, 736);
+  const narrow = useRefBreak(myRef?.current?.offsetWidth ?? 0, 736);
   return <NarrowContext.Provider value={narrow} children={children} />;
 }
diff --git a/packages/react-chat/src/hooks/useRefWidthBreak.ts b/packages/react-chat/src/hooks/useRefBreak.ts
similarity index 59%
rename from packages/react-chat/src/hooks/useRefWidthBreak.ts
rename to packages/react-chat/src/hooks/useRefBreak.ts
index bfa1295c..494a6481 100644
--- a/packages/react-chat/src/hooks/useRefWidthBreak.ts
+++ b/packages/react-chat/src/hooks/useRefBreak.ts
@@ -1,15 +1,11 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-export function useRefWidthBreak(
-  myRef: React.RefObject<HTMLHeadingElement>,
-  sizeThreshold: number
-) {
+export function useRefBreak(dimension: number, sizeThreshold: number) {
   const [widthBreak, setWidthBreak] = useState(false);
 
   useEffect(() => {
     const checkDimensions = () => {
-      const width = myRef?.current?.offsetWidth ?? 0;
-      if (width && width < sizeThreshold && width > 0) {
+      if (dimension && dimension < sizeThreshold && dimension > 0) {
         if (widthBreak === false) {
           setWidthBreak(true);
         }
@@ -24,7 +20,7 @@ export function useRefWidthBreak(
     return () => {
       window.removeEventListener("resize", checkDimensions);
     };
-  }, [myRef, widthBreak, myRef?.current?.offsetWidth]);
+  }, [dimension, widthBreak]);
 
   return widthBreak;
 }