core-outline 1.1.10 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/CoreOutline/CoreOutline.js

@@ -1,14 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { record } from 'rrweb';
-import { v4 } from 'uuid';
-import socket from './socket';
+import React, { useEffect, useRef, useState } from "react";
+import { record } from "rrweb";
+import { v4 } from "uuid";
+import socket from "./socket";
 
-import {
-  EventType,
-  eventWithTime,
-  IncrementalSource,
-  MouseInteractions,
-} from 'rrweb';
+import { EventType, eventWithTime, IncrementalSource, MouseInteractions } from "rrweb";
 
 const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
   const [events, setEvents] = useState([]);
@@ -17,62 +12,60 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
   const [currentPage, setCurrentPage] = useState(window.location.href);
   const [location, setLocation] = useState({ latitude: null, longitude: null });
   const [browser, setBrowser] = useState(getBrowserInfo());
-  const [appToken, setAppToken] = useState('');
-  const [sessionId, setSessionId] = useState('');
+  const [appToken, setAppToken] = useState("");
+  const [sessionId, setSessionId] = useState("");
 
   async function authorizeApp(data_source_id, data_source_secret) {
     const requestOptions = {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "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
-    )
+    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);
+        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);
+    let sessId = v4();
+    setSessionId(sessId);
+    localStorage.setItem("coreOutlineSessionId", sessId);
+    localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
+    console.log("Session", sessId);
     socket.send({
-      topic: 'session-data',
+      topic: "session-data",
       data_source_id: data_source_id,
-      session_id: sessionId,
+      session_id: localStorage.getItem("coreOutlineSessionId"),
       start_date: new Date().toLocaleString(),
       latitude: location.latitude,
       longitude: location.longitude,
       browser: browser,
-      event_id: 'SESSION_START',
+      event_id: "SESSION_START",
     });
 
     return () => {
       socket.send({
-        topic: 'session-data',
+        topic: "session-data",
         data_source_id: data_source_id,
-        session_id: sessionId,
+        session_id: localStorage.getItem("coreOutlineSessionId"),
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: 'SESSION_END',
+        event_id: "SESSION_END",
       });
     };
   }, []);
@@ -103,20 +96,20 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     const handleNavigation = () => {
       setCurrentPage(window.location.href);
       socket.send({
-        topic: 'session-data',
+        topic: "session-data",
         data_source_id: data_source_id,
-        session_id: sessionId,
+        session_id: localStorage.getItem("coreOutlineSessionId"),
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         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);
@@ -124,13 +117,13 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     };
 
     return () => {
-      window.removeEventListener('popstate', handleNavigation);
+      window.removeEventListener("popstate", handleNavigation);
       window.history.pushState = originalPushState;
     };
   }, [currentPage]);
 
   useEffect(() => {
-    console.log('Location', location);
+    console.log("Location", location);
     getLocation();
   }, []);
 
@@ -163,7 +156,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     if (!recorderActive.current) {
       stopFn = record({
         emit(event) {
-          console.log('Event:', event);
+          console.log("Event:", event);
           if (event.type == 3 && event.data.type == 2) {
             return;
           }
@@ -177,7 +170,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
             return;
           }
           if (event.type == 3 && event.data.type == 3) {
-            console.log('Contextmenu Event:', event);
+            console.log("Contextmenu Event:", event);
           }
           setEvents((prevEvents) => [...prevEvents, event]);
         },
@@ -200,7 +193,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
 
   useEffect(() => {
     const handleClick = (event) => {
-      console.log('Inner text:', event.target.innerText);
+      console.log("Inner text:", event.target.innerText);
       const clickEvent = {
         type: EventType.IncrementalSnapshot,
         data: {
@@ -212,33 +205,15 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
         },
         timestamp: Date.now(),
       };
-      const clickedElement = document.elementFromPoint(
-        clickEvent.data.x,
-        clickEvent.data.y
-      );
+      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,
+          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,
@@ -247,36 +222,34 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
       setEvents((prevEvents) => [...prevEvents, clickEvent]);
 
       socket.send({
-        topic: 'session-data',
+        topic: "session-data",
         data_source_id: data_source_id,
-        session_id: sessionId,
+        session_id: localStorage.getItem("coreOutlineSessionId"),
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: 'ITEM_CLICKED',
+        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:5000/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;
@@ -284,19 +257,15 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
       });
   }
 
-  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',
-      });
+  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');
+    const a = document.createElement("a");
     a.href = url;
     a.download = `${type}_events.json`;
     a.click();
@@ -305,24 +274,18 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
 
   function getBrowserInfo() {
     const userAgent = navigator.userAgent;
-    let browserName = 'Unknown';
+    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';
+    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;
@@ -338,51 +301,59 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
           });
         },
         (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>
+      <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);
+  const sessionId = localStorage.getItem("coreOutlineSessionId");
+  const dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
+  console.log("Session", sessionId);
+  console.log("Data Source", dataSourceId);
   socket.send({
-    topic: 'session-data',
+    topic: "session-data",
     data_source_id: dataSourceId,
-    session_id: sessionId,
+    session_id: localStorage.getItem("coreOutlineSessionId"),
     start_date: new Date().toLocaleString(),
-    event_id: 'PRODUCT_CLICKED',
+    event_id: "PRODUCT_CLICKED",
     item_clicked: item_id,
   });
-  return { status: 'success', message: 'Item click flagged successfully.' };
+  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);
+  const sessionId = localStorage.getItem("coreOutlineSessionId");
+  const dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
+  console.log("Session", sessionId);
+  console.log("Data Source", dataSourceId);
   socket.send({
-    topic: 'session-data',
+    topic: "session-data",
     data_source_id: dataSourceId,
-    session_id: sessionId,
+    session_id: localStorage.getItem("coreOutlineSessionId"),
     start_date: new Date().toLocaleString(),
-    event_id: 'PRODUCT_PURCHASED',
+    event_id: "PRODUCT_PURCHASED",
     item_clicked: item_id,
   });
-  return { status: 'success', message: 'Item purchase flagged successfully.' };
+  return { status: "success", message: "Item purchase flagged successfully." };
 };
 
 export default CoreOutline;