cluedin-widget/core/components/structure/CluedInHeader.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 SearchBox from '../search/searchBox.jsx'
import { shouldFetchSuggestedSearch } from '../../action/search'
import { connect } from 'react-redux'
import CluedInUserMenu from '../navigations/CluedInUserMenu.jsx'
import CluedInLogoMenu from '../navigations/CluedInLogoMenu.jsx'
import { push } from 'react-router-redux'

class CluedInHeader extends Component {
    search( q ) {
        this.props.dispatch( push( '/search/' + encodeURIComponent( q ) ) );
    }

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

    render() {
        const { suggestedSearches, onMenuClick, currentOrganization, initialSearchQuery, currentUser, showNotification, showNotificationSearch } = this.props;

        let showNotif = (showNotificationSearch || showNotification);
        return (
            <div className="cluedIn_header">
                <header>
                    <div className="cluedIn_header_logo">
                        <CluedInLogoMenu showNotification={showNotif}
                                         currentOrganization={currentOrganization}
                                         onMenuClick={onMenuClick}></CluedInLogoMenu>
                    </div>
                    <div className="cluedIn_header_search">
                        <SearchBox defaultValue={initialSearchQuery}
                                   suggestedSearches={suggestedSearches}
                                   onSearchQueryChanged={this.onSuggestedSearch.bind(this)}
                                   onEnter={this.search.bind(this)}></SearchBox>
                    </div>
                    <div className="cluedIn_header_account">
                        <CluedInUserMenu currentUser={currentUser}></CluedInUserMenu>
                    </div>
                </header>
            </div>
        );
    }
}

var select = ( state, ownProps ) => {
    return {
        showNotification: state.follow.showNotification,
        showNotificationSearch: state.insight.showNotification,
        suggestedSearches: state.search.suggestedSearches,
        suggestedSearchQuery: state.search.suggestedSearchQuery,
        initialSearchQuery: state.search.initialSearchQuery,
        currentUser: state.user.currentUser,
        isFetchingCurrentUser: state.user.isFetchingCurrentUser
    };
};

export default connect( select )( CluedInHeader );