core-outline 1.1.4 → 1.1.6

package/src/components/CoreOutline/CoreOutline.js

@@ -1,48 +1,109 @@
-import React, { useEffect, useRef, useState } from "react";
-import { record } from "rrweb";
-import { v4 } from "uuid";
-import io from "socket.io-client";
-const socket = io("http://localhost:4000");
+import React, { useEffect, useRef, useState } from 'react';
+import { record } from 'rrweb';
+import { v4 } from 'uuid';
+import socket from './socket';
 
-const CoreOutline = ({ children, data_source_id }) => {
+import {
+  EventType,
+  eventWithTime,
+  IncrementalSource,
+  MouseInteractions,
+} from 'rrweb';
+
+const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
   const [events, setEvents] = useState([]);
+  const [replayEvents, setReplayEvents] = useState([]);
   const recorderActive = useRef(false);
   const [currentPage, setCurrentPage] = useState(window.location.href);
   const [location, setLocation] = useState({ latitude: null, longitude: null });
   const [browser, setBrowser] = useState(getBrowserInfo());
-  const sessionId = v4();
+  const [appToken, setAppToken] = useState('');
+  const [sessionId, setSessionId] = useState('');
 
-  useEffect(() => {
-    socket.emit("dataEvent", {
-      topic: "session-data",
+  async function authorizeApp(data_source_id, data_source_secret) {
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        data_source_id: data_source_id,
+        data_source_secret: data_source_secret,
+      }),
+    };
+    const response = fetch(
+      `http://localhost:4000/data-source/authorize`,
+      requestOptions
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        setAppToken(data.app_token);
+        return data;
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        return error;
+      });
+    return response;
+  }
+  useEffect(async () => {
+    await authorizeApp(data_source_id, data_source_secret);
+    setSessionId(v4());
+    localStorage.setItem('coreOutlineSessionId', sessionId);
+    localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
+    console.log('Session', sessionId);
+    socket.send({
+      topic: 'session-data',
       data_source_id: data_source_id,
       session_id: sessionId,
       start_date: new Date().toLocaleString(),
       latitude: location.latitude,
       longitude: location.longitude,
       browser: browser,
-      event_id: "SESSION_START",
+      event_id: 'SESSION_START',
     });
 
     return () => {
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: "SESSION_END",
+        event_id: 'SESSION_END',
       });
     };
   }, []);
 
   useEffect(() => {
+    const navigationEvent = {
+      type: 4,
+      data: {
+        href: window.location.href,
+        width: 1536,
+        height: 730,
+      },
+      timestamp: Date.now(),
+    };
+    const startTime = performance.now();
+    const observer = new MutationObserver(() => {
+      const endTime = performance.now();
+      const loadTime = endTime - startTime;
+      navigationEvent.data.loadTime = loadTime;
+      const hours = Math.floor(loadTime / 3600000);
+      const minutes = Math.floor((loadTime % 3600000) / 60000);
+      const seconds = Math.floor((loadTime % 60000) / 1000);
+      navigationEvent.data.loadTimeFormatted = `${hours} hours ${minutes} minutes ${seconds} seconds`;
+      observer.disconnect();
+    });
+    observer.observe(document, { childList: true, subtree: true });
+    setEvents((prevEvents) => [...prevEvents, navigationEvent]);
     const handleNavigation = () => {
       setCurrentPage(window.location.href);
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
@@ -50,12 +111,12 @@ const CoreOutline = ({ children, data_source_id }) => {
         longitude: location.longitude,
         browser: browser,
         page_name: window.location.href,
-        event_id: "PAGE_NAVIGATION",
+        event_id: 'PAGE_NAVIGATION',
       });
       saveEvents(events);
     };
 
-    window.addEventListener("popstate", handleNavigation);
+    window.addEventListener('popstate', handleNavigation);
     const originalPushState = window.history.pushState;
     window.history.pushState = function (...args) {
       originalPushState.apply(this, args);
@@ -63,13 +124,13 @@ const CoreOutline = ({ children, data_source_id }) => {
     };
 
     return () => {
-      window.removeEventListener("popstate", handleNavigation);
+      window.removeEventListener('popstate', handleNavigation);
       window.history.pushState = originalPushState;
     };
   }, [currentPage]);
 
   useEffect(() => {
-    console.log("Location", location);
+    console.log('Location', location);
     getLocation();
   }, []);
 
