apisearch-events-ui/src/components/RawEvents/RawEventsComponent.js

Javascript User Interface to visualize all events data.

/**
 * @jsx h
 */

import { h, Component } from 'preact';
import Template from "../Template";
import {defaultItemsListTemplate} from "./defaultTemplates";

/**
 * Actions
 */
import {changeItemsPerResultPageSetup} from "./rawEventsActions";
import {formatEvents} from "./helpers";

/**
 * RawEvents Component
 */
class RawEventsComponent extends Component {

    componentWillMount() {
        /**
         * Define initial Setup on component mounting
         * that refers to the store configuration
         * and affects other components
         */

        const {
            itemsPerPage,
            highlightsEnabled,
            currentQuery,
            client
        } = this.props;

        /**
         * Dispatch action
         */
        changeItemsPerResultPageSetup(
            {
                itemsPerPage,
                highlightsEnabled
            },
            {
                currentQuery,
                client
            }
        )
    }

    render() {
        const {
            classNames: {
                container: containerClassName,
                eventsList: eventsListClassName,
            },
            template: {
                eventsList: eventsListTemplate,
            },
            formatData,
            data
        } = this.props;

        /**
         * Data accessible to the template
         */
        let reducedTemplateData = {
            query: data ? data.query.q : '',
            events: data
                ? formatEvents(data.events)
                : []
        };

        /**
         * Format each item data
         */
        let formattedTemplateData = {
            ...reducedTemplateData,
            events: (reducedTemplateData.events)
                ? reducedTemplateData
                    .events
                    .map(event => formatData(event))
                : []
        };

        return (
            <div className={`as-rawEvents ${containerClassName}`}>
                <Template
                    template={eventsListTemplate}
                    data={formattedTemplateData}
                    className={`as-rawEvents__eventsList ${eventsListClassName}`}
                />
            </div>
        )
    }
}

RawEventsComponent.defaultProps = {
    itemsPerPage: 10,
    highlightsEnabled: false,
    classNames: {
        container: '',
        eventsList: '',
        placeholder: ''
    },
    template: {
        eventsList: defaultItemsListTemplate
    },
    formatData: data => data
};

export default RawEventsComponent;