fix(cdn-icon): fix icon update when name changes (#1558)

* fix(cdn-icon): fix icon update when name changes

* refactor(cdn-icon): extract useIcon hook, add useSyncExternalStore hook

* fix(cdn-icon): add core-components-shared dependency

* chore(cdn-icon): fix quick-vans-return.md

* chore(cdn-icon): fix quick-vans-return.md

* fix: update dependencies

---------

Co-authored-by: Elena Spivak <[email protected]>
Co-authored-by: Mikhail Lukin <[email protected]>

(cherry picked from commit 202249e)

Author: spivakev

.changeset/odd-pens-sip.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-cdn-icon': patch
+---
+
+Рефакторинг `CDNIcon`: логика вынесена в хук `useIcon`, кеширование иконки переписано на `useSyncExternalStore`

.changeset/plenty-squids-smash.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-cdn-icon': patch
+---
+
+Исправлен баг `CDNIcon`, когда при изменении пропса `name` не менялась иконка

packages/cdn-icon/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-cdn-icon",
-    "version": "5.3.0",
+    "version": "5.3.2",
     "description": "",
     "keywords": [],
     "license": "ISC",
@@ -10,13 +10,15 @@
         "access": "public",
         "directory": "dist"
     },
+    "sideEffects": false,
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "classnames": "^2.3.1",
-        "tslib": "^2.4.0"
+        "classnames": "^2.5.1",
+        "tslib": "^2.4.0",
+        "@alfalab/core-components-shared": "^0.16.0"
     },
-    "themesVersion": "13.5.0",
-    "varsVersion": "9.15.0"
+    "themesVersion": "13.7.1",
+    "varsVersion": "9.18.0"
 }

packages/cdn-icon/src/Component.tsx

@@ -1,6 +1,8 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
 import cn from 'classnames';
 
+import { LoadingStatus, useIcon } from './hooks/use-icon';
+
 import styles from './index.module.css';
 
 type CDNIconProps = {
@@ -32,15 +34,6 @@ type CDNIconProps = {
     fallback?: ReactNode;
 };
 
-enum LoadingStatus {
-    INITIAL,
-    SUCCESS,
-    FAILURE,
-}
-
-// Кэшируем загруженные иконки, чтобы предотвратить их повторную загрузку при каждом монтировании
-const cache: Record<string, string> = {};
-
 export const CDNIcon: React.FC<CDNIconProps> = ({
     name,
     color,
@@ -49,48 +42,24 @@ export const CDNIcon: React.FC<CDNIconProps> = ({
     baseUrl = 'https://alfabank.servicecdn.ru/icons',
     fallback,
 }) => {
-    const url = `${baseUrl}/${name}.svg`;
-
-    const [loadingStatus, setLoadingStatus] = useState<LoadingStatus>(LoadingStatus.INITIAL);
-    const [icon, setIcon] = useState(cache[url]);
-
-    const monoIcon = !name.includes('_color');
-
-    useEffect(() => {
-        if (icon) return undefined;
-
-        const xhr = new XMLHttpRequest();
+    const [icon, status] = useIcon(`${baseUrl}/${name}.svg`);
 
-        xhr.open('GET', url);
-        xhr.send();
-        xhr.onload = function onload() {
-            setLoadingStatus(LoadingStatus.SUCCESS);
-            const svg = xhr.response;
-
-            if (svg.startsWith('<svg')) {
-                cache[url] = svg;
-
-                setIcon(svg);
-            }
-        };
-
-        xhr.onerror = function onError() {
-            setLoadingStatus(LoadingStatus.FAILURE);
-        };
-
-        return () => xhr.abort();
-    }, [url, icon]);
+    const isMonoIcon = !name.includes('_color');
 
     return (
         <span
             style={{ color }}
             className={cn('cc-cdn-icon', styles.component, className, {
-                [styles.parentColor]: monoIcon,
+                [styles.parentColor]: isMonoIcon,
             })}
             data-test-id={dataTestId}
-            {...(loadingStatus === LoadingStatus.FAILURE
-                ? { children: fallback }
-                : { dangerouslySetInnerHTML: { __html: icon } })}
-        />
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                status === LoadingStatus.SUCCESS ? { __html: icon! } : undefined
+            }
+        >
+            {status === LoadingStatus.FAILURE ? fallback : undefined}
+        </span>
     );
 };

packages/cdn-icon/src/hooks/use-icon.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState, useSyncExternalStore } from 'react';
+
+import { hasOwnProperty, noop } from '@alfalab/core-components-shared';
+
+type Listener = () => void;
+
+export enum LoadingStatus {
+    INITIAL,
+    SUCCESS,
+    FAILURE,
+}
+
+// Кэшируем загруженные иконки, чтобы предотвратить их повторную загрузку при каждом монтировании
+let cache: Record<string, string | undefined> = {};
+let listeners: Listener[] = [];
+
+const iconsStore = {
+    set(url: string, icon: string) {
+        cache = { ...cache, [url]: icon };
+
+        listeners.forEach((listener) => {
+            listener();
+        });
+    },
+    has(url: string) {
+        return hasOwnProperty(cache, url);
+    },
+    subscribe(listener: Listener) {
+        listeners = [...listeners, listener];
+
+        return () => {
+            listeners = listeners.filter((l) => l !== listener);
+        };
+    },
+    getSnapshot() {
+        return cache;
+    },
+};
+
+export function useIcon(url: string): [icon: string | undefined, status: LoadingStatus] {
+    const icons = useSyncExternalStore(iconsStore.subscribe, iconsStore.getSnapshot);
+    const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.INITIAL);
+
+    useEffect(() => {
+        if (iconsStore.has(url)) {
+            setLoadingStatus(LoadingStatus.SUCCESS);
+
+            return noop;
+        }
+
+        setLoadingStatus(LoadingStatus.INITIAL);
+
+        const xhr = new XMLHttpRequest();
+
+        xhr.open('GET', url);
+        xhr.send();
+        xhr.onload = function onload() {
+            const svg = xhr.response;
+
+            if (typeof svg === 'string' && svg.startsWith('<svg')) {
+                iconsStore.set(url, svg);
+            }
+            setLoadingStatus(LoadingStatus.SUCCESS);
+        };
+
+        xhr.onerror = function onError() {
+            setLoadingStatus(LoadingStatus.FAILURE);
+        };
+
+        return () => xhr.abort();
+    }, [url]);
+
+    return [icons[url], loadingStatus];
+}

packages/cdn-icon/tsconfig.json

@@ -9,4 +9,7 @@
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
+  "references": [
+    { "path": "../shared" }
+  ]
 }