cluedin-widget/core/components/structure/CluedInHeader.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';
import SearchBox from '../search/searchBox.jsx';
import { shouldFetchSuggestedSearch, shouldFetchSearch } from '../../action/search';
import { connect } from 'react-redux';

class CluedInHeader extends Component {
    search( q ) {
        this.props.dispatch( shouldFetchSearch( q ) );
    }

    onSuggestedSearch( q ) {
        this.props.dispatch( shouldFetchSuggestedSearch( q ) );
    }

    render() {
        const { suggestedSearches } = this.props;
        return (
            <div className="cluedIn_header">
                <header>
                    <div className="cluedIn_header_logo">
                        CluedIn
                    </div>
                    <div className="cluedIn_header_search">
                        <SearchBox suggestedSearches={suggestedSearches}
                                   onSearchQueryChanged={this.onSuggestedSearch.bind(this)}
                                   onEnter={this.search.bind(this)}></SearchBox>
                    </div>
                    <div className="cluedIn_header_account">

                    </div>
                </header>
            </div>
        );
    }
}

var select = ( state ) => {
    return {
        suggestedSearches: state.search.suggestedSearches,
        suggestedSearchQuery: state.search.suggestedSearchQuery
    };
};

export default connect( select )( CluedInHeader );