cluedin-widget/core/components/dialogs/SavedSearchesDialog.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 SavedSearchList from '../insights/SavedSearchList.jsx';
import iso from '../../../iso';
import { FormattedMessage } from 'react-intl';

class SavedSearchesDialog extends Component {

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

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

        this.setState( {
            searchValue: searchValue
        } )
    }

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

        let filteredSearched = searches;

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

        let closeMessage = <FormattedMessage id="SavedSearchesDialog.Close"></FormattedMessage>

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

        let titleMessage = <FormattedMessage id="SavedSearchesDialog.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>
                <SavedSearchList onSearchClick={onSearchClick} searches={filteredSearched}></SavedSearchList>
            </DialogContent>
        </Dialog>);
    }
}

export default SavedSearchesDialog;