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