change solution to use store

src/Pages/main-page.tsx

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

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

@@ -1,35 +1,33 @@
 import React, { useState } from 'react';
 import { Offer } from '../../dataTypes/offer.ts';
 import { SortOffers } from '../../dataTypes/sort-offers.ts';
-
-interface OfferSortSelectProps {
-  onSortChange: (sort: SortOffers) => void;
-}
+import { useAppDispatch, useAppSelector } from '../../store/store.ts';
+import { setSortedOffers } from '../../store/actions.ts';
 
 const sortingOptions: [string, SortOffers][] = [
   ['Popular', (offers: Offer[]) => offers],
   [
     'Price: low to high',
-    (offers: Offer[]) => offers.sort((a, b) => a.price - b.price),
+    (offers: Offer[]) => offers.toSorted((a, b) => a.price - b.price),
   ],
   [
     'Price: high to low',
-    (offers: Offer[]) => offers.sort((a, b) => b.price - a.price),
+    (offers: Offer[]) => offers.toSorted((a, b) => b.price - a.price),
   ],
   [
     'Top rated first',
-    (offers: Offer[]) => offers.sort((a, b) => b.rating - a.rating),
+    (offers: Offer[]) => offers.toSorted((a, b) => b.rating - a.rating),
   ],
 ];
 
-export function OfferSortSelect({
-  onSortChange,
-}: OfferSortSelectProps): React.JSX.Element {
+export function OfferSortSelect(): React.JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
   const [sortingOption, setSortingOption] = useState('Popular');
+  const offers = useAppSelector((state) => state.offers);
+  const dispatch = useAppDispatch();
   const handleSortChange = (sort: SortOffers, sortingOptionName: string) => {
     setSortingOption(sortingOptionName);
-    onSortChange(sort);
+    dispatch(setSortedOffers(sort(offers)));
     setIsOpen(false);
   };
   return (

src/store/actions.ts

@@ -5,3 +5,5 @@ import { Offer } from '../dataTypes/offer.ts';
 export const changeCity = createAction<City>('mainPage/changeCity');
 
 export const fillOffers = createAction<Offer[]>('mainPage/fillOffers');
+
+export const setSortedOffers = createAction<Offer[]>('mainPage/setSortedOffers');

src/store/store.ts

@@ -1,5 +1,5 @@
 import { configureStore, createReducer } from '@reduxjs/toolkit';
-import { changeCity, fillOffers } from './actions.ts';
+import { changeCity, fillOffers, setSortedOffers } from './actions.ts';
 import { offerMocks } from '../mocks/offers.ts';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, State } from '../dataTypes/store-types.ts';
@@ -8,6 +8,7 @@ import { PARIS } from '../consts/cities.ts';
 const initialState = {
   city: PARIS,
   offers: offerMocks,
+  sortedOffers: offerMocks,
 };
 
 const reducer = createReducer(initialState, (builder) => {
@@ -17,6 +18,9 @@ const reducer = createReducer(initialState, (builder) => {
     })
     .addCase(fillOffers, (state, action) => {
       state.offers = action.payload;
+    })
+    .addCase(setSortedOffers, (state, action) => {
+      state.sortedOffers = action.payload;
     });
 });