...
| Code Block |
|---|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
Deployment
Squirro SDK is available on npm package manager, under @squirro/sdk
Frameworks
React
Squirro SDK integrates well into the React framework. On top of being available on npm, which is what React uses as well, it plays well with React component state, and integrating jQuery extensions into React is a well known and tested technique. Consider the example below for a sample of the bidirectional communication achievable with this close form of integration.
| Code Block |
|---|
/*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; |