cluedin-widget/core/components/dialogs/InsightDialog.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 Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import DialogTitle from './internals/DialogTitle.jsx';
import DialogSearchBar from './internals/DialogSearchBar.jsx';
import DialogContent from './internals/DialogContent.jsx';
import InsightList from '../insights/InsightList.jsx';
import { FormattedMessage } from 'react-intl';
import iso from '../../../iso';

class AllUsersDialog extends Component {

    constructor( props ) {
        super( props );
        this.state = { searchValue: '' };
    }

    handleSearchChange( event ) {
        let searchValue = event.target.value;

        this.setState( {
            searchValue: searchValue
        } )
    }

    render() {
        const { onClose, open, insights, onSearchClick, onInsightClick } = this.props;
        const { searchValue } = this.state;

        let filteredInsights = insights;

        if( searchValue ) {
            filteredInsights = iso.collection.filter( filteredInsights, ( i )=> {
                return i.Entity.EntityName.match( new RegExp( searchValue, 'i' ) );
            } );
        }

        const actions = [
            <FlatButton
                label="Close"
                primary={true}
                onTouchTap={onClose}
                autoScrollBodyContent={true}
            />
        ];

        let titleMessage = <FormattedMessage id="InsightDialog.Title"></FormattedMessage>
        let title        = <DialogTitle onClose={onClose} title={titleMessage}></DialogTitle>;

        return (<Dialog autoScrollBodyContent={true} title={title} modal={false} actions={actions} open={open}>
            <DialogSearchBar onSearchChange={this.handleSearchChange.bind(this)}></DialogSearchBar>
            <DialogContent>
                <InsightList onInsightClick={onInsightClick}
                             onSearchClick={onSearchClick}
                             insights={filteredInsights}></InsightList>
            </DialogContent>
        </Dialog>);
    }
}

export default AllUsersDialog;