@capillarytech/cap-ui-utils 1.0.2 → 1.0.3

package/GA/index.js

@@ -0,0 +1,44 @@
+import ReactGA from 'react-ga';
+import ttiPolyfill from 'tti-polyfill';
+import { startTracking, stopTracking } from './utils/timeTracker';
+import { trackException } from './utils/tracker';
+
+ReactGA.initialize('UA-152081629-1');
+
+//Track Error
+window.addEventListener('error', function(e) {
+  trackException(`UI Error ${e.message}`);
+});
+
+//Track windo Active and inActive time.
+window.addEventListener('visibilitychange', function() {
+  document.hidden ? stopTracking() : startTracking();
+});
+
+ttiPolyfill.getFirstConsistentlyInteractive().then(tti => {
+  console.log('performance tti', tti);
+});
+
+const callback = list => {
+  list.getEntries().forEach(entry => {
+    console.log('performance callback entry', entry);
+    console.log(
+      'performance callback server latentcy',
+      entry.responseStart - entry.requestStart,
+    );
+    console.log(
+      'performance callback download time',
+      entry.responseEnd - entry.responseStart,
+    );
+    console.log(
+      'performance callback load time',
+      entry.responseEnd - entry.requestStart,
+    );
+  });
+};
+
+var observer = new PerformanceObserver(callback);
+observer.observe({ entryTypes: ['navigation'] });
+var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+console.log('Performance metrics', perfData, pageLoadTime);

package/GA/utils/routeTrackerWrapper.js

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import ReactGA from 'react-ga';
+// import path from '../config/path';
+
+// const rootPath = path.publicPath;
+
+// const getPageUrl = (component, pageUrl) => {
+//   switch (component) {
+//     case 'createCampaign':
+//       return `${rootPath}/${pageUrl.split('/')[3]}`;
+//     case 'messageSummary':
+//       return `${rootPath}/campaign/message/view`;
+//     case 'campaignMessage':
+//       return `${rootPath}/campaign/message/${pageUrl.split('/')[6]}`;
+//     case 'campaignReports':
+//       return `${rootPath}/campaign/reports`;
+//     case 'CampaignDetails':
+//       return `${rootPath}/campaign`;
+//     default:
+//       return pageUrl;
+//   }
+// };
+// const withTracker = (WrappedComponent, options = {}, getPageUrl) => {
+  const trackPage = pageUrl => {
+    const { component } = options;
+    const pageView = component ? getPageUrl(component, pageUrl) : pageUrl;
+    ReactGA.pageview(pageView);
+  };
+
+  const HOC = props => {
+    useEffect(() => trackPage(props.location.pathname), [
+      props.location.pathname,
+    ]);
+    return <WrappedComponent {...props} />;
+  };
+  return HOC;
+};
+
+export default withTracker;

package/GA/utils/timeTracker.js

@@ -0,0 +1,50 @@
+import { trackEvent } from './reactGa';
+
+let trackableEvents = {};
+let trackingStoppedAt = 0;
+let windowWasInActive = false;
+
+let addInactiveTimeToEvents = inActiveInterval => {
+  Object.keys(trackableEvents).map(function(key) {
+    console.log('tracker', 'adjusted timing for', key);
+    trackableEvents[key] += inActiveInterval;
+  });
+};
+
+export function startTimer(event) {
+  console.log('tracker', 'Started timer for ', event);
+  trackableEvents[event] = Date.now();
+}
+
+export function stopTimer(event, options) {
+  const timeTaken = Date.now() - (trackableEvents[event] || 0);
+  delete trackableEvents[event];
+  console.log('tracker', 'stopped timer for ', event, timeTaken, options);
+  //Track the event timing
+  if (options) {
+    trackEvent({
+      category: options.category,
+      action: options.action,
+      label: options.label,
+      value: timeTaken,
+    });
+  }
+  return timeTaken;
+}
+
+export function stopTracking() {
+  trackingStoppedAt = Date.now();
+  windowWasInActive = true;
+  console.log('tracker', 'window is inactive');
+}
+
+export function startTracking() {
+  if (!windowWasInActive) {
+    return false;
+  }
+  const inActiveInterval = Date.now() - trackingStoppedAt;
+  console.log('tracker', 'window was inactive for ', inActiveInterval);
+  trackingStoppedAt = 0;
+  windowWasInActive = false;
+  addInactiveTimeToEvents(inActiveInterval);
+}

package/GA/utils/tracker.js

@@ -0,0 +1,14 @@
+import ReactGA from 'react-ga';
+
+export function trackEvent() {}
+
+export function trackTiming() {}
+
+export function trackPageView() {}
+
+export function trackException(description, fatal = true) {
+  ReactGA.exception({
+    description,
+    fatal,
+  });
+}

package/auth/AccessForbidden.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const AccessForbidden = props => {
   return (
-    <div>AccessForbidden AccessForbidden</div>
+    <div>AccessForbidden</div>
   );
 };
 

package/auth/index.js

@@ -40,7 +40,6 @@ function _initialize(authConfigs) {
  * @param authOptions
  */
 function initialize(authConfigs, authOptions) {
-  log("Before initialize 1")
   if (isEmpty(authConfigs)) {
     warn("Cannot initialize empty object");
     return;
@@ -55,7 +54,6 @@ function initialize(authConfigs, authOptions) {
       return;
     }
   }
-  log("Before initialize")
   _initialize(authConfigs);
   return true;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,6 +8,8 @@
   },
   "author": "Rajshekar",
   "dependencies": {
-    "react": "^16.13.0"
+    "react": "^16.13.0",
+    "react-ga": "^2.7.0",
+    "tti-polyfill": "^0.2.2"
   }
 }