Page Comparison

/*global $*/
import React, { Component } from 'react'
import 'squirro-sdk.en.js'
import 'squirro-sdk-styles.en.js'

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            squirroSearch: {},
            squirroStore: {},
        };
    }

    componentDidMount() {
        this._reloadSquirro();
    }

    _reloadSquirro() {
        this._initSquirro().then(() => {
            this._attachEvents();
        });
    }

    _initSquirro() {
        return $(this.el).squirro({
            server: '',
            project_id: '',
            dashboard_id: '',
            tenant: '',
            userId: '',
            token: '',
        });
    }

    _logout() {
        $(this.el).squirro('destroy').then(() => {
            console.log('Squirro destroyed');
        });
    }

    _attachEvents() {
        const search = this._getSquirroSearch();
        search.on('change:query change:time', () => this.setState({ squirroSearch: search.toJSON() }));

        const store = this._getSquirroDashboard().store;
        store.on('change', () => this.setState({ squirroStore: store.toJSON() }));
    }

    _select(section) {
        const search = this._getSquirroSearch();
        search.removeFacet('Section', 'World');
        search.removeFacet('Section', 'Sports');
        search.addFacet('Section', section);
    }

    _getSquirroSearch() {
        return $(this.el).squirro('get_search');
    }

    _getSquirroDashboard() {
        return $(this.el).squirro('get_dashboard');
    }

    render() {
        return (
            <div className="App squirro-body">
                <h3 className="App-header">
                    Squirro React SPA Integration
                </h3>
                <div className="Left-panel">
                    <h3>React Panel</h3>
                    <ul>
                        <li>Squirro Query: {this.state.squirroSearch.query}</li>
                        <li>Created Before: {this.state.squirroSearch.created_before}</li>
                        <li>Created After: {this.state.squirroSearch.created_after}</li>
                        <li>Squirro Store: {JSON.stringify(this.state.squirroStore)}</li>
                    </ul>
                    <ul>
                        <li onClick={this._select.bind(this, 'World')}>World</li>
                        <li onClick={this._select.bind(this, 'Sports')}>Sports</li>
                    </ul>
                    <ul>
                        <li onClick={this._reloadSquirro.bind(this)}>Reload Squirro</li>
                        <li onClick={this._logout.bind(this)}>Logout</li>
                    </ul>
                </div>
                <div className="Squirro-main" ref={el => this.el = el}/>
                <h3 className="App-header">
                    Squirro React SPA Integration
                </h3>
            </div>
        );
    }
}

export default App;