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,
  fetchEntityFacets
} from '../../action/search';
import { pushAction } from '../../action/action';
import { unSubscribeSearch, subscribeSearch } from '../../action/insight';

class SearchPage extends Component {

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

    this.props.dispatch(shouldFetchInitialSearch(q, query));
    this.props.dispatch(fetchEntityFacets(q));
    if (!isSearchDone) {
      this.props.dispatch(markAsSearched(org));
    }
    this.props.dispatch(pushAction('search', { query: q }));
  }

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

  onRemoveFilterHandler(filterType) {
    const { q } = this.props.params;
    const { sortDirection, typeSearch } = this.props;
    const { location: { query } } = this.props;

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

  selectTypeHandler(type) {
    const { q } = this.props.params;
    const { selectedFilters, sortDirection } = this.props;
    const { location: { query } } = this.props;

    this.props.dispatch(shouldFetchSearch(q, sortDirection, selectedFilters, query.aggregation, type));
  }

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

    const searchOptions = Object.assign({}, query, {
      sortDirection,
      filterType,
      facet,
      type: typeSearch,
    });

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

  onSortingChangeHandler(value) {
    const { q } = this.props.params;
    const { selectedFilters, typeSearch } = this.props;
    const { location: { query } } = this.props;

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

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

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

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

    this.props.dispatch(unSubscribeSearch(subscribed.Query));
    this.props.dispatch(pushAction('subsribeSearch', { query: subscribed.Query }));
  }

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

    this.props.dispatch(subscribeSearch(q));
    this.props.dispatch(pushAction('unsubsribeSearch', { query: 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, entityFacets, typeSearch } = 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)}
                     entityFacets={entityFacets}
                     onEntityFacetsClick={this.selectTypeHandler.bind(this)}
                     initialFacets={initialFacets}
                     typeSearch={typeSearch}
      />
    );
  }
}

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,
    isSearchDone: state.boarding.isSearchDone,
    entityFacets: state.search.entityFacets,
    typeSearch: state.search.typeSearch,
  };
};

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