@@ -78,8 +139,50 @@ const CoreOutline = ({ children, data_source_id }) => {
     if (!recorderActive.current) {
       stopFn = record({
         emit(event) {
+          setReplayEvents((prevEvents) => [...prevEvents, event]);
+        },
+        maskAllInputs: false,
+        maskTextSelector: null,
+      });
+
+      recorderActive.current = true;
+    }
+
+    return () => {
+      if (stopFn) {
+        stopFn();
+        saveEvents(events);
+
+        recorderActive.current = false;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    let stopFn;
+    if (!recorderActive.current) {
+      stopFn = record({
+        emit(event) {
+          console.log('Event:', event);
+          if (event.type == 3 && event.data.type == 2) {
+            return;
+          }
+          if (event.type == 4) {
+            return;
+          }
+          if (event.type == 3 && event.data.source == 0) {
+            return;
+          }
+          if (event.type == 3 && event.data.source == 1) {
+            return;
+          }
+          if (event.type == 3 && event.data.type == 3) {
+            console.log('Contextmenu Event:', event);
+          }
           setEvents((prevEvents) => [...prevEvents, event]);
         },
+        maskAllInputs: false,
+        maskTextSelector: null,
       });
 
       recorderActive.current = true;
@@ -97,38 +200,83 @@ const CoreOutline = ({ children, data_source_id }) => {
 
   useEffect(() => {
     const handleClick = (event) => {
-      console.log("Button clicked:", event.target.id);
-      // const itemId = event.target.id;
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      console.log('Inner text:', event.target.innerText);
+      const clickEvent = {
+        type: EventType.IncrementalSnapshot,
+        data: {
+          source: IncrementalSource.MouseInteraction,
+          type: MouseInteractions.Click,
+          id: event.target.id,
+          x: event.clientX,
+          y: event.clientY,
+        },
+        timestamp: Date.now(),
+      };
+      const clickedElement = document.elementFromPoint(
+        clickEvent.data.x,
+        clickEvent.data.y
+      );
+
+      if (clickedElement) {
+        clickEvent.data.metadata = {
+          label:
+            clickedElement.getAttribute('data-label') ||
+            clickedElement.innerText ||
+            null,
+          value:
+            clickedElement.getAttribute('value') ||
+            clickedElement.innerText ||
+            null,
+          id:
+            clickedElement.getAttribute('id') ||
+            clickedElement.innerText ||
+            null,
+          name:
+            clickedElement.getAttribute('name') ||
+            clickedElement.innerText ||
+            null,
+          class:
+            clickedElement.getAttribute('class') ||
+            clickedElement.innerText ||
+            null,
+          tag: clickedElement.tagName,
+          html: String(clickedElement.getHTML()),
+          innerText: event.target.innerText,
+        };
+      }
+      setEvents((prevEvents) => [...prevEvents, clickEvent]);
+
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: "ITEM_CLICKED",
-        item_clicked: event.target,
+        event_id: 'ITEM_CLICKED',
+        // item_clicked: event.target,
       });
     };
 
-    document.addEventListener("click", handleClick);
+    document.addEventListener('click', handleClick);
 
     return () => {
-      document.removeEventListener("click", handleClick);
+      document.removeEventListener('click', handleClick);
     };
   }, []);
 
   function saveEvents(events) {
     const requestOptions = {
-      method: "PUT",
+      method: 'PUT',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify(events),
     };
-
-    fetch(`http://localhost:8000/generate-s3-url/${data_source_id}/${sessionId}`)
+    fetch(
+      `http://localhost:5000/generate-s3-url/${data_source_id}/${sessionId}`
+    )
       .then((response) => response.json())
       .then((data) => {
         const uploadURL = data.signed_url;
@@ -136,31 +284,50 @@ const CoreOutline = ({ children, data_source_id }) => {
       });
   }
 
+  function saveEventsLocally(type = 'formatted' || 'raw') {
+    let blob = '';
+    if (type === 'formatted') {
+      blob = new Blob([JSON.stringify(events, null, 2)], {
+        type: 'application/json',
+      });
+    } else if (type === 'raw') {
+      blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
+        type: 'application/json',
+      });
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${type}_events.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   function getBrowserInfo() {
     const userAgent = navigator.userAgent;
-    let browserName = "Unknown";
-
-    if (userAgent.indexOf("Firefox") > -1) {
-      browserName = "Firefox";
-    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
-      browserName = "Opera";
-    } else if (userAgent.indexOf("Chrome") > -1) {
-      browserName = "Chrome";
-    } else if (userAgent.indexOf("Safari") > -1) {
-      browserName = "Safari";
-    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
-      browserName = "Internet Explorer";
+    let browserName = 'Unknown';
+
+    if (userAgent.indexOf('Firefox') > -1) {
+      browserName = 'Firefox';
+    } else if (
+      userAgent.indexOf('Opera') > -1 ||
+      userAgent.indexOf('OPR') > -1
+    ) {
+      browserName = 'Opera';
+    } else if (userAgent.indexOf('Chrome') > -1) {
+      browserName = 'Chrome';
+    } else if (userAgent.indexOf('Safari') > -1) {
+      browserName = 'Safari';
+    } else if (
+      userAgent.indexOf('MSIE') > -1 ||
+      userAgent.indexOf('Trident/') > -1
+    ) {
+      browserName = 'Internet Explorer';
     }
 
     return browserName;
   }
 
-  useEffect(() => {
-    if (events.length > 0) {
-      socket.emit("record-event", { sessionId, events });
-    }
-  }, [events]);
-
   function getLocation() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
@@ -171,15 +338,59 @@ const CoreOutline = ({ children, data_source_id }) => {
           });
         },
         (error) => {
-          console.error("Error getting location:", error);
+          console.error('Error getting location:', error);
         }
       );
     } else {
-      console.error("Geolocation is not supported by this browser.");
+      console.error('Geolocation is not supported by this browser.');
     }
   }
 
