Merge pull request #13 from VartoSss/module6-task2

src/components/pages/main-page/main-page.tsx

@@ -5,19 +5,42 @@ import OffersList from './offers-list';
 import { Nullable } from 'vitest';
 import CitiesList from './cities-list';
 import { useAppSelector } from '../../../store/hooks';
-import { CardClass, CityData } from '../../../consts';
+import { CardClass, CityData, SortingOption } from '../../../consts';
 import { Header } from './header';
 import {
   getCurrentCityName,
   getOffers,
 } from '../../../store/data-process/data-process.selectors';
+import SortingDropdown from './sorting-dropdown';
 
 function MainPage(): JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
+  const [currentSort, setCurrentSort] = useState<SortingOption>(
+    SortingOption.Popular
+  );
   const activeCityName = useAppSelector(getCurrentCityName);
   const offers = useAppSelector(getOffers).filter(
     (offer) => offer.city.name === activeCityName
   );
+
+  const getSortedOffers = () => {
+    const sorted = [...offers];
+    switch (currentSort) {
+      case SortingOption.PriceLowToHigh:
+        sorted.sort((a, b) => a.price - b.price);
+        break;
+      case SortingOption.PriceHighToLow:
+        sorted.sort((a, b) => b.price - a.price);
+        break;
+      case SortingOption.TopRatedFirst:
+        sorted.sort((a, b) => b.rating - a.rating);
+        break;
+      default:
+        break;
+    }
+    return sorted;
+  };
+  const sortedOffers = getSortedOffers();
   return (
     <div className="page page--gray page--main">
       <Header />
@@ -31,34 +54,9 @@ function MainPage(): JSX.Element {
               <b className="places__found">
                 {offers.length} places to stay in {activeCityName}
               </b>
-              <form className="places__sorting" action="#" method="get">
-                <span className="places__sorting-caption">Sort by</span>
-                <span className="places__sorting-type" tabIndex={0}>
-                  Popular
-                  <svg className="places__sorting-arrow" width={7} height={4}>
-                    <use xlinkHref="#icon-arrow-select" />
-                  </svg>
-                </span>
-                <ul className="places__options places__options--custom places__options--opened">
-                  <li
-                    className="places__option places__option--active"
-                    tabIndex={0}
-                  >
-                    Popular
-                  </li>
-                  <li className="places__option" tabIndex={0}>
-                    Price: low to high
-                  </li>
-                  <li className="places__option" tabIndex={0}>
-                    Price: high to low
-                  </li>
-                  <li className="places__option" tabIndex={0}>
-                    Top rated first
-                  </li>
-                </ul>
-              </form>
+              <SortingDropdown onSortChange={setCurrentSort} />
               <OffersList
-                offers={offers}
+                offers={sortedOffers}
                 onActiveOfferChange={(offer: Nullable<Offer>) =>
                   setActiveOffer(offer)}
                 cardClass={CardClass.Cities}
@@ -70,7 +68,7 @@ function MainPage(): JSX.Element {
             <div className="cities__right-section">
               <Map
                 city={CityData[activeCityName]}
-                points={offers.map((x) => ({
+                points={sortedOffers.map((x) => ({
                   location: x.location,
                   id: x.id,
                 }))}

src/components/pages/main-page/sorting-dropdown.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { SortingOption, SortingOptions } from '../../../consts';
+
+type SortingDropDownProps = {
+  onSortChange: (selectedSort: SortingOption) => void;
+};
+
+function SortingDropdown({ onSortChange }: SortingDropDownProps): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedSort, setSelectedSort] = useState(SortingOption.Popular);
+
+  const handleSortChange = (sortOption: SortingOption) => {
+    setIsOpen(false);
+    setSelectedSort(sortOption);
+    onSortChange(sortOption);
+  };
+  return (
+    <form className="places__sorting" action="#" method="get">
+      <span className="places__sorting-caption">Sort by </span>
+      <span
+        className="places__sorting-type"
+        tabIndex={0}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        {selectedSort}
+        <svg className="places__sorting-arrow" width={7} height={4}>
+          <use xlinkHref="#icon-arrow-select" />
+        </svg>
+      </span>
+      {isOpen && (
+        <ul className="places__options places__options--custom places__options--opened">
+          {SortingOptions.map((option) => (
+            <li
+              key={option}
+              className={`places__option ${
+                option === selectedSort ? 'places__option--active' : ''
+              }`}
+              tabIndex={0}
+              onClick={() => handleSortChange(option)}
+            >
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </form>
+  );
+}
+
+export default SortingDropdown;

src/consts.ts

@@ -135,11 +135,25 @@ export const CityData = {
 export enum StoreNameSpace {
   Data = 'DATA',
   User = 'USER',
-  SingleOffer = 'SINGLE_OFFER'
+  SingleOffer = 'SINGLE_OFFER',
 }
 
 export enum CardClass {
   Cities = 'cities__card',
   Nearby = 'near-places__card',
   Favorites = 'favorites__card',
 }
+
+export enum SortingOption {
+  Popular = 'Popular',
+  PriceLowToHigh = 'Price: low to high',
+  PriceHighToLow = 'Price: high to low',
+  TopRatedFirst = 'Top rated first',
+}
+
+export const SortingOptions = [
+  SortingOption.Popular,
+  SortingOption.PriceHighToLow,
+  SortingOption.PriceLowToHigh,
+  SortingOption.TopRatedFirst,
+];