feat: add analytics to icons-block (#561)

* feat: add analytics to icons-block * fix: separate events for icons * fix: add analyticsEvents to schema * fix: fix after review
gravity-ui · Sep 14, 2023 · 75bafc4 · 75bafc4
1 parent e8a2567
commit 75bafc4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx
@@ -1,8 +1,9 @@
-import React, {Fragment, useContext} from 'react';
+import React, {Fragment, useCallback, useContext} from 'react';
 
 import {Image, Title} from '../../components';
 import {LocationContext} from '../../context/locationContext';
-import {IconsBlockProps} from '../../models';
+import {useAnalytics} from '../../hooks';
+import {IconsBlockItemProps, IconsBlockProps} from '../../models';
 import {block, getLinkProps} from '../../utils';
 
 import './Icons.scss';
@@ -18,6 +19,14 @@ const getItemContent = (item: IconsBlockProps['items'][number]) => (
 
 const Icons = ({title, size = 's', items}: IconsBlockProps) => {
     const {hostname} = useContext(LocationContext);
+    const handleAnalytics = useAnalytics();
+
+    const onClick = useCallback(
+        ({analyticsEvents, url}: IconsBlockItemProps) => {
+            handleAnalytics(analyticsEvents, {url});
+        },
+        [handleAnalytics],
+    );
 
     return (
         <div className={b({size})}>
@@ -33,6 +42,7 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
                         aria-label={text}
                         title={text}
                         {...getLinkProps(url, hostname)}
+                        onClick={() => onClick(item)}
                     >
                         {itemContent}
                     </a>

diff --git a/src/blocks/Icons/schema.ts b/src/blocks/Icons/schema.ts
@@ -1,4 +1,5 @@
 import {AnimatableProps, BlockBaseProps} from '../../schema/validators/common';
+import {AnalyticsEventSchema} from '../../schema/validators/event';
 
 export const IconsProps = {
     additionalProperties: false,
@@ -33,6 +34,19 @@ export const IconsProps = {
                         type: 'string',
                     },
                 },
+                analyticsEvents: {
+                    oneOf: [
+                        {
+                            ...AnalyticsEventSchema,
+                            optionName: 'single',
+                        },
+                        {
+                            type: 'array',
+                            items: AnalyticsEventSchema,
+                            optionName: 'list',
+                        },
+                    ],
+                },
             },
         },
     },

diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -2,6 +2,7 @@ import {ButtonSize} from '@gravity-ui/uikit';
 
 import {GridColumnSize, GridColumnSizesType} from '../../grid/types';
 import {ThemeSupporting} from '../../utils';
+import {AnalyticsEventsBase} from '../common';
 
 import {
     AnchorProps,
@@ -312,14 +313,16 @@ export interface FilterBlockProps extends Animatable, LoadableChildren {
     centered?: boolean;
 }
 
+export interface IconsBlockItemProps extends AnalyticsEventsBase {
+    url: string;
+    text: string;
+    src: string;
+}
+
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
-    items: {
-        url: string;
-        text: string;
-        src: string;
-    }[];
+    items: IconsBlockItemProps[];
 }
 
 interface ContentLayoutBlockParams {