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

import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  CategoryIcon,
  HeaderContainer,
  HeaderOptions,
  HeaderWrapperContainer,
  LocationIcon,
  PageTitleContainer,
  SubcategoryIcon,
  SwapsHeaderIcon,
  SwapsIcon,
  SwapsTitle,
  UserIcon,
} from "./Header.styled";
import { sortEnum } from "../../../enums/sortEnum";
import { useTranslation } from "react-i18next";
import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
import useIsMobile from "../../../hooks/useIsMobile";

// import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
import TooltipHeader from "./TooltipHeader/TooltipHeader";
import GridButtons from "./GridButtons/GridButtons";
import HeaderSelect from "./HeaderSelect/HeaderSelect";

const Header = (props) => {
  const { t } = useTranslation();
  const sorting = props?.sorting;
  const { isMobile } = useIsMobile();

  // Changing header string on refresh or on load
  const altString = useMemo(() => {
    if (!props?.users) {
      if (sorting?.selectedSortOption === sortEnum.OLD) {
        return `: ${t("header.oldOffers")}`;
      }
      if (sorting?.selectedSortOption === sortEnum.POPULAR) {
        return `: ${t("header.popularOffers")}`;
      }
    }
    return `: ${t("header.newOffers")}`;
  }, [sorting?.selectedSortOption]);

  const headerTitle = useMemo(() => {
    return props.users
      ? t("admin.users.headerTitle")
      : props.categories
      ? t("admin.categories.headerTitle")
      : props.subcategories
      ? t("admin.subcategories.subcategoriesHeaderTitle")
      : props.category
      ? t("admin.subcategories.headerTitle")
      : props.location
      ? t("admin.locations.headerTitle")
      : !isMobile
      ? t("header.myOffers")
      : props.myOffers
      ? t("header.myOffers")
      : t("offer.offers");
  }, [props, t, isMobile]);
  const headerIcon = useMemo(() => {
    return props.users ? (
      <UserIcon />
    ) : props.categories || props.category ? (
      <CategoryIcon />
    ) : props.subcategories ? (
      <SubcategoryIcon />
    ) : props.location ? (
      <LocationIcon />
    ) : isMobile ? (
      <SwapsIcon />
    ) : (
      <SwapsHeaderIcon />
    );
  });

  return (
    <>
      {props?.skeleton && (
        <SkeletonHeader skeleton={props?.skeleton} myOffers={props?.myOffers} />
      )}
      <HeaderWrapperContainer
        className={props.className}
        skeleton={props?.skeleton}
        isAdmin={props?.isAdmin}
      >
        <HeaderContainer>
          {/* Setting appropriate header title if page is market place or my offers */}
          <TooltipHeader
            altText={altString}
            headerTitle={headerTitle}
            headerIcon={headerIcon}
            offers={props?.offers}
            myOffers={props?.myOffers}
            hideBackButton={props?.hideBackButton}
          />
          {/* ^^^^^^ */}

          <HeaderOptions>
            <GridButtons
              hideGrid={props?.hideGrid}
              isGrid={props?.isGrid}
              setIsGrid={props?.setIsGrid}
            />

            {/* Select option to choose sorting */}
            {!props?.hideSorting && (
              <HeaderSelect
                myOffers={props?.myOffers}
                sorting={sorting}
                hideSorting={props?.hideSorting}
              />
            )}
            {/* ^^^^^^ */}
          </HeaderOptions>
        </HeaderContainer>
        {isMobile && (
          <PageTitleContainer>
            {headerIcon}
            <SwapsTitle>{headerTitle}</SwapsTitle>
          </PageTitleContainer>
        )}
      </HeaderWrapperContainer>
    </>
  );
};

Header.propTypes = {
  children: PropTypes.node,
  setIsGrid: PropTypes.func,
  isGrid: PropTypes.bool,
  offers: PropTypes.any,
  myOffers: PropTypes.bool,
  skeleton: PropTypes.bool,
  sorting: PropTypes.any,
  isAdmin: PropTypes.bool,
  users: PropTypes.bool,
  categories: PropTypes.bool,
  hideGrid: PropTypes.bool,
  className: PropTypes.string,
  hideBackButton: PropTypes.bool,
  category: PropTypes.bool,
  subcategories: PropTypes.bool,
  hideSorting: PropTypes.bool,
  location: PropTypes.bool,
};
Header.defaultProps = {
  isGrid: false,
};

export default Header;