feat(UserInteractionResource): Storage strategy

- Use storage ES6 module as a singleton
- Use workerize loader to use storage functions inside a web-worker

Storage Strategy:
- Add support for a `tll` param, to reattempt data compression + server-sync after certain time interval
- Add Re-attempt logic

Author: purnimagupta

src/components/templates/LandingPageOne/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { Layout, Menu } from 'antd';
 import styled from 'styled-components';
 
@@ -10,31 +11,33 @@ import { DataContext } from '../../../library/user-analytics/react/contexts/data
 import { ButtonWithTracking } from '../../elements/Button';
 import { InputWithTracking } from '../../elements/Input';
 import { MenuItemWithTracking } from '../../elements/Menu/MenuItem';
+import { workerInstance } from '../../../library/user-analytics/lib/data-processing/web-worker';
 
-import { StorageClient } from '../../../library/user-analytics/lib/data-processing/storage';
-const { Content } = Layout;
+const worker = workerInstance.getInstance();
+
+worker.init({
+    resourceLimit: 5,
+    ttl: 7000,
+    apiUrl: 'http://localhost:3000/events',
+    dataKey: "events"
+});
 
+const { Content } = Layout;
 
 export interface LandingPageProps extends NavbarProps {
     items: string[];
 }
 
-const storage = StorageClient.init({
-    resourceLimit: 3,
-    apiUrl: 'http://localhost:3000/events',
-});
-
 const data = {
     context: "Landing Page",
     app: {
         version: "1",
     },
 } as UserInteraction.DataContext;
 
-
 function LandingPage(props: LandingPageProps) {
 
-    function handleClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+    function handleNavbarClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
         // app logic goes here
         console.log("navbar link has been clicked with this Item", e);
     }
