Aud-fe-mod NPM

aud-fe-mod

Intro

A utility module written in node that accepts an event from a page, generates a GUID, and saves a snapshot for the page link passed in.

Installation

npm i aud-fe-mod

Import the the module in your project

import audFEMod from 'aud-fe-mod'

Documentation

To get a new GUID:

const id = AuditFEModule.getNewGUID()

To send an event to the module:

AudFEMod.processEvent(objectPassedIn)

Note that processEvent() requires an object to be passed in with specific properties:

const objectPassedIn = {
  audCategory: 'User Activity', // a string with category information
  product: 'Abc', // a string with product information
  audFunction: 'Lookup', // a string with function information
  dataType: 'Person', // a string with data type
  audEvent: 'View Record', // a string with the event
  componentString: undefined, // a string html snapshot of page user is on
  formData: {name: "test name", address: "test address", id: "test id"} ||undefined // if form fields present, a string with data entered otherwise undefined 
}

In the background processEvent will link the page snapshot with the other info supplied in objectPassedIn and the GUID it generated. This will be saved internally in AudFEMod.eventStore. The data can then be accessed and sent to an API endpoint.

import audFEMod from 'aud-fe-mod';
import { renderToString } from 'react-dom/server'

componentDidMount = () => {
  // id can be sent with API call
  AudFEMod.getNewGUID(); 

  // get snapshot of current component and save to `state`
  const componentString = this.renderToString().toString();
  this.setState({componentString})
}

// renderToString function can be used to generate a HTML string of component
renderToString = () => {
  return renderToString(<Component />)
}

const objectPassedIn = {
  audCategory: 'User Activity',
  product: 'Abc', 
  audFunction: 'Lookup', 
  dataType: 'Person', 
  audEvent: 'View Record', 
  componentString: `"<div class="grid-row"><div class="column-two-thirds"><h2 class="heading-large">Search profile</h2><div class="form-group"><label class="form-label" for="full-name-f1">Name</label><input type="text" class="form-control" id="full-name-f1" name="full-name-f1"/></div><div class="form-group"><label class="form-label" for="profile-address">Address</label><input type="text" class="form-control" id="profile-addres" name="profile-addres"/></div><div class="form-group"><label class="form-label" for="profile-id">ID</label><input type="text" class="form-control" id="profile-id" name="profile-id"/></div><input type="submit" class="button" value="Search"/></div></div>"`, 
  formData: {name: "test name", address: "test address", id: "test id"}
}

console.log(AudFEMod.processEvent(objectPassedIn));

// TODO - write function to send data to API
})