Merge pull request #9 from Sayafarov/module6-task2

src/pages/main/main.tsx

@@ -6,12 +6,14 @@ import {useAppSelector} from '@hooks/index.ts';
 import {CitiesList} from '@components/cities-list/cities-list.tsx';
 import {Cities} from '@mocks/cities.ts';
 import {useEffect, useState} from 'react';
+import SortForm, {SortType} from '@pages/main/sort-selection-form.tsx';
 
 function Main(): JSX.Element {
   const offers = useAppSelector((state) => state.offersList);
   const city = useAppSelector((state) => state.city);
 
   const [visibleOffers, setVisibleOffers] = useState<Offer[]>(offers);
+  const [sortedOffers, setSortedOffers] = useState<Offer[]>(visibleOffers);
   const [activeOfferId, setActiveOfferId] = useState<string | null>(null);
 
   const activeOffer = offers.find((offer) => offer.id === activeOfferId);
@@ -20,6 +22,25 @@ function Main(): JSX.Element {
     setVisibleOffers(filteredOffers);
   }, [city, offers]);
 
+  const handleSortChange = (selectedSort: string) => {
+    let sortedOffers = [...visibleOffers];
+    switch (selectedSort) {
+      case SortType.PriceASC:
+        sortedOffers.sort((a, b) => a.price - b.price);
+        break;
+      case SortType.PriceDESC:
+        sortedOffers.sort((a, b) => b.price - a.price);
+        break;
+      case SortType.TopRated:
+        sortedOffers.sort((a, b) => b.rating - a.rating);
+        break;
+      case SortType.Popular:
+        sortedOffers = [...visibleOffers];
+        break;
+    }
+    setSortedOffers(sortedOffers);
+  };
+
   const isEmptyPage = offers.length === 0;
   return (
     <div className={`page page--gray page--main ${isEmptyPage && 'page__main--index-empty'}`}>
@@ -49,28 +70,14 @@ function Main(): JSX.Element {
               <div className="cities__places-container container">
                 <section className="cities__places places">
                   <h2 className="visually-hidden">Places</h2>
-                  <b className="places__found">{`${visibleOffers.length} places to stay in ${city}`}</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"></use>
-                      </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>
-                  <OffersList offers={visibleOffers} onActiveOfferChange={setActiveOfferId}/>
+                  <b className="places__found">{`${sortedOffers.length} places to stay in ${city}`}</b>
+                  <SortForm onSortChange={handleSortChange} />
+                  <OffersList offers={sortedOffers} onActiveOfferChange={setActiveOfferId}/>
                 </section>
                 <div className="cities__right-section">
                   <Map
                     city={city}
-                    offers={visibleOffers}
+                    offers={sortedOffers}
                     selectedOfferId={activeOffer?.id}
                   />
                 </div>

src/pages/main/sort-selection-form.tsx

@@ -0,0 +1,57 @@
+import {useState} from 'react';
+
+export enum SortType {
+  Popular = 'Popular',
+  PriceASC = 'Price: low to high',
+  PriceDESC = 'Price: high to low',
+  TopRated = 'Top rated first',
+}
+
+const SortTypes: SortType[] = Object.values(SortType)
+
+type SortFormProps = {
+  onSortChange: (sortingType: string) => void;
+}
+
+function SortForm({onSortChange}: SortFormProps): JSX.Element {
+  const [isActive, setIsActive] = useState(false);
+  const [selectedSort, setSelectedSort] = useState(SortType.Popular);
+
+  const handleSortSelection = (option: SortType) => {
+    setSelectedSort(option);
+    setIsActive(false);
+    onSortChange(option);
+  };
+
+  return (
+    <form className="places__sorting">
+      <span className="places__sorting-caption">Sort by</span>
+      <span
+        className="places__sorting-type"
+        tabIndex={0}
+        onClick={() => setIsActive(!isActive)}
+      >
+        {selectedSort}
+        <svg className="places__sorting-arrow" width="7" height="4">
+          <use xlinkHref="#icon-arrow-select"></use>
+        </svg>
+      </span>
+      {isActive && (
+        <ul className="places__options places__options--custom places__options--opened">
+          {SortTypes.map((option) => (
+            <li
+              key={option}
+              className={`places__option ${option === selectedSort ? 'places__option--active' : ''}`}
+              tabIndex={0}
+              onClick={() => handleSortSelection(option)}
+            >
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </form>
+  );
+}
+
+export default SortForm;