@gravity-ui/blog-constructor 2.1.0-alpha.0 → 2.1.0-alpha.2

package/build/cjs/components/PostInfo/components/Save.js

@@ -27,16 +27,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Save = void 0;
-const react_1 = __importStar(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
-const common_1 = require("../../../utils/common");
-const cn_1 = require("../../../utils/cn");
+const react_1 = __importStar(require("react"));
+const UserContext_1 = require("../../../contexts/UserContext");
+const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
 const utils_1 = require("../../../counters/utils");
 // @ts-ignore
-const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
 const Save_1 = require("../../../icons/Save");
 const SaveFilled_1 = require("../../../icons/SaveFilled");
-const UserContext_1 = require("../../../contexts/UserContext");
+const common_1 = require("../../../models/common");
+const cn_1 = require("../../../utils/cn");
+const common_2 = require("../../../utils/common");
 const ICON_SIZE = 16;
 const b = (0, cn_1.block)('post-info');
 /**
@@ -53,6 +55,7 @@ const b = (0, cn_1.block)('post-info');
  */
 const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
     const { uid } = (0, react_1.useContext)(UserContext_1.UserContext);
+    const handleAnalytics = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.SaveButton);
     return (react_1.default.createElement("div", { className: b('item', { size }), onClick: (event) => {
             // both preventDefault and stopImmediatePropagation required to work properly
             // https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
@@ -61,9 +64,10 @@ const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, t
             if (!uid) {
                 return;
             }
-            (0, common_1.postLikeStatus)(postId, Boolean(hasUserLike));
+            (0, common_2.postLikeStatus)(postId, Boolean(hasUserLike));
             handleUserLike();
             metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
+            handleAnalytics();
         }, "data-qa": `${dataQa ? dataQa + '-' : ''}save` },
         react_1.default.createElement("div", { className: b('content', { cursor: Boolean(uid), theme }) },
             react_1.default.createElement("span", { className: b('icon') },

package/build/cjs/components/PostInfo/components/Sharing.js

@@ -27,28 +27,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sharing = void 0;
-const react_1 = __importStar(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
+const react_1 = __importStar(require("react"));
 const MobileContext_1 = require("../../../contexts/MobileContext");
-const RouterContext_1 = require("../../../contexts/RouterContext");
 const PostPageContext_1 = require("../../../contexts/PostPageContext");
+const RouterContext_1 = require("../../../contexts/RouterContext");
+const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
+const utils_1 = require("../../../counters/utils");
 const i18n_1 = require("../../../i18n");
-const common_1 = require("../../../utils/common");
+const ShareArrowUp_1 = require("../../../icons/ShareArrowUp");
+const common_1 = require("../../../models/common");
 const cn_1 = require("../../../utils/cn");
-const utils_1 = require("../../../counters/utils");
+const common_2 = require("../../../utils/common");
 // @ts-ignore
-const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
-const ShareArrowUp_1 = require("../../../icons/ShareArrowUp");
 const b = (0, cn_1.block)('post-info');
 const Sharing = ({ theme, metrikaGoal }) => {
     const router = (0, react_1.useContext)(RouterContext_1.RouterContext);
     const isMobile = (0, react_1.useContext)(MobileContext_1.MobileContext);
     const { shareOptions } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
-    const handleMetrika = () => {
+    const handleAnalyticsGlobal = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.ShareButton);
+    const handleMetrika = (0, react_1.useCallback)(() => {
         metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
-    };
+    }, [metrikaGoal]);
+    const handleAnalytics = (0, react_1.useCallback)(() => {
+        handleAnalyticsGlobal();
+        handleMetrika();
+    }, [handleAnalyticsGlobal, handleMetrika]);
     return (react_1.default.createElement("div", { className: b('item') },
         react_1.default.createElement("span", { className: b('icon') },
-            react_1.default.createElement(uikit_1.SharePopover, { url: (0, common_1.getAbsolutePath)(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: (0, i18n_1.i18)(i18n_1.Keyset.ActionShare), customIcon: ShareArrowUp_1.ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleMetrika }))));
+            react_1.default.createElement(uikit_1.SharePopover, { url: (0, common_2.getAbsolutePath)(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: (0, i18n_1.i18)(i18n_1.Keyset.ActionShare), customIcon: ShareArrowUp_1.ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleAnalytics }))));
 };
 exports.Sharing = Sharing;

package/build/cjs/models/common.d.ts

@@ -149,3 +149,7 @@ export type HandleChangeQueryParams = (params: Query) => void;
 export type SetQueryType = (params: Query, options?: {
     [y: string]: boolean;
 }) => Promise<void> | void;
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    SaveButton = "save-button-click"
+}

package/build/cjs/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -19,4 +19,9 @@ var BlockType;
     BlockType["Suggest"] = "blog-suggest-block";
     BlockType["Meta"] = "blog-meta-block";
     BlockType["Feed"] = "blog-feed-block";
-})(BlockType = exports.BlockType || (exports.BlockType = {}));
+})(BlockType = exports.BlockType || (exports.BlockType = {}));
+var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["SaveButton"] = "save-button-click";
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

package/build/esm/components/PostInfo/components/Save.js

@@ -1,13 +1,15 @@
-import React, { useContext } from 'react';
+import { useAnalytics } from '@gravity-ui/page-constructor';
 import { Icon } from '@gravity-ui/uikit';
