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

import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  ButtonContainer,
  // ButtonContainer,
  CategoryHeaderIcon,
  HeaderAltLocation,
  HeaderButton,
  HeaderButtons,
  HeaderCategoryString,
  HeaderContainer,
  HeaderLocation,
  HeaderLocationsMainString,
  HeaderLocationsString,
  HeaderOptions,
  HeaderSelect,
  HeaderSubcategoryString,
  HeaderText,
  // HeaderText,
  HeaderTitleContainer,
  HeaderTitleText,
  HeaderWrapperContainer,
  IconStyled,
  PageTitleContainer,
  SelectOption,
  SwapsHeaderIcon,
  SwapsIcon,
  SwapsTitle,
  TooltipInnerContainer,
} from "./Header.styled";
import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
import { ReactComponent as Down } from "../../../assets/images/svg/down-arrow.svg";
import selectedTheme from "../../../themes";
import { sortEnum } from "../../../enums/sortEnum";
import { useTranslation } from "react-i18next";
import { Tooltip } from "@mui/material";
import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
import { useSelector } from "react-redux";
import { selectHeaderString } from "../../../store/selectors/filtersSelectors";
import useIsMobile from "../../../hooks/useIsMobile";
import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
// import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
import history from "../../../store/utils/history";

const DownArrow = (props) => (
  <IconStyled {...props}>
    <Down />
  </IconStyled>
);

const Header = (props) => {
  const { t } = useTranslation();
  const sorting = props.sorting;
  const headerString = useSelector(selectHeaderString);
  const { isMobile } = useIsMobile();
  // Changing header string on refresh or on load

  const altString = useMemo(() => {
    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 handleChangeSelect = (event) => {
    sorting.changeSorting(event.target.value);
  };
  const handleClickCategory = () => {
    props.offers.filters.locations.clear();
    props.offers.filters.subcategory.clear();
    props.offers.applyFilters();
  };
  const handleClickSubcategory = () => {
    props.offers.filters.locations.clear();
    props.offers.applyFilters();
  };
  const goBack = () => {
    history.goBack();
  };

  return (
    <>
      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers} />
      <HeaderWrapperContainer skeleton={props.skeleton}>
        <HeaderContainer>
          {/* Setting appropriate header title if page is market place or my offers */}
          <Tooltip title={headerString.text}>
            <TooltipInnerContainer>
              {!props.myOffers ? (
                <>
                  <CategoryHeaderIcon />
                  <HeaderLocation>
                    {/* {headerString} */}
                    <HeaderCategoryString
                      component="span"
                      onClick={handleClickCategory}
                    >
                      {headerString.categoryString}
                      {/* {headerString.subcategoryString && <>&nbsp;</>} */}
                    </HeaderCategoryString>
                    <HeaderSubcategoryString
                      component="span"
                      onClick={handleClickSubcategory}
                    >
                      {headerString.subcategoryString}
                      {/* {headerString.locationsString && <>&nbsp;</>} */}
                    </HeaderSubcategoryString>
                    <HeaderLocationsString component="span">
                      <HeaderLocationsMainString component="span">
                        {headerString.locationsString}
                      </HeaderLocationsMainString>
                      <HeaderAltLocation component="span">
                        {altString}
                      </HeaderAltLocation>
                    </HeaderLocationsString>
                  </HeaderLocation>
                </>
              ) : (
                <>
                  {!isMobile ? (
                    <HeaderTitleContainer>
                      <SwapsHeaderIcon />
                      <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
                    </HeaderTitleContainer>
                  ) : (
                    <ButtonContainer onClick={goBack}>
                      <ArrowButton side={"left"}></ArrowButton>
                      <HeaderText>{t("messages.goBack")}</HeaderText>
                    </ButtonContainer>
                  )}
                </>
              )}
            </TooltipInnerContainer>
          </Tooltip>
          {/* ^^^^^^ */}

          <HeaderOptions>
            <HeaderButtons>
              {/* Setting display of offer cards to full width */}
              <HeaderButton
                iconColor={
                  props.isGrid
                    ? selectedTheme.colors.iconStrokeColor
                    : selectedTheme.colors.primaryPurple
                }
                onClick={() => props.setIsGrid(false)}
              >
                <GridLine />
              </HeaderButton>
              {/* ^^^^^^ */}

              {/* Setting display of offer cards to half width (Grid) */}
              <HeaderButton
                iconColor={
                  props.isGrid
                    ? selectedTheme.colors.primaryPurple
                    : selectedTheme.colors.iconStrokeColor
                }
                onClick={() => props.setIsGrid(true)}
              >
                <GridSquare />
              </HeaderButton>
              {/* ^^^^^^ */}
            </HeaderButtons>

            {/* Select option to choose sorting */}
            <HeaderSelect
              value={
                sorting.selectedSortOption?.value
                  ? sorting.selectedSortOption
                  : "default"
              }
              IconComponent={DownArrow}
              onChange={handleChangeSelect}
              myOffers={props.myOffers}
            >
              <SelectOption style={{ display: "none" }} value="default">
                {t("reviews.sortBy")}
              </SelectOption>
              {Object.keys(sortEnum).map((property) => {
                if (sortEnum[property].value === 0) return;
                return (
                  <SelectOption
                    value={sortEnum[property]}
                    key={sortEnum[property].value}
                  >
                    {sortEnum[property].mainText}
                  </SelectOption>
                );
              })}
            </HeaderSelect>
            {/* ^^^^^^ */}
          </HeaderOptions>
        </HeaderContainer>
        {isMobile && (
          <PageTitleContainer>
            <SwapsIcon />
            <SwapsTitle>
              {props.myOffers ? t("header.myOffers") : t("offer.offers")}
            </SwapsTitle>
          </PageTitleContainer>
        )}
      </HeaderWrapperContainer>
    </>
  );
};

Header.propTypes = {
  children: PropTypes.node,
  setIsGrid: PropTypes.func,
  isGrid: PropTypes.bool,
  offers: PropTypes.any,
  category: PropTypes.string,
  myOffers: PropTypes.bool,
  skeleton: PropTypes.bool,
  sorting: PropTypes.any,
};
Header.defaultProps = {
  isGrid: false,
};

export default Header;