text: import React from 'react'
  import { Route } from 'react-router-dom'
  import { useDispatch, useSelector } from 'react-redux'
  import { LinkContainer } from 'react-router-bootstrap'
  import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap'
  import { logout } from '../actions/userActions'
  import SearchBox from './SearchBox'
  
  function Header() {
      const dispatch = useDispatch()
  
      const userLogin = useSelector(state => state.userLogin)
      const { userInfo } = userLogin
  
      const logoutHandler = () => {
          dispatch(logout())
      }
      return (
          <header>
              <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect fixed="top">
                  <Container>
                      <LinkContainer to='/'>
                          <Navbar.Brand>HOME</Navbar.Brand>
                      </LinkContainer>
                      <Navbar.Toggle aria-controls="basic-navbar-nav" />
                      <Navbar.Collapse id="basic-navbar-nav">
                          <Route render={({ history }) => <SearchBox history={history} />} />
                          <Nav className="ml-auto">
                              <LinkContainer to='/cart'>
                                  <Nav.Link><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
                              </LinkContainer>
                              {userInfo ? (
                                  <NavDropdown title={userInfo.name} id='username'>
                                      <LinkContainer to='/profile'>
                                          <NavDropdown.Item>
                                              Profile
                                          </NavDropdown.Item>
                                      </LinkContainer>
                                      <NavDropdown.Item onClick={logoutHandler}>Log out</NavDropdown.Item>
                                  </NavDropdown>
                              ) :
                                  <LinkContainer to='/login'>
                                      <Nav.Link><i className="fas fa-user"></i>Sign in</Nav.Link>
                                  </LinkContainer>
  
                              }
                              {userInfo && userInfo.isAdmin && (
                                  <NavDropdown title='Admin' id='admin_menu'>
                                      <LinkContainer to='/admin/user_list'>
                                          <NavDropdown.Item>
                                              Users
                                          </NavDropdown.Item>
                                      </LinkContainer>
  
                                      <LinkContainer to='/admin/product_list'>
                                          <NavDropdown.Item>
                                              Products
                                          </NavDropdown.Item>
                                      </LinkContainer>
  
                                      <LinkContainer to='/admin/order_list'>
                                          <NavDropdown.Item>
                                              Orders
                                          </NavDropdown.Item>
                                      </LinkContainer>
  
                                  </NavDropdown>
                              )}
                          </Nav>
                      </Navbar.Collapse>
                  </Container>
              </Navbar>
          </header>
      )
  }
  
  export default Header
  