done task

src/Pages/main-page.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
 import { Offer } from '../dataTypes/offer.ts';
 import { OffersList } from '../components/offer/offers-list.tsx';
 import { Layout } from '../components/layout.tsx';
@@ -8,14 +9,18 @@ import { Map } from '../components/map/map.tsx';
 import { useAppSelector } from '../store/store.ts';
 import { CitiesList } from '../components/cities-list.tsx';
 import { pluralizeAndCombine } from '../utils/string-utils.ts';
+import { OfferSortSelect } from '../components/offer/offer-sort-select.tsx';
 
 export function MainPage(): React.JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
+  const [offers, setOffers] = useState<Offer[]>([]);
   const city = useAppSelector((state) => state.city);
-  const offers = useAppSelector((state) => state.offers).filter(
+  const unsortedOffers = useAppSelector((state) => state.offers).filter(
     (offer) => offer.city.name === city.name,
   );
-
+  useEffect(() => {
+    setOffers(unsortedOffers);
+  }, [city]);
   return (
     <div className="page page--gray page--main">
       <Layout showFooter>
@@ -31,32 +36,9 @@ export function MainPage(): React.JSX.Element {
                   {pluralizeAndCombine('place', offers.length)} to stay in{' '}
                   {city.name}
                 </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>
+                <OfferSortSelect
+                  onSortChange={(sort) => setOffers(sort(offers))}
+                />
                 <OffersList
                   offers={offers}
                   onActiveOfferChange={(offer: Nullable<Offer>) =>

src/components/offer/offer-sort-select.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Offer } from '../../dataTypes/offer.ts';
+import { SortOffers } from '../../dataTypes/sort-offers.ts';
+
+interface OfferSortSelectProps {
+  onSortChange: (sort: SortOffers) => void;
+}
+
+const sortingOptions: [string, SortOffers][] = [
+  ['Popular', (offers: Offer[]) => offers],
+  [
+    'Price: low to high',
+    (offers: Offer[]) => offers.sort((a, b) => a.price - b.price),
+  ],
+  [
+    'Price: high to low',
+    (offers: Offer[]) => offers.sort((a, b) => b.price - a.price),
+  ],
+  [
+    'Top rated first',
+    (offers: Offer[]) => offers.sort((a, b) => b.rating - a.rating),
+  ],
+];
+
+export function OfferSortSelect({
+  onSortChange,
+}: OfferSortSelectProps): React.JSX.Element {
+  const [isOpen, setIsOpen] = useState(false);
+  const [sortingOption, setSortingOption] = useState('Popular');
+  const handleSortChange = (sort: SortOffers, sortingOptionName: string) => {
+    setSortingOption(sortingOptionName);
+    onSortChange(sort);
+    setIsOpen(false);
+  };
+  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)}
+      >
+        {sortingOption}
+        <svg className="places__sorting-arrow" width="7" height="4">
+          <use xlinkHref="#icon-arrow-select"></use>
+        </svg>
+      </span>
+      {isOpen && (
+        <ul className="places__options places__options--custom places__options--opened">
+          {sortingOptions.map(([name, sort]) => (
+            <li
+              className={`places__option ${name === sortingOption ? 'places__option--active' : ''}`}
+              tabIndex={0}
+              key={name}
+              onClick={() => handleSortChange(sort, name)}
+            >
+              {name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </form>
+  );
+}

src/dataTypes/sort-offers.ts

@@ -0,0 +1,3 @@
+import { Offer } from './offer.ts';
+
+export type SortOffers = (offers: Offer[]) => Offer[];

src/mocks/offers.ts

@@ -1,5 +1,5 @@
-import {Offer} from '../dataTypes/offer.ts';
-import {RoomType} from '../dataTypes/enums/room-type.ts';
+import { Offer } from '../dataTypes/offer.ts';
+import { RoomType } from '../dataTypes/enums/room-type.ts';
 
 export const offerMocks: Offer[] = [
   {
@@ -45,7 +45,7 @@ export const offerMocks: Offer[] = [
     },
     isFavorite: false,
     isPremium: true,
-    rating: 4,
+    rating: 3,
     previewImage: 'apartment-02.jpg',
   },
   {
@@ -91,7 +91,7 @@ export const offerMocks: Offer[] = [
     },
     isFavorite: true,
     isPremium: true,
-    rating: 4,
+    rating: 5,
     previewImage: 'apartment-02.jpg',
   },
 ];