cluedin-widget/core/components/cluedInFrame.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, PropTypes } from 'react';
import CluedInHeader from './structure/CluedInHeader.jsx';
import CluedInMenu from './structure/CluedInMenu.jsx';
import CluedInFooter from './structure/CluedInFooter.jsx';
import ReactDOM from 'react-dom';
import LinearProgress from 'material-ui/LinearProgress';
import config from '../config';
import InsightDialog from './dialogs/InsightDialog.jsx';
import SavedSearchesDialog from './dialogs/SavedSearchesDialog.jsx';
import UnauthorizedDialog from './dialogs/UnauthorizedDialog.jsx';
import iso from '../../iso';
import IntegrationReports from './integrationReports';
import { connect } from 'react-redux';
import { goToLocation } from '../action/core';
import { shouldFetchCurrentUser } from '../action/user';
import { fetchCurrentOrganization } from '../action/organization';
import { fetchAllSearchesInsights, resetCount, resetSearchCount, resetNotificationForSearch } from '../action/insight';
import { fetchAllFollow, resetNotificationForFollow } from '../action/follow';
import { intlShape, injectIntl } from 'react-intl';
import { MainButton, Menu, ChildButton } from 'react-mfb';
import OnBoarding from './boarding/OnBoarding.jsx';
import WidgetManagement from './WidgetManagment/WidgetManager.jsx';

const CluedInFrameStyle = {
  container: {
    display: 'flex',
    paddingBottom: '60px'
  },
  main: {
    flex: 1,
    paddingTop: '48px'
  },
  aside: {
    background: '#fff',
    paddingTop: '48px',
    zIndex: '2'
  }
};