@@ -56,8 +59,8 @@ function LandingPage(props: LandingPageProps) {
             do whatever you want with the resource,
             like save it to IndexedDB, compress it, save it via API, etc
         */
-
-        storage.handle(event, interactionResource);
+        worker.handle(interactionResource);        
+        
     }
 
     const headerStyle = {
@@ -71,14 +74,13 @@ function LandingPage(props: LandingPageProps) {
                 trackers={[
                     {
                         action: "onClick",
-                        track: storage.handle,
-
+                        track: logEvent,
                     }
                 ]}
                 origin="NavBar Header"
                 key={k}
                 name={item}
-                onClick={handleClick}
+                onClick={handleNavbarClick}
             >
                 {item}
             </MenuItemWithTracking>

src/library/user-analytics/lib/data-processing/compression.ts

@@ -2,4 +2,4 @@ import pako from "pako";
 
 export function gzip(data: any) : Uint8Array {
     return pako.gzip(JSON.stringify(data));
-}
+}

src/library/user-analytics/lib/data-processing/storage.ts

@@ -1,81 +1,116 @@
-// localforage
 import localforage from 'localforage';
 
 import UserInteractionResource from '../resources/userInteractionResource';
-import { init } from './web-worker';
 
-const worker = init();
+import { gzip } from './compression';
 
-interface StorageSettings {
+declare let self: WorkerGlobalScope;
+
+(function (self) {
+    console.log("WorkerGlobalScope: ", WorkerGlobalScope)
+    console.log("self: ", self);
+})(self);
+
+export interface StorageSettings {
     resourceLimit: number;
+    ttl: number;
     apiUrl: string;
     dataKey?: string;
 }
 
 const STORAGE_SETTINGS_DEFAULTS : Required<StorageSettings> = {
     resourceLimit: 0,
+    ttl: 5000,
     apiUrl: "",
     dataKey: "events",
+
 }
 
-export const StorageClient = (function () {
-    let storageSettings : Required<StorageSettings> = STORAGE_SETTINGS_DEFAULTS;
-    
-    return {
-        init: function (options: StorageSettings) {
-            if (storageSettings.resourceLimit === 0) {
-                storageSettings = {
-                    ...options,
-                    dataKey: options.dataKey ? options.dataKey : storageSettings.dataKey
-                };
-            }
+let storageSettings : Required<StorageSettings> = STORAGE_SETTINGS_DEFAULTS;
+let isAppLoaded : boolean = true;
+
+export async function init(options: StorageSettings) {
+    if (storageSettings.resourceLimit === 0) {
+        storageSettings = {
+            ...options,
+            dataKey: options.dataKey ? options.dataKey : storageSettings.dataKey,
+        };
+    }
 
-            return this;
-        },
+    reAttemptSync(storageSettings.apiUrl, storageSettings.ttl, storageSettings.dataKey);
+}
 
-        getConfig: function() {
-            return storageSettings;
-        },
+export function getConfig() {
+    return storageSettings;
+}
+
+export async function handle(data: UserInteractionResource) {
+    let eventsData = await retrieveData(storageSettings.dataKey) as any[];
+
+    if(eventsData) {
+        if(eventsData.length < storageSettings.resourceLimit) {
+            saveData(storageSettings.dataKey, [data, ...eventsData]);
+        } else {
+            if(self.navigator.onLine) {
+                const compressedData = gzip(eventsData) as Uint8Array;
+
+                syncData(storageSettings.apiUrl, compressedData)
+                    .then((res) => {
+                        clearData();
+                        saveData(storageSettings.dataKey, [data]);
+                    })
+                    .catch(err => {
+                        saveData(storageSettings.dataKey, [data, ...eventsData])
+                    })     
+            }
+            else {
+                saveData(storageSettings.dataKey, [data, ...eventsData]);
+            }
+        }
+    } else {
+        saveData(storageSettings.dataKey, [data]);
+    }
+    
+}
 
-        handle: async function(
-            event: React.MouseEvent<HTMLElement, MouseEvent>, data: UserInteractionResource
-        ) {
-            let eventsData = await retrieveData(storageSettings.dataKey) as any[];
+export function onAppClose() {
+    isAppLoaded = false;
+    reAttemptSync(storageSettings.apiUrl, storageSettings.ttl, storageSettings.dataKey);
+}
 
+function reAttemptSync(url: string, ttl: number, key: string) {
+    
+    async function compressAndSend(){
+        if(self.navigator.onLine) {
+            const eventsData = await retrieveData(key) as any[];
             if(eventsData) {
-                if(eventsData.length < storageSettings.resourceLimit) {
-                    saveData(storageSettings.dataKey, [data, ...eventsData]);
-                } else {
-                    if(window.navigator.onLine) {
-                        const compressedData = await worker.gzip(eventsData) as Uint8Array;
-                        
-                        syncData(storageSettings.apiUrl, compressedData)
-                            .then((res) => {
-                                clearData();
-                                saveData(storageSettings.dataKey, [data]);
-                            })
-                            .catch(err => {
-                                saveData(storageSettings.dataKey, [data, ...eventsData])
-                            })     
-                    }
-                    else {
-                        saveData(storageSettings.dataKey, [data, ...eventsData]);
-                    }
-                }
+                const compressedData = gzip(eventsData) as Uint8Array;
+
+                syncData(url, compressedData)
+                    .then((res) => {
+                        clearData();
+                    })
+                    .catch(err => {
+                        console.log("error is", err)
+                    });
             } else {
-                saveData(storageSettings.dataKey, [data]);
+                if (!isAppLoaded) {
+                    // @ts-ignore
+                    self.close(); // kill web worker
+                }
             }
-            
         }
-    };
-})();
+    }
+
+    const interval = setInterval(compressAndSend, ttl);
 
+}
 
-function retrieveData(key: string) {
+export function retrieveData(key: string) {
     return localforage.getItem(key)
 }
 
-function saveData(key: string, data: UserInteractionResource[]) : Promise<void> {
+export function saveData(key: string, data: UserInteractionResource[]) : Promise<void> {
     return localforage.setItem(key, data)
         .then((result) => {
             // console.log(result)
@@ -85,11 +120,8 @@ function saveData(key: string, data: UserInteractionResource[]) : Promise<void>
         });
 }
 
-function clearData() {
+export function clearData() {
     localforage.clear()
-        .then((data) => {
-            console.log("data has been deleted successfully", data)
-        })
 }
 
 export async function syncData(url: string, data: Uint8Array) {
@@ -107,4 +139,4 @@ export async function syncData(url: string, data: Uint8Array) {
             body: data
         });
     return response.json();
-}
+}

src/library/user-analytics/lib/data-processing/web-worker.ts

@@ -1,7 +1,26 @@
 // @ts-ignore
-import worker from 'workerize-loader!../data-processing/compression'; // eslint-disable-line import/no-webpack-loader-syntax
+import worker from 'workerize-loader!./storage.ts'; // eslint-disable-line import/no-webpack-loader-syntax
 
-export function init() {
-    const instance = worker();
-    return instance;
-}
+export const workerInstance = (function () {
+    let instance: any;
+    function getInstance() {
+        if (instance) {
+            return instance;
+        }
+        instance = worker()
+        return instance;
+    }
+
+    return {
+        getInstance
+    }
+
+})();
+
+window.addEventListener("beforeunload", function (e) {
+    var confirmationMessage = "\o/";
+ 
+    (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
+    return confirmationMessage;                                /* Safari, Chrome, and other
+                                                                * WebKit-derived browsers */
+}, false);