cluedin-widget/core/components/pages/SearchPage.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import SearchContent from '../search/SearchContent.jsx';
import { connect } from 'react-redux';
import iso from '../../../iso';
import { markAsSearched } from '../../action/boarding';
import { withRouter } from 'react-router';
import {
  shouldFetchInitialSearch,
  shouldFetchSearch,
  addSearchFilter,
  removeFilter,
  nextPage
} from '../../action/search';
import { unSubscribeSearch, subscribeSearch } from '../../action/insight';

class SearchPage extends Component {

  componentWillMount() {
    const { q } = this.props.params;
    const { org, location: { query } } = this.props;

    this.props.dispatch(shouldFetchInitialSearch(q, query));
    this.props.dispatch(markAsSearched(org));
  }

  componentWillUpdate(nextProps) {
    if (nextProps.q !== this.props.q) {
      const { location: { query } } = this.props;
      this.props.dispatch(shouldFetchInitialSearch(nextProps.q, query));
    }
  }

  onRemoveFilterHandler(filterType) {
    const { q } = this.props.params;
    const { sortDirection } = this.props;

    this.props.dispatch(removeFilter(q, sortDirection, filterType));
  }

  selectFilterHandler(filterType, facet) {
    const { q } = this.props.params;
    const { sortDirection } = this.props;
    const { location: { query } } = this.props;
    
    const searchOptions = Object.assign({}, query, sortDirection, {
      filterType,
      facet,
    });

    this.props.dispatch(addSearchFilter(q, searchOptions));
  }

  onSortingChangeHandler(value) {
    const { q } = this.props.params;
    const { selectedFilters } = this.props;

    this.props.dispatch(shouldFetchSearch(q, value, selectedFilters));
  }

  onNextPageClickHandler() {
    const { q } = this.props.params;
    const { selectedFilters, sortDirection } = this.props;
    let { pageNumber } = this.props;

    this.props.dispatch(nextPage(q, sortDirection, selectedFilters, (pageNumber + 1 )));
  }

  onUnSubscribeHandler() {
    let subscribed = this.getSameSearch();

    this.props.dispatch(unSubscribeSearch(subscribed.Query));
  }

  onSubscribeHandler() {
    const { q } = this.props.params;

    this.props.dispatch(subscribeSearch(q));
  }

  getSameSearch() {
    const { searches } = this.props;
    const { q } = this.props.params;

    return iso.collection.find(searches || [], (s)=> {
      let match = s.Query;
      if (match.length > 1 && match.indexOf('*') > -1) {
        match = iso.string.removeLastCharacter(match);
      }
      return match.toLowerCase() === q.toLowerCase();
    });
  }

  render() {
    const { searchResult, isFetchingSearch, selectedFilters, sortDirection, isFetchingNextPage, isFetchingInitialSearch, initialFacets } = this.props;
    const { q } = this.props.params;
    let hasSubscribed = this.getSameSearch();

    return (<SearchContent q={q}
                           hasSubscribed={hasSubscribed}
                           onSelectFilter={this.selectFilterHandler.bind(this)}
                           onRemoveFilter={this.onRemoveFilterHandler.bind(this)}
                           onSortingChange={this.onSortingChangeHandler.bind(this)}
                           onSelectFacet={this.selectFilterHandler.bind(this)}
                           filters={selectedFilters}
                           selectedFilters={selectedFilters}
                           searchResult={searchResult}
                           sortDirection={sortDirection}
                           isFetchingNextPage={isFetchingNextPage}
                           onNextPageClick={this.onNextPageClickHandler.bind(this)}
                           isFetchingSearch={isFetchingSearch}
                           isFetchingInitialSearch={isFetchingInitialSearch}
                           onUnSubscribe={this.onUnSubscribeHandler.bind(this)}
                           onSubscribe={this.onSubscribeHandler.bind(this)}
                           initialFacets={initialFacets}></SearchContent>);
  }
}

var select = (state, ownProps) => {
  return {
    searchResult: state.search.searchResult,
    isFetchingSearch: state.search.isFetchingSearch,
    selectedFilters: state.search.selectedFilters,
    sortDirection: state.search.sortDirection,
    pageNumber: state.search.pageNumber,
    isFetchingNextPage: state.search.isFetchingNextPage,
    isFetchingInitialSearch: state.search.isFetchingInitialSearch,
    initialFacets: state.search.initialFacets,
    searches: state.insight.searches,
    q: ownProps.params.q,
    org: state.core.org
  };
};

export default connect(select)(withRouter(SearchPage));