core-outline 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,6 +46,7 @@
   "dependencies": {
     "react-error-boundary": "^5.0.0",
     "react-tracking": "^9.3.2",
-    "rrweb": "^2.0.0-alpha.4"
+    "rrweb": "^2.0.0-alpha.4",
+    "socket.io-client": "^4.8.1"
   }
 }

package/src/components/CoreOutline/CoreOutline.js

@@ -1,19 +1,61 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { record } from 'rrweb';
+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");
 
-const CoreOutline = ({ children }) => {
+const CoreOutline = ({ children, data_source_id }) => {
   const [events, setEvents] = 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();
+
+  useEffect(() => {
+    socket.emit("dataEvent", {
+      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",
+    });
+
+    return () => {
+      socket.emit("dataEvent", {
+        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",
+      });
+    };
+  }, []);
 
   useEffect(() => {
-    console.log(currentPage);
     const handleNavigation = () => {
       setCurrentPage(window.location.href);
-      saveEvents(JSON.stringify(events));
+      socket.emit("dataEvent", {
+        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,
+        page_name: window.location.href,
+        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);
@@ -21,11 +63,16 @@ const CoreOutline = ({ children }) => {
     };
 
     return () => {
-      window.removeEventListener('popstate', handleNavigation);
+      window.removeEventListener("popstate", handleNavigation);
       window.history.pushState = originalPushState;
     };
   }, [currentPage]);
 
+  useEffect(() => {
+    console.log("Location", location);
+    getLocation();
+  }, []);
+
   useEffect(() => {
     let stopFn;
     if (!recorderActive.current) {
@@ -41,22 +88,47 @@ const CoreOutline = ({ children }) => {
     return () => {
       if (stopFn) {
         stopFn();
+        saveEvents(events);
 
         recorderActive.current = false;
       }
     };
   }, []);
 
+  useEffect(() => {
+    const handleClick = (event) => {
+      console.log("Button clicked:", event.target.id);
+      // const itemId = event.target.id;
+      socket.emit("dataEvent", {
+        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,
+      });
+    };
+
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      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')
+    fetch(`http://localhost:8000/generate-s3-url/${data_source_id}/${sessionId}`)
       .then((response) => response.json())
       .then((data) => {
         const uploadURL = data.signed_url;
@@ -64,6 +136,49 @@ const CoreOutline = ({ children }) => {
       });
   }
 
+  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";
+    }
+
+    return browserName;
+  }
+
+  useEffect(() => {
+    if (events.length > 0) {
+      socket.emit("record-event", { sessionId, events });
+    }
+  }, [events]);
+
+  function getLocation() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setLocation({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          });
+        },
+        (error) => {
+          console.error("Error getting location:", error);
+        }
+      );
+    } else {
+      console.error("Geolocation is not supported by this browser.");
+    }
+  }
+
   return <div>{children}</div>;
 };