From bc9d10dab9971e30a821ae2aef6297317cefe8db Mon Sep 17 00:00:00 2001
From: kudlajz <kudlajzzz@gmail.com>
Date: Fri, 3 May 2024 15:34:25 +0200
Subject: [PATCH] Use useMeasure instead of custom hook

---
 components/CategoriesBar/CategoriesBar.tsx | 20 +++++------
 components/CategoriesBar/lib/index.ts      |  1 -
 components/CategoriesBar/lib/useRect.ts    | 39 ----------------------
 3 files changed, 10 insertions(+), 50 deletions(-)
 delete mode 100644 components/CategoriesBar/lib/useRect.ts

diff --git a/components/CategoriesBar/CategoriesBar.tsx b/components/CategoriesBar/CategoriesBar.tsx
index 604e2e8e..00b626c1 100644
--- a/components/CategoriesBar/CategoriesBar.tsx
+++ b/components/CategoriesBar/CategoriesBar.tsx
@@ -1,42 +1,42 @@
 import type { Category } from '@prezly/sdk';
 import { translations } from '@prezly/theme-kit-intl';
-import { useMemo, useRef } from 'react';
+import { useMeasure } from '@react-hookz/web';
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { CategoryItem } from '../CategoryItem';
 import Dropdown from '../Dropdown';
 
 import CategoryLink from './CategoryLink';
-import { useCategoriesWithStoriesInCurrentLocale, useRect } from './lib';
+import { useCategoriesWithStoriesInCurrentLocale } from './lib';
 
 import styles from './CategoriesBar.module.scss';
 
 const MORE_BUTTON_WIDTH = +styles.MORE_BUTTON_WIDTH.replace('px', '');
 
 function CategoriesBar() {
-    const containerRef = useRef<HTMLDivElement>(null);
     const { formatMessage } = useIntl();
-    const { width: containerWidth } = useRect(containerRef);
+    const [measurements, containerRef] = useMeasure<HTMLDivElement>();
     const categories = useCategoriesWithStoriesInCurrentLocale();
-    const container = containerRef.current;
+    const containerWidth = measurements?.width ?? 0;
 
     const [visibleCategories, hiddenCategories] = useMemo<[Category[], Category[]]>(() => {
-        if (!container) {
+        if (!containerRef.current) {
             return [categories, []];
         }
 
-        const { paddingLeft, paddingRight } = getComputedStyle(container);
+        const { paddingLeft, paddingRight } = getComputedStyle(containerRef.current);
         const containerWidthWithoutPadding =
             containerWidth - parseInt(paddingLeft) - parseInt(paddingRight);
 
-        if (!container || container.scrollWidth <= containerWidthWithoutPadding) {
+        if (containerRef.current.scrollWidth <= containerWidthWithoutPadding) {
             return [categories, []];
         }
 
         let index = 0;
         let width = 0;
         const widthLimit = containerWidthWithoutPadding - MORE_BUTTON_WIDTH;
-        const nodesArray = Array.from(container.children);
+        const nodesArray = Array.from(containerRef.current.children);
 
         for (let i = 0; i < nodesArray.length; i += 1) {
             const { width: nodeWidth } = nodesArray[i].getBoundingClientRect();
@@ -49,7 +49,7 @@ function CategoriesBar() {
         }
 
         return [categories.slice(0, index), categories.slice(index)];
-    }, [categories, container, containerWidth]);
+    }, [categories, containerRef, containerWidth]);
 
     if (!visibleCategories.length) {
         return null;
diff --git a/components/CategoriesBar/lib/index.ts b/components/CategoriesBar/lib/index.ts
index e7b8ad54..773546cc 100644
--- a/components/CategoriesBar/lib/index.ts
+++ b/components/CategoriesBar/lib/index.ts
@@ -1,2 +1 @@
 export * from './useCategoriesWithStoriesInCurrentLocale';
-export * from './useRect';
diff --git a/components/CategoriesBar/lib/useRect.ts b/components/CategoriesBar/lib/useRect.ts
deleted file mode 100644
index b02600c0..00000000
--- a/components/CategoriesBar/lib/useRect.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import { useResizeObserver } from '@react-hookz/web';
-import { type RefObject, useState } from 'react';
-
-interface RectResult {
-    bottom: number;
-    height: number;
-    left: number;
-    right: number;
-    top: number;
-    width: number;
-}
-
-export function useRect<T extends HTMLElement>(ref: RefObject<T>) {
-    const [rect, setRect] = useState<RectResult>(
-        ref && ref.current ? getRect(ref.current) : getRect(),
-    );
-
-    useResizeObserver(ref, () => {
-        if (ref.current) {
-            setRect(getRect(ref.current));
-        }
-    });
-
-    return rect;
-}
-
-function getRect<T extends HTMLElement>(element?: T) {
-    let rect: RectResult = {
-        bottom: 0,
-        height: 0,
-        left: 0,
-        right: 0,
-        top: 0,
-        width: 0,
-    };
-    if (element) rect = element.getBoundingClientRect();
-    return rect;
-}