apisearch-events-ui/src/widgets/rawEvents.js

Javascript User Interface to visualize all events data.

/**
 * @jsx h
 */

import { h, render } from 'preact';
import RawEventsComponent from "../components/RawEvents/RawEventsComponent";
import RawEventsStore from "../stores/RawEventsStore";

/**
 * Last Queries
 */
class RawEvents {
    constructor({
        target,
        itemsPerPage,
        highlightsEnabled,
        classNames,
        template,
        formatData
    }) {
        this.target = target;
        this.component = <RawEventsComponent
            target={target}
            itemsPerPage={itemsPerPage}
            highlightsEnabled={highlightsEnabled}
            classNames={{
                ...RawEventsComponent.defaultProps.classNames,
                ...classNames
            }}
            template={{
                ...RawEventsComponent.defaultProps.template,
                ...template
            }}
            formatData={formatData}
        />
    }

    initialize(client) {
        /**
         * Pass client to the component
         */
        this.component.attributes.client = client;

        /**
         * Create the store
         */
        this.store = new RawEventsStore(
            client.query.create('')
        );

        this.store.on('render', () => this.render());
    }

    render() {
        let targetNode = document.querySelector(this.target);

        this.component.attributes.dirty = this.store.dirty;
        this.component.attributes.data = this.store.data;
        this.component.attributes.currentQuery = this.store.currentQuery;

        render(
            this.component,
            targetNode,
            targetNode.lastChild
        )
    }
}


/**
 * Last queries widget
 *
 * @param settings
 * @returns {LastQueries}
 */
export const rawEvents = settings => new RawEvents(settings);