import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classnames from 'classnames'; import SearchIcon from 'react-icons/lib/md/search'; import { inputChange, changeSelectedResult } from '../../actions/search'; import users from '../../users'; import Results from './Results'; import IconFromUserType from '../presentational/IconFromUserType'; class Search extends React.Component { constructor(props) { super(props); this.state = { hasFocus: false, }; this.onFocus = this.onFocus.bind(this); this.onBlur = this.onBlur.bind(this); this.onKeyDown = this.onKeyDown.bind(this); } onFocus() { this.setState({ hasFocus: true, }); } onBlur() { this.setState({ hasFocus: false, }); } onKeyDown(event) { if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { event.preventDefault(); switch (event.key) { case 'ArrowUp': this.props.dispatch(changeSelectedResult(-1)); break; case 'ArrowDown': this.props.dispatch(changeSelectedResult(+1)); break; default: throw new Error('This should never happen... pls?'); } } } render() { const { selectedResult, isExactMatch, dispatch, } = this.props; const { hasFocus, } = this.state; return (