function Header()

in source/app/components/Header/Header.js [36:119]
73 lines of code
6 McCabe index (conditional complexity)

function Header({ showNavigation, backButton, dispatch }) {

  const [ menuOpen, setMenuOpen ] = useState(false);

  const toggleMenu = useCallback(() => {
    setMenuOpen(open => !open);
  }, [])

  const clearSearch = useCallback(() => {
    dispatch(clearSearchQuery());
    dispatch(setSearchPersona(undefined));
    setMenuOpen(false);
  }, [])

  return (
    <header className={css.header}>
      <div>
        <a className={cs(css.mobileMenuLink, menuOpen && css.open)} onClick={toggleMenu} />
        <Link href="/home">
          <a className={css.logoLink}>
            <img className={css.logo} src="/static/images/DUS_DEMO_logo_WhiteBG.svg" alt="AWS" />
          </a>
        </Link>

        {showNavigation && (
          <div className={css.hideMobile}>
            <LinkWithClickHandler href="/documents" onClick={clearSearch}>
              <a className={css.backButton}>
                Document list
              </a>
            </LinkWithClickHandler>
            {' | '}
            <Link href="/select">
              <a className={css.backButton}>
                Upload your own documents
              </a>
            </Link>
          </div>
        )}

        {backButton && (
          <LinkWithClickHandler href="/documents" onClick={clearSearch}>
            <a className={css.backButton}>
              Start a new search
            </a>
          </LinkWithClickHandler>
        )}
      </div>

      <div className={css.logoutlink}>
        <Button className={css.borderlessButton} inverted onClick={handleLogoutClick}>Log Out</Button>
      </div>

      <div className={cs(css.mobileMenu, menuOpen && css.open)}>
        {showNavigation && (
          <>
            <LinkWithClickHandler href="/documents" onClick={clearSearch}>
              <a>
                Document list
              </a>
            </LinkWithClickHandler>
            <LinkWithClickHandler href="/select" onClick={toggleMenu}>
              <a>
                Upload your own documents
              </a>
            </LinkWithClickHandler>
          </>
        )}

        {backButton && (
          <LinkWithClickHandler href="/documents" onClick={clearSearch}>
            <a>
              Start a new search
            </a>
          </LinkWithClickHandler>
        )}

        <Button inverted onClick={handleLogoutClick}>Log Out</Button>
      </div>

      {menuOpen && <div className={css.menuOverlay} onClick={toggleMenu} />}
    </header>
  )
}