-import { postLikeStatus } from '../../../utils/common';
-import { block } from '../../../utils/cn';
+import React, { useContext } from 'react';
+import { UserContext } from '../../../contexts/UserContext';
+import metrika from '../../../counters/metrika.js';
 import { MetrikaCounter } from '../../../counters/utils';
 // @ts-ignore
-import metrika from '../../../counters/metrika.js';
 import { Save as SaveIcon } from '../../../icons/Save';
 import { SaveFilled } from '../../../icons/SaveFilled';
-import { UserContext } from '../../../contexts/UserContext';
+import { DefaultEventNames } from '../../../models/common';
+import { block } from '../../../utils/cn';
+import { postLikeStatus } from '../../../utils/common';
 import '../PostInfo.css';
 const ICON_SIZE = 16;
 const b = block('post-info');
@@ -25,6 +27,7 @@ const b = block('post-info');
  */
 export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
     const { uid } = useContext(UserContext);
+    const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
     return (React.createElement("div", { className: b('item', { size }), onClick: (event) => {
             // both preventDefault and stopImmediatePropagation required to work properly
             // https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
@@ -36,6 +39,7 @@ export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal,
             postLikeStatus(postId, Boolean(hasUserLike));
             handleUserLike();
             metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
+            handleAnalytics();
         }, "data-qa": `${dataQa ? dataQa + '-' : ''}save` },
         React.createElement("div", { className: b('content', { cursor: Boolean(uid), theme }) },
             React.createElement("span", { className: b('icon') },

package/build/esm/components/PostInfo/components/Sharing.js

@@ -1,25 +1,32 @@
-import React, { useContext } from 'react';
+import { useAnalytics } from '@gravity-ui/page-constructor';
 import { SharePopover } from '@gravity-ui/uikit';
+import React, { useCallback, useContext } from 'react';
 import { MobileContext } from '../../../contexts/MobileContext';
-import { RouterContext } from '../../../contexts/RouterContext';
 import { PostPageContext } from '../../../contexts/PostPageContext';
-import { i18, Keyset } from '../../../i18n';
-import { getAbsolutePath } from '../../../utils/common';
-import { block } from '../../../utils/cn';
-import { MetrikaCounter } from '../../../counters/utils';
-// @ts-ignore
+import { RouterContext } from '../../../contexts/RouterContext';
 import metrika from '../../../counters/metrika.js';
+import { MetrikaCounter } from '../../../counters/utils';
+import { Keyset, i18 } from '../../../i18n';
 import { ShareArrowUp } from '../../../icons/ShareArrowUp';
+import { DefaultEventNames } from '../../../models/common';
+import { block } from '../../../utils/cn';
+import { getAbsolutePath } from '../../../utils/common';
+// @ts-ignore
 import '../PostInfo.css';
 const b = block('post-info');
 export const Sharing = ({ theme, metrikaGoal }) => {
     const router = useContext(RouterContext);
     const isMobile = useContext(MobileContext);
     const { shareOptions } = useContext(PostPageContext);
-    const handleMetrika = () => {
+    const handleAnalyticsGlobal = useAnalytics(DefaultEventNames.ShareButton);
+    const handleMetrika = useCallback(() => {
         metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
-    };
+    }, [metrikaGoal]);
+    const handleAnalytics = useCallback(() => {
+        handleAnalyticsGlobal();
+        handleMetrika();
+    }, [handleAnalyticsGlobal, handleMetrika]);
     return (React.createElement("div", { className: b('item') },
         React.createElement("span", { className: b('icon') },
-            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleMetrika }))));
+            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleAnalytics }))));
 };

package/build/esm/models/common.d.ts

@@ -149,3 +149,7 @@ export type HandleChangeQueryParams = (params: Query) => void;
 export type SetQueryType = (params: Query, options?: {
     [y: string]: boolean;
 }) => Promise<void> | void;
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    SaveButton = "save-button-click"
+}

package/build/esm/models/common.js

@@ -16,4 +16,9 @@ export var BlockType;
     BlockType["Suggest"] = "blog-suggest-block";
     BlockType["Meta"] = "blog-meta-block";
     BlockType["Feed"] = "blog-feed-block";
-})(BlockType || (BlockType = {}));
+})(BlockType || (BlockType = {}));
+export var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["SaveButton"] = "save-button-click";
+})(DefaultEventNames || (DefaultEventNames = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "2.1.0-alpha.0",
+  "version": "2.1.0-alpha.2",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {

package/server/models/common.d.ts

@@ -149,3 +149,7 @@ export type HandleChangeQueryParams = (params: Query) => void;
 export type SetQueryType = (params: Query, options?: {
     [y: string]: boolean;
 }) => Promise<void> | void;
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    SaveButton = "save-button-click"
+}

package/server/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -19,4 +19,9 @@ var BlockType;
     BlockType["Suggest"] = "blog-suggest-block";
     BlockType["Meta"] = "blog-meta-block";
     BlockType["Feed"] = "blog-feed-block";
-})(BlockType = exports.BlockType || (exports.BlockType = {}));
+})(BlockType = exports.BlockType || (exports.BlockType = {}));
+var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["SaveButton"] = "save-button-click";
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));