Merge pull request #2 from booleanhunter/fix/hoc-context

refactor(UserInteractionResource): Change context prop type

Author: booleanhunter

src/components/templates/LandingPageOne/index.tsx

@@ -118,7 +118,12 @@ function LandingPage(props: LandingPageProps) {
 
                             // optional props
                             origin="Landing Page"
-                            // context="AntD Card"
+                            dataContext={{
+                                app: {
+                                    version: "0",
+                                },
+                                context: "Custom Landing page"
+                            }}
                         />,
                     ]}>
 

src/components/templates/LoginForm/index.tsx

@@ -63,7 +63,12 @@ function LoginForm(props: LoginFormProps) {
 
                         // optional props
                         origin="Login Button"
-                        // context="AntD Card"
+                        dataContext={{
+                            app: {
+                                version: "0",
+                            },
+                            context: "Custom login page"
+                        }}
                     />,
                     <Button
                         type="ghost"
@@ -75,16 +80,31 @@ function LoginForm(props: LoginFormProps) {
                     type="text"
                     placeholder="email"
 
-                    trackers={[{
-                        action: "onClick",
-                        track: logEvent,
-                        data: {
-                            customKey1: "input",
+                    trackers={[
+                        {
+                            action: "onClick",
+                            track: logEvent,
+                            data: {
+                                customKey1: "input",
+                            }
+                        },
+                        {
+                            action: "onChange",
+                            track: logEvent,
+                            data: {
+                                customKey1: "input",
+                            }
                         }
-                    }]}
+                    ]}
 
                     // optional props
-                    origin="Email Input"
+                    origin="Login Page Email Input"
+                    dataContext={{
+                        app: {
+                            version: "0",
+                        },
+                        context: "Custom login page"
+                    }}
                 />
                 <Input
                     type="password"

src/library/user-analytics/lib/interaction-tracking/browser.ts

@@ -1,4 +1,9 @@
-export function getUserOS() {
+interface OSDetails{
+    name: string;
+    version: string;
+}
+
+export function getUserOS() : OSDetails {
     const userAgent = window.navigator.userAgent;
     const platform = window.navigator.platform;
     const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];

src/library/user-analytics/lib/resources/userInteractionResource.ts

@@ -11,7 +11,7 @@ export default interface UserInteractionResource extends BaseResource {
     action: UserInteraction.Action;
     source: {
         context: string;
-        origin: string;
+        origin?: string;
         component: string;
         element: {
             currentTarget: string;

src/library/user-analytics/react/components/withTracking.tsx

@@ -8,7 +8,7 @@ import {
 import { DataContext } from '../contexts/dataContext';
 
 type TrackerProps = {
-    context?: string,
+    dataContext?: UserInteraction.DataContext;
     origin?: string,
     trackers: UserInteraction.Tracker[]
 } & Object<any>;
@@ -18,10 +18,13 @@ export function withTracking (
 ) {
     return function Fn(props: TrackerProps) {
         let eventHandlers: Object<any> = {};
-        const { trackers, ...originalProps } = props;
+        const { trackers, origin, dataContext: dataContextFromProps, ...originalProps } = props;
 
-        const dataContext = useContext(DataContext);
-        const context = props.context ? props.context : dataContext.context;
+        let dataContext = useContext(DataContext);
+
+        if (dataContextFromProps) {
+            dataContext = dataContextFromProps
+        }
 
         function trackUserInteraction(
             e: React.SyntheticEvent,
@@ -33,8 +36,10 @@ export function withTracking (
                 dataContext.app,
                 tracker.action,
                 {
-                    context,
-                    origin: originalProps.origin || "",
+                    context: dataContext.context,
+                    ...(originalProps.origin && {
+                        origin: originalProps.origin
+                    }),
                     component: Component.displayName || Component.name,
                     element: {
                         currentTarget: e.currentTarget.nodeName,
@@ -63,7 +68,7 @@ export function withTracking (
 
         return (
             <Component
-                { ...props }
+                { ...originalProps }
                 { ...eventHandlers }
             />
         );