feat(click logging): Create HOC

- Add HOC for logging UI events (tested for onClick)

Author: booleanhunter

src/components/contexts/withTracking.tsx

@@ -0,0 +1,47 @@
+export interface Tracker {
+    context: string;
+    type: keyof React.DOMAttributes<string>;
+    data: Object<any>;
+    callback: (e: any, data: Object<any>) => void;
+}
+
+type Object<T> = {
+    [P in keyof T]: T[P]
+};
+
+type TrackerProps = {
+    trackers: Tracker[]
+} & Object<any>;
+
+export function withTracking (
+    Component: React.ComponentType<any>
+) {
+    return function fn(props: TrackerProps) {
+        let eventObject: Object<any> = {};
+        const { trackers, ...rest } = props;
+
+        trackers.forEach(tracker => {
+            eventObject[tracker.type] = (tracker.type in rest) ? function(e: any) {
+                rest[tracker.type](e);
+                tracker.callback(e, {
+                    context: tracker.context,
+                    type: tracker.type,
+                    data: tracker.data
+                });
+            } : function (e: any) {
+                    tracker.callback(e, {
+                        context: tracker.context,
+                        type: tracker.type,
+                        data: tracker.data
+                    });
+                }
+        })
+
+        return (
+            <Component
+                { ...props }
+                { ...eventObject }
+            />
+        );
+    };
+};

src/components/elements/Button/index.tsx

@@ -6,7 +6,13 @@ import {
 
 import 'antd/lib/button/style/css';
 
-import { withDataContext } from '../../contexts/withDataContext';
+import {
+    withDataContext,
+} from '../../contexts/withDataContext';
+
+import {
+    withTracking,
+} from '../../contexts/withTracking';
 
 interface ButtonStateProps extends AntButtonProps {
     label: string;
@@ -22,14 +28,14 @@ export type ButtonProps = ButtonStateProps & ButtonActionProps
 function Button(props: ButtonProps) {
     const { label, context, onClick, customCallback, ...rest } = props;
 
-    function handleClick(e: React.MouseEvent) {
-        customCallback && customCallback(context);
-    }
+    // function handleClick(e: React.MouseEvent) {
+    //     customCallback && customCallback(context);
+    // }
 
     return (
         <AntButton
             {...rest}
-            onClick={handleClick}
+            onClick={onClick}
         >
             {props.label}
         </AntButton>
@@ -38,4 +44,5 @@ function Button(props: ButtonProps) {
 
 export default Button;
 
-export const ButtonWithContext = withDataContext(Button)
+export const ButtonWithContext = withDataContext(Button)
+export const ButtonWithTracking = withTracking(Button)

src/components/elements/Input/index.tsx

@@ -3,8 +3,12 @@ import { Input as AntInput, InputProps as AntInputProps } from 'antd';
 
 import 'antd/lib/input/style/css';
 
-export interface InputProps extends AntInputProps {
+import {
+    withTracking,
+} from '../../contexts/withTracking';
 
+export interface InputProps extends AntInputProps {
+    
 }
 
 function Input(props: InputProps) {
@@ -16,4 +20,6 @@ function Input(props: InputProps) {
     );
 }
 
-export default Input;
+export default Input;
+
+export const InputWithTracking = withTracking(Input)

src/components/templates/LoginForm/index.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, createContext } from 'react';
 import { DataContext } from '../../contexts/withDataContext';
-import Button, {ButtonWithContext} from '../../elements/Button';
+import Button, { ButtonWithContext, ButtonWithTracking } from '../../elements/Button';
 
 import Input from '../../elements/Input';
 
@@ -16,23 +15,38 @@ const data = {
 }
 
 function LoginForm(props: LoginFormProps) {
-    function getContext (data: any) {
-        // console.log(data);
+
+    function verifyUsernameAndPassword (e: React.MouseEvent<HTMLElement, MouseEvent>) {
+        // app logic goes here
+    }
+
+    function logMouseEvent (event: React.MouseEvent<HTMLElement, MouseEvent>, data: any) {
+        // tracking logic goes here
     }
 
     return (
         <DataContext.Provider value={data}>
             <Card
                 title="Login"
                 actions={[
-                    <ButtonWithContext
+                    <ButtonWithTracking
                         type="primary"
                         label="Login"
-                        customCallback={getContext}
+                        onClick={(e: any) => verifyUsernameAndPassword(e.value)}
+                        trackers={[{
+                            context: "Login and Signup",
+                            type: "onClick",
+                            callback: logMouseEvent,
+                            data: {
+                                element: "Login button",
+                                ...data,
+                            }
+                        }]}
                     />,
                     <Button
                         type="ghost"
                         label="Sign Up"
+                        onClick={verifyUsernameAndPassword}  
                     />
                 ]}>
                 <Input