test-lib-audits/src/index.js

React library for audits

import React from "react";
import { AuditsClient } from "frontegg-client";

import { Table } from "./components/Table";

const audits = new AuditsClient();

const BASE_URL = "https://frontegg.azure-api.net";

class FrontEgg extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowsData: [],
      headerProps: [],
      filters: [],
      sortBy: "time",
      sortDirection: "desc",
      error: "",
      isLoading: true,
      tenantId: "",
      token: ""
    };
    FrontEgg.__singletonRef = this;
    this._textSearch = this._textSearch.bind(this);
    this._filterData = this._filterData.bind(this);
    this._removeFilter = this._removeFilter.bind(this);
    this._dataSorting = this._dataSorting.bind(this);
    this._exportCSV = this._exportCSV.bind(this);
    this._exportPDF = this._exportPDF.bind(this);
    this._deleteAudits = this._deleteAudits.bind(this);
  }

  static async configureComponent(clientId, accessKey, tenantId) {
    FrontEgg.__singletonRef.__init(clientId, accessKey, tenantId);
  }

  async __init(clientId, accessKey, tenantId) {
    if (!clientId || !accessKey || !tenantId) {
      this.setState({
        error: "client-id or access-key or tenant-id is missing",
        isLoading: false
      });
      console.error("client-id or access-key or tenant-id is missing");
      return;
    }
    this.setState({ isLoading: true });
    await audits.init(clientId, accessKey);
    const res = await fetch(`${BASE_URL}/vendors/auth`, {
      method: "post",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify({
        clientId: clientId,
        secret: accessKey
      })
    });
    const json = await res.json();
    const token = json.token;
    const metaData = await audits.getAuditsMetadata();
    const headerProps = metaData.rows[0].properties;
    this.setState({
      headerProps,
      token
    });
    const rows = await audits.getAudits({
      tenantId: tenantId,
      filter: "",
      filters: [],
      sortBy: this.state.sortBy,
      sortDirection: this.state.sortDirection,
      offset: 0,
      count: 50
    });
    let rowsData = rows.data;
    console.log({ rowsData, headerProps });
    this.setState({
      tenantId,
      rowsData,
      isLoading: false
    });
  }

  async _textSearch(term) {
    this.setState({ isLoading: true, searchText: term });
    console.log("searching...");
    const rows = await audits.getAudits({
      tenantId: this.state.tenantId,
      filter: term,
      sortBy: this.state.sortBy,
      sortDirection: this.state.sortDirection,
      offset: 0,
      count: 50
    });
    const rowsData = rows.data;
    console.log({ rowsData });
    this.setState({
      rowsData,
      isLoading: false
    });
  }

  async _filterData(filter) {
    const allFilters = this.state.filters;
    const filterIndex = allFilters.findIndex(item => item.key == filter.key);
    let updatedFilters;
    if (filterIndex >= 0) {
      allFilters[filterIndex] = filter;
      updatedFilters = allFilters;
    } else {
      updatedFilters = [...allFilters, filter];
    }
    let filterObj = {};
    updatedFilters.map(filter => (filterObj[filter.key] = filter.value));
    this.setState({ isLoading: true, filters: updatedFilters });
    console.log("filtering...");
    const rows = await audits.getAudits({
      tenantId: this.state.tenantId,
      filter: this.state.searchText,
      filters: filterObj,
      sortBy: this.state.sortBy,
      sortDirection: this.state.sortDirection,
      offset: 0,
      count: 50
    });
    const rowsData = rows.data;
    console.log({ rowsData });
    this.setState({
      rowsData,
      isLoading: false
    });
  }

  async _removeFilter(removedFilter) {
    const allFilters = this.state.filters;
    const removedFilterIndex = allFilters.findIndex(
      item => item.key == removedFilter.key
    );
    let updatedFilters;
    if (removedFilterIndex > -1) {
      allFilters.splice(removedFilterIndex, 1);
    }
    updatedFilters = allFilters;
    let filterObj = {};
    updatedFilters.map(filter => (filterObj[filter.key] = filter.value));
    this.setState({ isLoading: true, filters: updatedFilters });
    console.log("filtering...");
    const rows = await audits.getAudits({
      tenantId: this.state.tenantId,
      filter: this.state.searchText,
      filters: filterObj,
      sortBy: this.state.sortBy,
      sortDirection: this.state.sortDirection,
      offset: 0,
      count: 50
    });
    const rowsData = rows.data;
    console.log({ rowsData });
    this.setState({
      rowsData,
      isLoading: false
    });
  }

  async _dataSorting(colName, direction) {
    const switcher = { asc: true, desc: false };
    let directionIdentifier;
    if (switcher[direction]) {
      directionIdentifier = "desc";
    } else {
      directionIdentifier = "asc";
    }
    this.setState({
      isLoading: true,
      sortBy: colName,
      sortDirection: directionIdentifier
    });
    let filterObj = {};
    this.state.filters.map(filter => (filterObj[filter.key] = filter.value));
    const rows = await audits.getAudits({
      tenantId: this.state.tenantId,
      filter: this.state.searchText,
      filters: filterObj,
      sortBy: colName,
      sortDirection: directionIdentifier,
      offset: 0,
      count: 50
    });
    const rowsData = rows.data;
    console.log({ rowsData });
    this.setState({
      rowsData,
      isLoading: false
    });
  }

  async _exportCSV() {
    const res = await fetch(`${BASE_URL}/audits/export`);
    const json = await res.json();
    console.log({ json });
  }

  async _exportPDF() {
    const res = await fetch(`${BASE_URL}/audits/export`);
    const json = await res.json();
    console.log({ json });
  }

  async _deleteAudits() {
    this.setState({ isLoading: false });
    const res = await fetch(
      `${BASE_URL}/audits?tenantId=${this.state.tenantId}`,
      {
        method: "delete",
        headers: {
          "x-access-token": this.state.token
        }
      }
    );
    const json = await res.json();
    console.log({ json });
    const rows = await audits.getAudits({
      tenantId: this.state.tenantId,
      filter: "",
      filters: [],
      sortBy: this.state.sortBy,
      sortDirection: this.state.sortDirection,
      offset: 0,
      count: 50
    });
    let rowsData = rows.data;
    console.log({ rowsData });
    this.setState({
      rowsData,
      isLoading: false
    });
  }

  render() {
    const { headerProps, rowsData, isLoading, error, filters } = this.state;
    if (headerProps && headerProps.length > 0) {
      return (
        <Table
          rowsData={rowsData}
          headerProps={headerProps}
          textSearch={this._textSearch}
          filterData={this._filterData}
          removeFilter={this._removeFilter}
          isLoading={isLoading}
          filters={filters}
          sortBy={this.state.sortBy}
          sortDirection={this.state.sortDirection}
          handleSorting={this._dataSorting}
          exportCSV={this._exportCSV}
          exportPDF={this._exportPDF}
          deleteAudits={this._deleteAudits}
        />
      );
    }
    if (isLoading) {
      return <div>loading...</div>;
    }
    if (error) {
      return <div>{error}</div>;
    }
    return <div>No data was found!</div>;
  }
}

export { FrontEgg };