From 6fe6d02b042be3ccf47ae4791428feed6496eb18 Mon Sep 17 00:00:00 2001
From: Alexander Chabin <nibach@ya.ru>
Date: Wed, 22 Nov 2023 09:29:36 +0500
Subject: [PATCH] Use one observer. Get value from `--smooth-corners`

---
 .../components/MainPage/Card/Card.module.css  | 23 +++++------
 client/components/MainPage/Card/Card.tsx      | 33 ++++++++--------
 .../MainPage/Card/useCardSmoothCorners.ts     | 24 ------------
 .../MainPage/Card/useSmoothCorners.ts         | 38 +++++++++++++++++++
 4 files changed, 64 insertions(+), 54 deletions(-)
 delete mode 100644 client/components/MainPage/Card/useCardSmoothCorners.ts
 create mode 100644 client/components/MainPage/Card/useSmoothCorners.ts

diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
index cac71880..a119f8ee 100644
--- a/client/components/MainPage/Card/Card.module.css
+++ b/client/components/MainPage/Card/Card.module.css
@@ -7,8 +7,13 @@
     z-index: 1;
 
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
     height: 100%;
 
+    --smooth-corners: 0.8;
+    padding: 16px;
     border-radius: 16px;
     background-image: var(--CardBgImage);
     background-position: 100% 100%;
@@ -32,14 +37,6 @@
     }
 }
 
-.CardInner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-grow: 1;
-    padding: 16px;
-}
-
 .Card_Public {
     background-color: var(--cards-public-bg);
     color: var(--cards-public-text);
@@ -145,7 +142,7 @@
 }
 
 @media screen and (min-width: 375px) {
-    .CardInner {
+    .Card {
         padding: 16px;
     }
 
@@ -186,11 +183,8 @@
 
 @media screen and (min-width: 768px) {
     .Card {
-        border-radius: 24px;
-    }
-
-    .CardInner {
         padding: 32px;
+        border-radius: 24px;
     }
 
     .CardFooterCaption_NoSubtitle {
@@ -198,6 +192,7 @@
     }
 
     .CardTitle {
+        --smooth-corners: 0.8;
         border-radius: 8px;
         font-size: 32px;
     }
@@ -208,7 +203,7 @@
 }
 
 @media screen and (min-width: 1200px) {
-    .CardInner {
+    .Card {
         padding: clamp(30px, 2vw, 40px);
     }
 
diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
index c3648255..609fb774 100644
--- a/client/components/MainPage/Card/Card.tsx
+++ b/client/components/MainPage/Card/Card.tsx
@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import classNames from 'classnames/bind';
 import t from 'utils/typograph';
 import { STRAPI_URL } from 'transport-common/strapi/constants';
-import { useCardSmoothCorners } from './useCardSmoothCorners';
+import { useSmoothCorners } from './useSmoothCorners';
 
 import { CardProps } from './Card.types';
 
@@ -29,7 +29,9 @@ export function Card({
     footerCaption,
 }: CardProps) {
     const cardRef = useRef<HTMLAnchorElement>(null);
-    useCardSmoothCorners(cardRef);
+    const cardTitleRef = useRef<HTMLDivElement>(null);
+    useSmoothCorners(cardRef);
+    useSmoothCorners(cardTitleRef);
 
     return (
         <a
@@ -45,20 +47,19 @@ export function Card({
                 } as React.CSSProperties
             }
         >
-            <div className={cn(styles.CardInner)}>
-                {title && (
-                    <div
-                        className={cn(styles.CardTitle, {
-                            [styles.CardTitle_Bg]: titleBackgroundColor,
-                        })}
-                    >
-                        {t(title)}
-                    </div>
-                )}
-                {headerCaption && <p className={cn(styles.CardHeaderCaption)}>{t(headerCaption)}</p>}
-                {footerCaption && <p className={headerCaption ? cn(styles.CardFooterCaption) : cn(styles.CardFooterCaption_NoSubtitle)}>{t(footerCaption)}</p>}
-                {dynamicContent && <div className={cn(styles.CardDynamic)}>{dynamicContent}</div>}
-            </div>
+            {title && (
+                <div
+                    className={cn(styles.CardTitle, {
+                        [styles.CardTitle_Bg]: titleBackgroundColor,
+                    })}
+                    ref={cardTitleRef}
+                >
+                    {t(title)}
+                </div>
+            )}
+            {headerCaption && <p className={cn(styles.CardHeaderCaption)}>{t(headerCaption)}</p>}
+            {footerCaption && <p className={headerCaption ? cn(styles.CardFooterCaption) : cn(styles.CardFooterCaption_NoSubtitle)}>{t(footerCaption)}</p>}
+            {dynamicContent && <div className={cn(styles.CardDynamic)}>{dynamicContent}</div>}
         </a>
     );
 }
diff --git a/client/components/MainPage/Card/useCardSmoothCorners.ts b/client/components/MainPage/Card/useCardSmoothCorners.ts
deleted file mode 100644
index d387cd3f..00000000
--- a/client/components/MainPage/Card/useCardSmoothCorners.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect } from "react";
-import type { MutableRefObject } from "react";
-import { getSvgPath } from "figma-squircle";
-
-export function useCardSmoothCorners(cardRef: MutableRefObject<HTMLAnchorElement>) {
-    useEffect(() => {
-        const setCorners = (entry: ResizeObserverEntry) => {
-            const { width, height } = entry.contentRect;
-            const cornerRadius = parseInt(window.getComputedStyle(entry.target).borderRadius, 10);
-            const clipPath = getSvgPath({ width, height, cornerRadius, cornerSmoothing: 0.8 });
-            cardRef.current.style.clipPath = `path('${clipPath}')`;
-        }
-
-        const resizeObserver = new ResizeObserver(([entry]) => {
-            setCorners(entry);
-        });
-
-        resizeObserver.observe(cardRef.current);
-
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-};
diff --git a/client/components/MainPage/Card/useSmoothCorners.ts b/client/components/MainPage/Card/useSmoothCorners.ts
new file mode 100644
index 00000000..5117c800
--- /dev/null
+++ b/client/components/MainPage/Card/useSmoothCorners.ts
@@ -0,0 +1,38 @@
+import type { MutableRefObject } from "react";
+import { useEffect } from "react";
+import { getSvgPath } from "figma-squircle";
+
+function setCorners(entry: ResizeObserverEntry) {
+    const element = entry.target as HTMLElement;
+    const styles = window.getComputedStyle(element);
+    const { width, height, top, right, bottom, left } = entry.contentRect;
+    
+    const clipPath = getSvgPath({
+        width: left + width + right,
+        height: top + height + bottom,
+        cornerRadius: parseInt(styles.borderRadius, 10),
+        cornerSmoothing: Number(styles.getPropertyValue('--smooth-corners'))
+    });
+
+    element.style.clipPath = `path('${clipPath}')`;
+}
+
+let smoothCornersObserver = null;
+
+if ('ResizeObserver' in globalThis) {
+    smoothCornersObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            setCorners(entry);
+        }
+    });
+}
+
+export function useSmoothCorners(cardRef: MutableRefObject<HTMLElement>) {
+    useEffect(() => {
+        smoothCornersObserver.observe(cardRef.current);
+
+        return () => {
+            smoothCornersObserver.unobserve(cardRef.current);
+        };
+    }, []);
+}