-  return <div>{children}</div>;
+  return (
+    <div>
+      <button
+        onClick={() => {
+          saveEventsLocally('formatted');
+          saveEventsLocally('raw');
+        }}
+      >
+        Save Events Locally
+      </button>
+      {children}
+    </div>
+  );
+};
+
+export const flag_item_clicked = (item_id) => {
+  const sessionId = localStorage.getItem('coreOutlineSessionId');
+  const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
+  socket.send({
+    topic: 'session-data',
+    data_source_id: dataSourceId,
+    session_id: sessionId,
+    start_date: new Date().toLocaleString(),
+    event_id: 'PRODUCT_CLICKED',
+    item_clicked: item_id,
+  });
+  return { status: 'success', message: 'Item click flagged successfully.' };
+};
+
+export const flag_item_purchased = (item_id) => {
+  const sessionId = localStorage.getItem('coreOutlineSessionId');
+  const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
+  socket.send({
+    topic: 'session-data',
+    data_source_id: dataSourceId,
+    session_id: sessionId,
+    start_date: new Date().toLocaleString(),
+    event_id: 'PRODUCT_PURCHASED',
+    item_clicked: item_id,
+  });
+  return { status: 'success', message: 'Item purchase flagged successfully.' };
 };
 
 export default CoreOutline;

package/src/components/CoreOutline/socket.js

@@ -0,0 +1,3 @@
+import { io } from 'socket.io-client';
+const socket = io('http://localhost:8000');
+export default socket;