How to use searchkit - 10 common examples

SearchBox, Hits, RefinementListFilter, Pagination,
    HierarchicalMenuFilter, HitsStats, SortingSelector, NoHits,
    SelectedFilters, ResetFilters, RangeFilter, NumericRefinementListFilter,
    ViewSwitcherHits, ViewSwitcherToggle,
    Layout, TopBar, LayoutBody, LayoutResults,
    ActionBar, ActionBarRow, SideBar, encodeObjUrl, QueryAccessor
} from "searchkit"

import { MovieHitsGridItem, MovieHitsListItem } from "../../components"

// require("@searchkit/autosuggest/src/styles.css")
require("searchkit/release/theme.css")


const searchkitMovies = new SearchkitManager("http://demo.searchkit.co/api/movies/");
const searchkitTaxonomy = new SearchkitManager("http://demo.searchkit.co/api/taxonomy/")
import "./styles.scss"

const Heading = ({ children }) =&gt; <div>{children}</div>

const App = () =&gt; (
    <div>
        
            
                
                    Taxonomy
                    </div>

module.exports = (url) => {
  const sk = new SearchkitManager(url);

  const story = 
    
  

  // Story specific tests.
  specs(() => describe('Select filter', function () {
    it('Widget should be select with at least two values', function () {

ItemCheckboxList, CheckboxItemList, ItemHistogramList, Select, // ItemList, Tabs, Toggle, TagCloud,

	/* Components - Range */
	//RangeSliderHistogram, RangeSliderHistogramInput, RangeInput, RangeSlider, RangeHistogram, RangeSliderInput, RangeHistogramInput

	// Query DSL
	//MultiMatchQuery, TermQuery, BoolShould, BoolMust, BoolMustNot, RangeQuery, FilteredQuery, MatchQuery, MatchPhrasePrefix, SimpleQueryString,

	/* Filters */
	RefinementListFilter, ResetFilters, MenuFilter, GroupedSelectedFilters, //SelectedFilters, HierarchicalMenuFilter, HierarchicalRefinementFilter, NumericRefinementListFilter ,CheckboxFilter, DynamicRangeFilter, RangeFilter, InputFilter, TagFilter, TagFilterList, TagFilterConfig
} from "searchkit";

require("./index.scss");

const host = (process.env.ELASTIC_URL || "//fccpublicsearch.herokuapp.com/fccnn")
const searchkit = new SearchkitManager(host, {
	searchOnLoad: true,
	useHistory: true,
  basicAuth:(process.env.ELASTIC_AUTH || null)
})

function refreshMe() {
	// NOTE: This is disabled for now until future implementation
	//searchkit.reloadSearch()
	//console.log('refreshed')
}

const InitialLoaderComponent = (props) => {
	const {bemBlocks} = props
	return (
		<div>
    Loading, please wait...</div>

module.exports = (url) => {
  const sk = new SearchkitManager(url);
  
  const story = 
    
  

  // Story specific tests.
  specs(() => describe('Location input', function () {
    it('Location input should have the geosuggest__input class', function () {
      let output = mount(story);
      expect(output.find('input[type="text"]').hasClass('geosuggest__input')).to.be.true;
    });
  }));

constructor() {
    super()
    // const host = "http://localhost:9200/imdb/movies"
    const host = "http://demo.searchkit.co/api/movies"

    this.searchkit = new SearchkitManager(host)
    // this.searchkit.setQueryProcessor(queryOptimizer)
    this.searchkit.translateFunction = (key) => {
      return { "pagination.previous": "<", "pagination.next": ">" }[key]
    }
    this.state = {
      displayMode: "thumbnail",
      operator: "OR"
    }
  }

let defaultCollectionURL =
  "https://buildhub.prod.mozaws.net/v1/buckets/build-hub/collections/releases/";
// There is an exception to this rule, the default (when
// REACT_APP_KINTO_COLLECTION_URL isn't set) depends on how this UI is rendered.
if (
  window.location.pathname &&
  window.location.pathname.search(/\/stage\//) > -1
) {
  defaultCollectionURL =
    "https://buildhub.stage.mozaws.net/v1/buckets/build-hub/collections/releases/";
}
const KINTO_COLLECTION_URL =
  process.env.REACT_APP_KINTO_COLLECTION_URL || defaultCollectionURL;

const searchkit = new SearchkitManager(KINTO_COLLECTION_URL, {
  searchUrlPath: "search"
});

const HitsTable = ({ hits }) => {
  return (
    <div style="{{">
      <table style="{{">
        <thead>
          <tr>
            <th>
            </th><th>Product</th>
            <th>Version</th>
            <th>platform</th></tr></thead></table></div>

title: React.PropTypes.string.isRequired,
    id: React.PropTypes.string.isRequired,
    translations: SearchkitComponent.translationsPropType(
        FacetAccessor.translations
    ),
    orderKey: React.PropTypes.string,
    orderDirection: React.PropTypes.oneOf(["asc", "desc"]),
    include: React.PropTypes.oneOfType([
        React.PropTypes.string, React.PropTypes.array
    ]),
    exclude: React.PropTypes.oneOfType([
        React.PropTypes.string, React.PropTypes.array
    ]),
    collapsable: React.PropTypes.bool,
    showCount: React.PropTypes.bool,
  }, SearchkitComponent.propTypes)

  static defaultProps = {
    listComponent: CheckboxItemList,
    containerComponent: Panel,
    // component: RefinementListFilterDisplay,
    // itemComponent: FilterCheckboxItemComponent,
    size: 50,
    collapsable: false,
    showCount: true
  }

  constructor(props){
    super(props)

    this.toggleViewMoreOption = this.toggleViewMoreOption.bind(this)
  }

onChange: this.sliderUpdate,
            onFinished: this.sliderUpdateAndSearch
          })}
        
      
    )
  }
}

DateRangeFilter.propTypes = defaults({
  field:React.PropTypes.string.isRequired,
  title:React.PropTypes.string.isRequired,
  id:React.PropTypes.string.isRequired,
  // containerComponent:RenderComponentPropType,
  // rangeComponent:RenderComponentPropType
}, SearchkitComponent.propTypes)

DateRangeFilter.defaultProps = {
  containerComponent: Panel,
  rangeComponent: RangeSliderHistogram,
  showHistogram: true
}

const allFilters = this.getAllFiltersOnPath(query)
      let otherFilters = []
      if (allFilters.length > 0) {
        // Only keep the filters for other elements on this nested path
        otherFilters = R.filter(
          R.compose(
            R.not,
            R.equals(this.getFieldKey()),
            R.head,
            R.keys,
            R.head,
            R.values
          )
        )(allFilters)
      }
      return otherFilters.length > 0 ? BoolMust(otherFilters) : undefined
    }
  }

pageScope?: number // Number of page to show before/after the current number
  listComponent?: any
}

export class Pagination extends SearchkitComponent {
  accessor:PaginationAccessor


  static translations:any = {
    "pagination.previous":"Previous",
    "pagination.next":"Next"
  }
  translations = Pagination.translations

  static propTypes = defaults({
    translations:SearchkitComponent.translationsPropType(
      Pagination.translations
    ),
    showNumbers:React.PropTypes.bool,
    pageScope: React.PropTypes.number,
    listComponent: React.PropTypes.any,
  }, SearchkitComponent.propTypes)

  static defaultProps = {
    listComponent: Toggle
  }

  defineAccessor() {
    return new PaginationAccessor("p")
  }

  getCurrentPage():number {