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

import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  CategoryHeaderIcon,
  HeaderAltLocation,
  HeaderButton,
  HeaderButtons,
  HeaderContainer,
  HeaderLocation,
  HeaderOptions,
  HeaderSelect,
  IconStyled,
  MySwapsTitle,
  RefreshIcon,
  SelectOption,
} 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";

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

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

  const showAltString = useMemo(() => {
    return (
      sorting.selectedSortOption === sortEnum.INITIAL ||
      sorting.selectedSortOption === sortEnum.NEW ||
      !sorting.selectedSortOption
    );
  }, [sorting.selectedSortOption]);

  const handleChangeSelect = (event) => {
    // let chosenOption;
    sorting.changeSorting(event.target.value);
    // for (const sortOption in sortEnum) {
    //   if (sortEnum[sortOption].value === event.target.value) {
    //     chosenOption = sortEnum[sortOption];
    //     sorting.changeSorting(chosenOption);
    //   }
    // }
  };

  return (
    <>
      <SkeletonHeader
        skeleton={props.skeleton}
      />
      <HeaderContainer skeleton={props.skeleton}>
        {/* Setting appropriate header title if page is market place or my offers */}
        <Tooltip title={headerString}>
          <>
            {!props.myOffers ? (
              <>
                <CategoryHeaderIcon />
                <HeaderLocation initial={showAltString}>
                  {headerString}
                </HeaderLocation>
                {showAltString && (
                  <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
                )}
              </>
            ) : (
              <MySwapsTitle>
                <RefreshIcon /> {t("header.myOffers")}
              </MySwapsTitle>
            )}
          </>
        </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}
          >
            <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>
    </>
  );
};

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

export default Header;