import * as React from "react" ; import { NavLink , RouteComponentProps , withRouter } from "react-router-dom" ; import "url-search-params-polyfill" ; import logo from "./logo.svg" ; const Header = props => { const [ search , setSearch ] = React . useState ( "" ) ; React . useEffect ( ( ) => { const searchParams = new URLSearchParams ( props . location . search ) ; setSearch ( searchParams . get ( "search" ) || "" ) ; } , [ ] ) ; const handleSearchChange = ( e ) => { setSearch ( e . currentTarget . value ) ; } ; const handleSearchKeydown = ( e ) => { if ( e . key === "Enter" ) { props . history . push ( `/products?search=${ search }` ) ; } } ; return ( < header className = "header" > < div className = "search-container" > < input type = "search" placeholder = "search" value = { search } onChange = { handleSearchChange } onKeyDown = { handleSearchKeydown } / > < /div> < img src = { logo } className = "header-logo" alt = "logo" / > < h1 className = "header-title" > React Shop < /h1> < nav > < NavLink to = "/products" className = "header-link" activeClassName = "header-link-active" > Products < /NavLink> < NavLink to = "/admin" className = "header-link" activeClassName = "header-link-active" > Admin < /NavLink> < /nav> < /header>); } ; export default withRouter ( Header ) ;