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 {
    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 } = this.props;

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

    componentWillUpdate( nextProps ) {
        if( nextProps.q !== this.props.q ) {

            this.props.dispatch( shouldFetchInitialSearch( nextProps.q ) );
        }
    }

    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;

        this.props.dispatch( addSearchFilter( q, sortDirection, {
            filterType,
            facet
        } ) );
    }

    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 )( SearchPage );