cluedin-widget/core/components/search/SearchContent.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 SearchResult from "./searchResult.jsx";
import SearchFilter from "./SearchFilter.jsx";
import SearchFilterOverview from "./SearchFilterOverview.jsx";
import SearchActionBar from "./SearchActionBar.jsx";
import iso from "../../../iso";
import RaisedButton from "material-ui/RaisedButton";
import KeyArrowDown from "material-ui/svg-icons/hardware/keyboard-arrow-down";
import KeyArrowUp from "material-ui/svg-icons/hardware/keyboard-arrow-up";
import DropDownMenu from "material-ui/DropDownMenu";
import MenuItem from "material-ui/MenuItem";
import SearchExtraFilters from "./SearchExtraFilters.jsx";
import Spacer from "./../generics/Spacer.jsx";
import RefreshIndicator from "material-ui/RefreshIndicator";
import AlertStandAlone from "./../generics/AlertStandAlone.jsx";
import PageContent from "./../generics/PageContent.jsx";
import CircularProgress from "material-ui/CircularProgress";
import Radium from "radium";
import { FormattedMessage } from "react-intl";

var formatProviders = ( initialFacets, currentFacets, selectedFilters ) => {
    let result = Object.assign( {}, initialFacets );

    for( var facetKey in result ) {
        if( result[ facetKey ] ) {

            var facet = result[ facetKey ];

            if( facet.terms && facet.terms.length > 0 ) {
                let currentFacetsByType = currentFacets[ facetKey ];

                if( currentFacetsByType ) {
                    var isAppliedFilter = iso.collection.find( selectedFilters, ( filter ) => {
                        return filter.filterType.toLowerCase() === facetKey.toLowerCase();
                    } );

                    if( !isAppliedFilter ) {
                        facet.terms.forEach( ( term )=> {
                            let hasFacets = iso.collection.find( currentFacetsByType.terms, ( currentTerm ) => {
                                return (term.term === currentTerm.term );
                            } );

                            if( hasFacets ) {
                                term.count = hasFacets.count;
                            } else {
                                term.count = 0;
                            }
                        } );
                    }
                }
            }
        }
    }

    return result;
};

class SearchContent extends Component {

    constructor( props ) {
        super( props );
        this.state = {
            showFilter: false
        }
    }

    handleChange( event, index, value ) {
        const { onSortingChange } = this.props;

        onSortingChange( value );
    }

    showFilter() {
        this.setState( {
            showFilter: !this.state.showFilter
        } );
    }

    onSelectFacetHandler( filterType, facet ) {
        const { onSelectFacet } = this.props;

        onSelectFacet( filterType, facet );

        this.setState( {
            showFilter: false
        } );
    }

