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 } 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/lib/linear-progress';

import CSSModules from 'react-css-modules';
import styles from './cluedInFrame.scss';
import InsightDialog from './dialogs/InsightDialog.jsx';
import SavedSearchesDialog from './dialogs/SavedSearchesDialog.jsx';
import iso from '../../iso';
import CluedInApp from './cluedinapp.jsx';

import { connect } from 'react-redux';
import { shouldFetchCurrentUser } from '../action/user'
import { fetchCurrentOrganization } from '../action/organization';
import { fetchAllInsights, fetchAllSearchesInsights, resetCount, resetSearchCount } from '../action/insight';

let timeStamp = Date.now();

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( fetchAllInsights() );
        this.props.dispatch( fetchAllSearchesInsights() );
    }

    onMenuClickHandler( evt ) {
        this.setState( { isMenuOpen: !this.state.isMenuOpen } );
    }

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

    render() {
        const { isMenuOpen, isViewMoreAllUsersDialogOpen, isViewMoreAllEntitiesDialogOpen, isViewMoreAllSavedSearchesDialogOpen } = this.state;
        const { q, currentOrganization, insights, searches, isFetchingOrganization, isFetchingCurrentUser } = this.props;
        const entitiesFromInsights = iso.collection.filter( insights, iso.entity.filter.extractNotUserFromInsight );
        const usersFromInsights    = iso.collection.filter( insights, iso.entity.filter.extractUserFromInsight );

        let loadingHtml;

        if( 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 styleName="container">
                    <div styleName="main">
                        {loadingHtml}
                        {this.props.children}
                    </div>
                    <div styleName="aside">
                        <CluedInApp type="IntegrationReport" index={timeStamp}></CluedInApp>
                    </div>
                </div>
                <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>
            </div>
            <CluedInFooter></CluedInFooter>
        </div>);
    }
}

var select = ( state ) => {
    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.insight.insights,
        isFetchingInsights: state.insight.isFetchingInsights,
        searches: state.insight.searches,
        isFetchingSearches: state.insight.isFetchingSearches
    };
};

export default connect( select )( CSSModules( CluedInFrame, styles ) );