class CluedInFrame extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isMenuOpen: false,
      isViewMoreAllUsersDialogOpen: false,
      isViewMoreAllEntitiesDialogOpen: false,
      isViewMoreAllSavedSearchesDialogOpen: false
    };
  }

  componentWillMount() {
    this.props.dispatch(shouldFetchCurrentUser());
    this.props.dispatch(fetchCurrentOrganization());
    this.props.dispatch(fetchAllFollow());
    this.props.dispatch(fetchAllSearchesInsights());
  }

  onMenuClickHandler(evt) {
    this.setState({ isMenuOpen: !this.state.isMenuOpen });
    this.props.dispatch(resetNotificationForFollow());
    this.props.dispatch(resetNotificationForSearch());
  }

  entityClickHandler(id) {
    this.props.dispatch(resetCount(id));
    this.setState({ isMenuOpen: false });
  }

  insightSearchClickHandler(id) {
    this.props.dispatch(resetSearchCount(id));
    this.setState({ isMenuOpen: false });
  }

  viewMoreUserClickHandler() {
    this.setState({ isViewMoreAllUsersDialogOpen: true });
  }

  viewMoreEntityeClickHandler() {
    this.setState({ isViewMoreAllEntitiesDialogOpen: true });
  }

  viewModeSavedSearchedHandler() {
    this.setState({ isViewMoreAllSavedSearchesDialogOpen: true });
  }

  handleCloseAllUserDialog() {
    this.setState({ isViewMoreAllUsersDialogOpen: false });
  }

  handleCloseAllEntitiesDialog() {
    this.setState({ isViewMoreAllEntitiesDialogOpen: false });
  }

  handleCloseSavedSearchesDialog() {
    this.setState({ isViewMoreAllSavedSearchesDialogOpen: false });
  }

  handleClickOutside(evt) {
    var cluedInHeaderDom = ReactDOM.findDOMNode(this.refs.Header);

    if (!cluedInHeaderDom.contains(evt.target)) {
      this.setState({ isMenuOpen: false });
    }
  }

  onInsightDialogClick() {
    this.setState({
      isMenuOpen: false,
      isViewMoreAllUsersDialogOpen: false,
      isViewMoreAllEntitiesDialogOpen: false,
      isViewMoreAllSavedSearchesDialogOpen: false
    });
  }

  onSavedSearchClickHandler() {
    this.setState({
      isMenuOpen: false,
      isViewMoreAllUsersDialogOpen: false,
      isViewMoreAllEntitiesDialogOpen: false,
      isViewMoreAllSavedSearchesDialogOpen: false
    });
  }

  onSignInClickHandler() {
    this.props.dispatch(goToLocation('signin'))
  }

  render() {
    const {
      isMenuOpen,
      isViewMoreAllUsersDialogOpen,
      isViewMoreAllEntitiesDialogOpen,
      isViewMoreAllSavedSearchesDialogOpen
    } = this.state;

    const {
      currentOrganization,
      insights,
      searches,
      isFetchingOrganization,
      isFetchingCurrentUser,
      unauthorized,
      currentUser,
      q,
      id
    } = this.props;

    let onBoardingContent;

    if (currentUser && currentUser.client.IsAdmin) {
      onBoardingContent = (<OnBoarding />);
    }

    const entitiesFromInsights = iso.collection.filter(insights, iso.entity.filter.extractNotUserFromInsight);
    const usersFromInsights = iso.collection.filter(insights, iso.entity.filter.extractUserFromInsight);
    const connectIntegrationUrl = config.location.goToAppProvider();
    const inviteUserUrl = config.location.goToInviteUser();

    let loadingHtml;

    if (!unauthorized && (isFetchingCurrentUser || isFetchingOrganization )) {
      loadingHtml = <LinearProgress mode="indeterminate"/>;
    }

    return (<div>
      <div>
        <CluedInHeader ref="Header"
                       q={q}
                       currentOrganization={currentOrganization}
                       onMenuClick={this.onMenuClickHandler.bind(this)}></CluedInHeader>
        <CluedInMenu clickOutSide={this.handleClickOutside.bind(this)}
                     onEntityClick={this.entityClickHandler.bind(this)}
                     onSearchClick={this.insightSearchClickHandler.bind(this)}
                     onViewMoreUserClick={this.viewMoreUserClickHandler.bind(this)}
                     onViewMoreEntityClick={this.viewMoreEntityeClickHandler.bind(this)}
                     onViewMoreSavedSearchesClick={this.viewModeSavedSearchedHandler.bind(this)}
                     searches={searches}
                     userInsights={usersFromInsights}
                     entityInsights={entitiesFromInsights}
                     isMenuOpen={isMenuOpen}></CluedInMenu>
        <div style={CluedInFrameStyle.container}>
          <div style={CluedInFrameStyle.main}>
            {loadingHtml}
            {onBoardingContent}
            {this.props.children}
          </div>
          <div style={CluedInFrameStyle.aside}>
            <IntegrationReports></IntegrationReports>
          </div>
        </div>
        <Menu style={{right:'15px', bottom:'15px'}} method="hover" effect="slidein" position="br">
          <MainButton iconResting="fa fa-plus" iconActive="fa fa-plus"></MainButton>
          <ChildButton href={connectIntegrationUrl} icon="fa fa-plug"
                       label={this.props.intl.formatMessage({id:"CluedInFrame.ConnectIntegration"})}></ChildButton>

          <ChildButton href={inviteUserUrl} icon="fa fa-user-plus"
                       label={this.props.intl.formatMessage({ id: "CluedInFrame.InviteUser"})}></ChildButton>
        </Menu>
        <SavedSearchesDialog onSearchClick={this.onSavedSearchClickHandler.bind(this)}
                             searches={searches}
                             open={isViewMoreAllSavedSearchesDialogOpen}
                             onClose={this.handleCloseSavedSearchesDialog.bind(this)}></SavedSearchesDialog>
        <InsightDialog onInsightClick={this.onInsightDialogClick.bind(this)}
                       insights={usersFromInsights}
                       open={isViewMoreAllUsersDialogOpen}
                       onClose={this.handleCloseAllUserDialog.bind(this)}></InsightDialog>
        <InsightDialog onInsightClick={this.onInsightDialogClick.bind(this)}
                       insights={entitiesFromInsights}
                       open={isViewMoreAllEntitiesDialogOpen}
                       onClose={this.handleCloseAllEntitiesDialog.bind(this)}></InsightDialog>
        <UnauthorizedDialog onSignInClick={this.onSignInClickHandler.bind(this)}
                            open={unauthorized}></UnauthorizedDialog>
      </div>
      <WidgetManagement></WidgetManagement>
      <CluedInFooter></CluedInFooter>
    </div>);
  }
}

CluedInFrame.propTypes = {
  intl: intlShape.isRequired
};

var select = (state, ownProps) => {
  return {
    token: state.core.token,
    org: state.core.org,
    isFetchingCurrentUser: state.user.isFetchingCurrentUser,
    currentUser: state.user.currentUser,
    isFetchingOrganization: state.organization.isFetchingCurrentOrganization,
    currentOrganization: state.organization.currentOrganization,
    insights: state.follow.allFollowers,
    isFetchingAllFollowers: state.follow.isFetchingAllFollowers,
    searches: state.insight.searches,
    isFetchingSearches: state.insight.isFetchingSearches,
    unauthorized: state.core.unauthorized
  };
};

export default connect(select)(injectIntl(CluedInFrame));