trampa-frontend/src/components/UserReviews/ReviewsSorting/ReviewsSorting.js

import React from "react";
import PropTypes from "prop-types";
import {
  DownArrowIcon,
  HeaderSelect,
  SelectOption,
} from "./ReviewsSorting.styled";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectSelectedReviews } from "../../../store/selectors/reviewSelector";
import { sortReviews } from "../../../util/helpers/reviewsHelper";
import { reviewSortEnum } from "../../../enums/reviewEnum";
import { setReviews } from "../../../store/actions/review/reviewActions";

const ReviewsSorting = () => {
  const reviews = useSelector(selectSelectedReviews);
  const dispatch = useDispatch();
  const [value, setValue] = useState();
  const changeValue = (event) => {
    dispatch(
      setReviews(
        sortReviews(
          reviews,
          event.target.value.value === reviewSortEnum.POSITIVE.value
        )
      )
    );
    setValue(event.target.value);
  };
  return (
    <HeaderSelect
      value={value || reviewSortEnum.INITIAL}
      IconComponent={DownArrowIcon}
      onChange={changeValue}
    >
      <SelectOption style={{ display: "none" }} value={reviewSortEnum.INITIAL}>
        {reviewSortEnum.INITIAL.mainText}
      </SelectOption>
      {Object.keys(reviewSortEnum).map((property) => {
        if (reviewSortEnum[property].value === 0) return;
        return (
          <SelectOption
            value={reviewSortEnum[property]}
            key={reviewSortEnum[property].value}
          >
            {reviewSortEnum[property].mainText}
          </SelectOption>
        );
      })}
    </HeaderSelect>
  );
};

ReviewsSorting.propTypes = {
  children: PropTypes.node,
};

export default ReviewsSorting;