Merge pull request #1405 from inplayer-org/improvement/use-analytics-hook

new useAnalytics hook

Author: mirovladimitrovski

.eslintrc

@@ -69,11 +69,15 @@
     "linebreak-style": "off",
     "no-debugger": "off",
     "no-alert": "off",
-    "no-use-before-define": "warn",
-    "no-unused-vars": [
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
       "warn",
       {
-        "argsIgnorePattern": "res|next|^err"
+        "argsIgnorePattern": "res|next|^err|^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
       }
     ],
     "prefer-const": [
@@ -110,20 +114,8 @@
     "consistent-return": "off",
     "jsx-a11y/accessible-emoji": "off",
     "radix": "off",
-    "no-shadow": [
-      2,
-      {
-        "hoist": "all",
-        "allow": [
-          "resolve",
-          "reject",
-          "done",
-          "next",
-          "err",
-          "error"
-        ]
-      }
-    ],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["warn"],
     "quotes": [
       2,
       "single",

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.24] - 09.03.2022
+
+## Added
+
+- New `useAnalytics` hook as an alternative to `AnalyticsComponent`
+
 # [2.5.23] - 21.02.2022
 
 ## Change

index.d.ts

@@ -140,6 +140,13 @@ export interface ContainerProps extends AnalyticsProps{
   alignContent?: string;
 }
 
+declare type TrackParams = Pick<Event, 'event' | 'type' | 'tag'> & Partial<Pick<Event, 'pages' | 'merchantId' | 'ip'>>;
+
+export declare const useAnalytics: () => {
+  track: (trackParams: TrackParams) => void;
+  trackCallback: (trackParams: TrackParams) => () => void;
+};
+
 export interface CellProps extends AnalyticsProps{
   className?: string;
   width?: number;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.23",
+  "version": "2.5.24",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",
@@ -107,4 +107,4 @@
     "formik": "^2.1.5",
     "yup": "^0.32.11"
   }
-}
+}

src/analytics/AnalyticsComponent.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { AnalyticsContext, AnalyticsContextValue } from './AnalyticsPage';
+
+export type AnalyticsComponentProps = {
+  children: (context: AnalyticsContextValue) => ReactNode;
+};
+
+/** A component to wrap other components with to gain access to the AnalyticsContextValue. */
+const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
+  <AnalyticsContext.Consumer>{children}</AnalyticsContext.Consumer>
+);
+
+export default AnalyticsComponent;

src/analytics/AnalyticsPage.tsx

@@ -0,0 +1,74 @@
+import React, { createContext } from 'react';
+import AnalyticsTracker from './AnalyticsTracker';
+
+export type AnalyticsTag = string;
+
+export enum AnalyticsPageType {
+  PAGE = 'page',
+  MODAL = 'modal',
+  TAB = 'tab',
+}
+
+export interface AnalyticsPageObject {
+  tag: AnalyticsTag;
+  type: AnalyticsPageType;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPageObject[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
+export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
+  pages: [],
+  tracker: new AnalyticsTracker(),
+  merchantId: 0,
+  ip: '',
+};
+
+export const AnalyticsContext = createContext(ROOT_ANALYTICS_CONTEXT);
+
+export interface AnalyticsPageProps {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
+}
+
+/** Registers a subpage in the analytics component hierarchy. */
+const AnalyticsPageComponent = ({
+  tag,
+  type,
+  children,
+  merchantId: mid,
+  ip: ipAddress,
+}: AnalyticsPageProps) => (
+  <AnalyticsContext.Consumer>
+    {({ pages, tracker, merchantId, ip }) => (
+      <AnalyticsContext.Provider
+        value={{
+          pages: [...pages, { tag, type }],
+          tracker,
+          merchantId: mid || merchantId,
+          ip: ipAddress || ip,
+        }}
+      >
+        {children}
+      </AnalyticsContext.Provider>
+    )}
+  </AnalyticsContext.Consumer>
+);
+
+export default AnalyticsPageComponent;

src/analytics/AnalyticsTracker.ts

@@ -0,0 +1,67 @@
+import { AnalyticsPageObject, AnalyticsTag } from './AnalyticsPage';
+
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
+  DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
+  FOCUS_OUT = 'focus_out',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
+  ICON = 'icon',
+  LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
+  ACCORDION = 'accordion',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
+  TAB_NAVIGATION = 'tab_navigation',
+  RADIO = 'radio',
+}
+
+export interface TrackEvent {
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
+  tag: AnalyticsTag;
+  pages: AnalyticsPageObject[];
+  merchantId: number;
+  ip: string;
+}
+
+export type AnalyticsHandlerFn = (event: TrackEvent) => void;
+
+export default class AnalyticsTracker {
+  handlers: AnalyticsHandlerFn[] = [];
+
+  registerHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers.push(fn);
+
+    return () => {
+      this.unregisterHandler(fn);
+    };
+  };
+
+  unregisterHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers = this.handlers.filter((handler) => handler !== fn);
+  };
+
+  track = (event: TrackEvent) => {
+    this.handlers.forEach((handler) => handler(event));
+  };
+}

src/analytics/externalTypes.ts

@@ -0,0 +1,18 @@
+import { AnalyticsTag } from './AnalyticsPage';
+
+export interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag?: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}

src/analytics/index.ts

@@ -0,0 +1,26 @@
+export {
+  default as AnalyticsPage,
+  ROOT_ANALYTICS_CONTEXT,
+  AnalyticsContext,
+} from './AnalyticsPage';
+
+export {
+  default as AnalyticsTracker,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from './AnalyticsTracker';
+
+export { default as AnalyticsComponent, AnalyticsComponentProps } from './AnalyticsComponent';
+
+export { default as useAnalytics } from './useAnalytics';
+
+export type {
+  AnalyticsTag,
+  AnalyticsContextValue,
+  AnalyticsPageProps,
+  AnalyticsPageType,
+} from './AnalyticsPage';
+
+export type { TrackEvent as Event, AnalyticsHandlerFn } from './AnalyticsTracker';
+
+export type { AnalyticsProps } from './externalTypes';