    render() {
        const {
                  searchResult,
                  initialFacets,
                  isFetchingInitialSearch,
                  isFetchingSearch,
                  onSelectFilter,
                  selectedFilters,
                  onRemoveFilter,
                  sortDirection,
                  onNextPageClick,
                  isFetchingNextPage,
                  hasSubscribed,
                  q,
                  onSubscribe,
                  onUnSubscribe
              } = this.props;

        let content;
        let loadMoreButtonContent;
        let KeppInTheLoopButton;
        let unSubscribeMessage          = <FormattedMessage id="SearchContent.Unsubscribe"></FormattedMessage>
        let pinMessage                  = <FormattedMessage id="SearchContent.KeepMeInTheLoop"></FormattedMessage>
        let loadMoreSearchResultMessage = <FormattedMessage id="SearchContent.LoadMore"></FormattedMessage>
        let allDocumentMessage          = <FormattedMessage id="SearchContent.AllDocumentMessage"></FormattedMessage>
        let allIntegrationMessage       = <FormattedMessage id="SearchContent.AllIntegrationMessage"></FormattedMessage>
        let filterMessage               = <FormattedMessage id="SearchContent.FilterMessage"></FormattedMessage>
        let resultFoundMessage          = <FormattedMessage id="SearchContent.ResultFoundMessage"></FormattedMessage>

        if( hasSubscribed ) {
            KeppInTheLoopButton =
                <RaisedButton style={SearchContentStyle.keepInTheLoopButton} onClick={onUnSubscribe} secondary={true}
                              label={unSubscribeMessage}></RaisedButton>
        } else {
            KeppInTheLoopButton =
                <RaisedButton style={SearchContentStyle.keepInTheLoopButton} onClick={onSubscribe} secondary={true}
                              label={pinMessage}></RaisedButton>
        }

        let filterIcon = <KeyArrowDown></KeyArrowDown>;

        if( this.state.showFilter ) {
            filterIcon = <KeyArrowUp></KeyArrowUp>
        }

        if( searchResult && searchResult.Hits && (searchResult.Hits.length % 27 === 0) ) {
            if( isFetchingNextPage ) {
                loadMoreButtonContent =
                    <RefreshIndicator style={SearchContentStyle.refresh} top={0} left={0}
                                      status="loading"></RefreshIndicator>
            } else {
                loadMoreButtonContent = <RaisedButton onClick={onNextPageClick} style={{width:'100%'}}
                                                      label={loadMoreSearchResultMessage}></RaisedButton>;
            }
        }

        let excludesFacets = [ 'entityType', 'providers' ];

        let leftStyle = {
            float: 'left',
            marginTop: '5px'
        };

        let leftFilterStyle = {
            float: 'left',
            marginTop: '11px',
            marginLeft: '15px'
        };

        let rightStyle = {
            float: 'right',
            lineHeight: '36px'
        };

        let colorStyleDropdown = {
            color: 'rgba(0, 0, 0, 0.87)',
            fill: 'rgba(0, 0, 0, 0.87)',
            borderColor: 'rgba(0, 0, 0, 0.87)'
        };

        let selectedEntityTypeFilter = iso.collection.find( selectedFilters, ( f )=> {
            return f.filterType.toLowerCase() === 'entityType'.toLowerCase();
        } );

        let selectedProviderFilter = iso.collection.find( selectedFilters, ( f )=> {
            return f.filterType.toLowerCase() === 'providers'.toLowerCase();
        } );

        if( isFetchingInitialSearch ) {
            content = (<div>
                <PageContent>
                    <div style={{textAlign: 'center', marginTop:'50px'}}>
                        <CircularProgress></CircularProgress>
                    </div>
                </PageContent>
            </div>);
        } else if( !searchResult || !searchResult.Hits || searchResult.Hits.length === 0 ) {
            content = (<PageContent>
                <div className="cluedIn_col offset-s2 s8">
                    <AlertStandAlone>
                        <p><FormattedMessage id="SearchContent.NoSearchResult"></FormattedMessage> '{q}'</p>
                    </AlertStandAlone>
                </div>
            </PageContent>)
        } else {
            let currentFacetsFormatted = formatProviders( initialFacets, searchResult.Facets || [], selectedFilters || [] );

            content = (
                <PageContent>
                    <div className="cluedIn_col m2">
                        <div>
                            <SearchFilter type="entityType"
                                          title={allDocumentMessage}
                                          onSelectFilter={onSelectFilter}
                                          selectedFilter={selectedEntityTypeFilter}
                                          onRemoveFilter={onRemoveFilter}
                                          facets={currentFacetsFormatted.entityType}></SearchFilter>
                        </div>
                        <div style={SearchContentStyle.filterProvider}>
                            <SearchFilter type="providers"
                                          title={allIntegrationMessage}
                                          onSelectFilter={onSelectFilter}
                                          selectedFilter={selectedProviderFilter}
                                          onRemoveFilter={onRemoveFilter}
                                          facets={currentFacetsFormatted.providers}></SearchFilter>
                        </div>
                    </div>
                    <div className="cluedIn_col m10">
                        <SearchActionBar>
                            <div style={leftStyle}>
                                <RaisedButton label={filterMessage} onClick={this.showFilter.bind(this)}
                                              labelPosition="before" icon={filterIcon}></RaisedButton>
                            </div>
                            <div style={leftFilterStyle}>
                                <SearchFilterOverview onRemoveFilter={onRemoveFilter}
                                                      selectedFilters={selectedFilters}></SearchFilterOverview>
                            </div>
                            <div style={[SearchContentStyle.searchResult, rightStyle]}>
                                <strong>{searchResult.Total}</strong> {resultFoundMessage}
                                {KeppInTheLoopButton}
                                <DropDownMenu underlineStyle={colorStyleDropdown}
                                              labelStyle={colorStyleDropdown}
                                              iconStyle={colorStyleDropdown}
                                              value={sortDirection ? sortDirection : 'relevance'}
                                              onChange={this.handleChange.bind(this)}>
                                    <MenuItem value='relevance'
                                              primaryText={<FormattedMessage id="SearchContent.SortByRelevance"></FormattedMessage>}/>
                                    <MenuItem value='new'
                                              primaryText={<FormattedMessage id="SearchContent.SortByNew"></FormattedMessage>}/>
                                    <MenuItem value='old'
                                              primaryText={<FormattedMessage id="SearchContent.SortByOld"></FormattedMessage>}/>
                                </DropDownMenu>
                            </div>
                        </SearchActionBar>
                        <Spacer show={this.state.showFilter}>
                            <SearchExtraFilters facets={searchResult.Facets}
                                                onSelectFacet={this.onSelectFacetHandler.bind(this)}
                                                excludesFacets={excludesFacets}></SearchExtraFilters>
                        </Spacer>
                        <SearchResult searchResult={searchResult}
                                      isFetchingSearch={isFetchingSearch}></SearchResult>
                        <div style={SearchContentStyle.container}>
                            {loadMoreButtonContent}
                        </div>
                    </div>
                </PageContent>
            );
        }
        return (
            <div>{ content }</div>
        );
    }
}

const SearchContentStyle = {
    filterProvider: {
        marginTop: '15px'
    },
    searchResult: {
        fontSize: '18px'
    },
    container: {
        position: 'relative',
        textAlign: 'center'
    },
    refresh: {
        display: 'inline-block',
        position: 'relative'
    },
    keepInTheLoopButton: {
        marginLeft: '15px',
        marginRight: '5px'
    }
};

export default Radium( SearchContent ) ;