feat(UserInteractionResource): Storage strategy

- Use localforage to store UserInteractionResource in browser
- Use gzip to compress data within Worker

Define Storage settings to determine location & frequency of storage strategy:
- resourceLimit: Invoke storage strategy when resource reaches a certain number
- apiUrl: Endpoint to send compressed resources array
- dataKey: Key to be used in browser store

Author: purnimagupta

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package-lock.json

@@ -12,13 +12,15 @@
     "@types/react-dom": "^17.0.0",
     "@types/styled-components": "^5.1.8",
     "antd": "^4.12.3",
+    "localforage": "^1.9.0",
+    "pako": "^2.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "workerize-loader": "^1.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -53,6 +55,7 @@
     "@storybook/addon-links": "^6.1.18",
     "@storybook/node-logger": "^6.1.18",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "^6.1.18"
+    "@storybook/react": "^6.1.18",
+    "@types/pako": "^1.0.1"
   }
 }

package.json

@@ -1,37 +1,37 @@
 import { Layout, Menu } from 'antd';
+import styled from 'styled-components';
 
 import NavBar, { NavbarProps } from '../../widgets/NavBar';
 import Card from '../../widgets/Card';
 
-import styled  from 'styled-components';
-import
-    UserInteractionResource,
-    {
-        UserInteraction,
-    }
-from '../../../library/user-analytics/lib/resources/userInteractionResource';
+import UserInteractionResource, { UserInteraction } from '../../../library/user-analytics/lib/resources/userInteractionResource';
 import { DataContext } from '../../../library/user-analytics/react/contexts/dataContext';
 
-// import Header from '../../elements/Header';
 import { ButtonWithTracking } from '../../elements/Button';
 import { InputWithTracking } from '../../elements/Input';
 import { MenuItemWithTracking } from '../../elements/Menu/MenuItem';
 
-const { Header, Content, Footer } = Layout;
+import { StorageClient } from '../../../library/user-analytics/lib/data-processing/storage';
+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>) {
@@ -51,14 +51,17 @@ function LandingPage(props: LandingPageProps) {
         // tracking logic goes here
         console.log("logEvent");
         console.log(interactionResource);
+
         /*
             do whatever you want with the resource,
             like save it to IndexedDB, compress it, save it via API, etc
         */
+
+        storage.handle(event, interactionResource);
     }
 
     const headerStyle = {
-        textAlign: "center" as "center" 
+        textAlign: "center" as "center"
     };
 
     const { mode, theme, items, style, logo } = props;
@@ -68,8 +71,8 @@ function LandingPage(props: LandingPageProps) {
                 trackers={[
                     {
                         action: "onClick",
-                        track: logEvent,
-                        
+                        track: storage.handle,
+
                     }
                 ]}
                 origin="NavBar Header"
@@ -81,11 +84,11 @@ function LandingPage(props: LandingPageProps) {
             </MenuItemWithTracking>
         )
     });
-    
+
     return (
         <DataContext.Provider value={data}>
-             <Layout className="layout">
-                <NavBar 
+            <Layout className="layout">
+                <NavBar
                     mode={mode}
                     theme={theme}
                     style={style}
@@ -97,19 +100,19 @@ function LandingPage(props: LandingPageProps) {
                     <div style={headerStyle}>
                         <h1>Let us help solve your critical website development challenges.</h1>
                     </div>
-                </StyledContent>   
+                </StyledContent>
                 <NewsLetter
                     title="Newsletter"
                     actions={[
                         <ButtonWithTracking
                             type="primary"
                             label="Subscribe"
                             onClick={verifyEmail}
-                            
+
                             trackers={[{
                                 action: "onClick",
                                 track: logEvent,
-                                
+
                                 // pass optional custom data
                                 data: {
                                     color: "blue",
@@ -126,7 +129,7 @@ function LandingPage(props: LandingPageProps) {
                             }}
                         />,
                     ]}>
-                
+
                     <InputWithTracking
                         type="text"
                         placeholder="Type your email"
@@ -152,7 +155,7 @@ function LandingPage(props: LandingPageProps) {
                         // optional props
                         origin="Email Input"
                     />
-                </NewsLetter> 
+                </NewsLetter>
             </Layout>
         </DataContext.Provider>
     )

src/components/templates/LandingPageOne/index.tsx

@@ -9,7 +9,7 @@ import { DataContext } from '../../../library/user-analytics/react/contexts/data
 import Button, { ButtonWithTracking } from '../../elements/Button';
 import Input, { InputWithTracking } from '../../elements/Input';
 import Card from '../../widgets/Card';
-
+import { useEffect } from 'react';
 export interface LoginFormProps {
 
 }
@@ -22,6 +22,13 @@ const data = {
 } as UserInteraction.DataContext;
 
 function LoginForm(props: LoginFormProps) {
+    // useEffect(() => {
+    //     if(typeof(window.Worker) !== 'undefined') {
+            
+    //         newWorker = new WebWorker(worker)
+            
+    //     }
+    // },[])
 
     function verifyUsernameAndPassword(e: React.MouseEvent<HTMLElement, MouseEvent>) {
         // app logic goes here
@@ -39,6 +46,8 @@ function LoginForm(props: LoginFormProps) {
             do whatever you want with the resource,
             like save it to IndexedDB, compress it, save it via API, etc
         */
+        //console.log("worker is", worker)
+       
     }
 
     return (

src/components/templates/LoginForm/index.tsx

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

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

@@ -0,0 +1,110 @@
+// localforage
+import localforage from 'localforage';
+
+import UserInteractionResource from '../resources/userInteractionResource';
+import { init } from './web-worker';
+
+const worker = init();
+
+interface StorageSettings {
+    resourceLimit: number;
+    apiUrl: string;
+    dataKey?: string;
+}
+
+const STORAGE_SETTINGS_DEFAULTS : Required<StorageSettings> = {
+    resourceLimit: 0,
+    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
+                };
+            }
+
+            return this;
+        },
+
+        getConfig: function() {
+            return storageSettings;
+        },
+
+        handle: async function(
+            event: React.MouseEvent<HTMLElement, MouseEvent>, data: UserInteractionResource
+        ) {
+            let eventsData = await retrieveData(storageSettings.dataKey) 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]);
+                    }
+                }
+            } else {
+                saveData(storageSettings.dataKey, [data]);
+            }
+            
+        }
+    };
+})();
+
+
+function retrieveData(key: string) {
+    return localforage.getItem(key)
+}
+
+function saveData(key: string, data: UserInteractionResource[]) : Promise<void> {
+    return localforage.setItem(key, data)
+        .then((result) => {
+            // console.log(result)
+        })
+        .catch((err) => {
+            console.error("Error saving data", err)
+        });
+}
+
+function clearData() {
+    localforage.clear()
+        .then((data) => {
+            console.log("data has been deleted successfully", data)
+        })
+}
+
+export async function syncData(url: string, data: Uint8Array) {
+    const response = await fetch(url, {
+            method: 'POST',
+            //mode: 'cors',
+            cache: 'no-cache',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Encoding': "gzip",
+            
+            },
+            redirect: 'follow',
+            referrerPolicy: 'no-referrer',
+            body: data
+        });
+    return response.json();
+}

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

@@ -0,0 +1,7 @@
+// @ts-ignore
+import worker from 'workerize-loader!../data-processing/compression'; // eslint-disable-line import/no-webpack-loader-syntax
+
+export function init() {
+    const instance = worker();
+    return instance;
+}

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

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": [
+      "webworker",
       "dom",
       "dom.iterable",
       "esnext"