trampa-frontend/src/components/Header/Header.js

import React, { useState, useEffect, useRef } from "react";
import {
  AuthButtonsContainer,
  HeaderContainer,
  LogoContainer,
  ToolsButtonsContainer,
  ToolsContainer,
} from "./Header.styled";
import PropTypes from "prop-types";
import { AppBar, Toolbar, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/system";
import { ReactComponent as LogoHorizontal } from "../../assets/images/svg/logo-horizontal.svg";
import { useDispatch, useSelector } from "react-redux";
import { selectUserId } from "../../store/selectors/loginSelectors";
import { selectProfileName } from "../../store/selectors/profileSelectors";
import { useHistory, useRouteMatch } from "react-router-dom";
import { ABOUT_PAGE, BASE_PAGE, HOME_PAGE } from "../../constants/pages";
import { fetchMineProfile } from "../../store/actions/profile/profileActions";
import CreateOffer from "../Cards/CreateOfferCard/CreateOffer";
import useSearch from "../../hooks/useOffers/useSearch";
import { isAuthRoute, routeMatches } from "../../util/helpers/routeHelpers";
import AboutHeader from "./AboutHeader/AboutHeader";
import SearchInput from "./SearchInput/SearchInput";
import DrawerContainer from "./DrawerContainer/DrawerContainer";
import OpenDrawerButton from "./OpenDrawerButton/OpenDrawerButton";
import AddOfferButton from "./AddOfferButton/AddOfferButton";
import MySwapsButton from "./MySwapsButton/MySwapsButton";
import MyMessagesButton from "./MyMessagesButton/MyMessagesButton";
import UserButton from "./UserButton/UserButton";
import LoginButton from "./LoginButton/LoginButton";
import RegisterButton from "./RegisterButton/RegisterButton";

const Header = () => {
  const [showCreateOfferModal, setShowCreateOfferModal] = useState(false);
  const theme = useTheme();
  const searchRef = useRef(null);
  const matches = useMediaQuery(theme.breakpoints.down("md"));
  const user = useSelector(selectUserId);
  const search = useSearch(() => {});
  const dispatch = useDispatch();
  const name = useSelector(selectProfileName);
  const history = useHistory();
  const drawerRef = useRef(null);
  const [shouldShow, setShouldShow] = useState(true);
  const routeMatch = useRouteMatch();

  // Dont show header on auth routes(login, register, etc.)
  useEffect(() => {
    if (isAuthRoute()) setShouldShow(false);
    else setShouldShow(true);
  }, [routeMatch]);

  // Fetch mine profile on loading home page
  useEffect(() => {
    if (user && user?.length > 0) {
      dispatch(fetchMineProfile());
    }
  }, []);

  // Sets value into search input based on query string
  useEffect(() => {
    if (searchRef.current) {
      searchRef.current.value = search.searchString ?? "";
    }
  }, [search.searchString, searchRef.current]);

  // Removes scroll when modal is open
  if (showCreateOfferModal) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }
  // Handling search when user is on marketplace and when he is not
  const handleSearch = (value) => {
    if (!routeMatches(HOME_PAGE) && !routeMatches(BASE_PAGE)) {
      const newQueryString = new URLSearchParams({ search: value });
      history.push({
        pathname: HOME_PAGE,
        search: newQueryString.toString(),
      });
    } else {
      search.searchOffers(value);
    }
  };

  // When user clicks logo, he sends specific state so filters can be removed
  const handleLogoClick = () => {
    history.push({
      pathname: HOME_PAGE,
      state: {
        logo: true,
      },
    });
  };

  const handleAddOfferClick = () => {
    setShowCreateOfferModal(true);
  };
  const closeCreateOfferModal = () => {
    setShowCreateOfferModal(false);
  };

  return (
    <HeaderContainer style={{ display: shouldShow ? "block" : "none" }}>
      <AppBar
        elevation={0}
        position="fixed"
        sx={{ backgroundColor: "white", zIndex: "80", height: "72px" }}
      >
        <Toolbar sx={{ p: "15px" }}>
          <ToolsContainer>
            <LogoContainer onClick={() => handleLogoClick()}>
              <LogoHorizontal />
            </LogoContainer>

            <SearchInput ref={searchRef} handleSearch={handleSearch} />
            {routeMatches(ABOUT_PAGE) && <AboutHeader />}

            {user ? (
              <ToolsButtonsContainer
                mobile={matches}
                shrink={routeMatches(ABOUT_PAGE)}
              >
                {matches ? (
                  <OpenDrawerButton
                    onClick={drawerRef.current.handleToggleDrawer}
                  />
                ) : (
                  <React.Fragment>
                    {!routeMatches(ABOUT_PAGE) && (
                      <>
                        <AddOfferButton onClick={handleAddOfferClick} />
                        <MySwapsButton
                          handleAddOfferClick={handleAddOfferClick}
                        />
                        <MyMessagesButton />
                      </>
                    )}
                    <UserButton name={name} />
                  </React.Fragment>
                )}
              </ToolsButtonsContainer>
            ) : (
              <AuthButtonsContainer mobile={matches}>
                {matches ? (
                  <OpenDrawerButton
                    onClick={drawerRef.current.handleToggleDrawer}
                  />
                ) : (
                  <React.Fragment>
                    <LoginButton />
                    <RegisterButton />
                  </React.Fragment>
                )}
              </AuthButtonsContainer>
            )}
          </ToolsContainer>
        </Toolbar>
      </AppBar>

      <DrawerContainer
        ref={drawerRef}
        showCreateOfferModal={setShowCreateOfferModal}
      />
      {showCreateOfferModal && (
        <CreateOffer closeCreateOfferModal={closeCreateOfferModal} />
      )}
    </HeaderContainer>
  );
};

Header.propTypes = {
  isGrid: PropTypes.bool,
  showModalHandler: PropTypes.func,
};

export default Header;