From b68367a56d0608216aa59e2f209e621a8a880c71 Mon Sep 17 00:00:00 2001 From: VartoS Date: Thu, 26 Dec 2024 15:00:40 +0500 Subject: [PATCH 1/2] =?UTF-8?q?=D1=81=D0=BE=D1=80=D1=82=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=BA=D0=B0=20=D0=B7=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=B0=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pages/main-page/main-page.tsx | 67 ++++++++++--------- .../pages/main-page/sorting-dropdown.tsx | 52 ++++++++++++++ src/consts.ts | 14 ++++ 3 files changed, 100 insertions(+), 33 deletions(-) create mode 100644 src/components/pages/main-page/sorting-dropdown.tsx diff --git a/src/components/pages/main-page/main-page.tsx b/src/components/pages/main-page/main-page.tsx index 34124ae..34b17a6 100644 --- a/src/components/pages/main-page/main-page.tsx +++ b/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>(null); + const [currentSort, setCurrentSort] = useState( + 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 (
@@ -31,36 +54,14 @@ function MainPage(): JSX.Element { {offers.length} places to stay in {activeCityName} -
- Sort by - - Popular - - - - -
    -
  • - Popular -
    • -
  • - Price: low to high -
    • -
  • - Price: high to low -
    • -
  • - Top rated first -
    • -
-
+ ) => - setActiveOffer(offer)} + setActiveOffer(offer) + } cardClass={CardClass.Cities} wrapperClassName={ 'cities__places-list places__list tabs__content' @@ -70,16 +71,16 @@ function MainPage(): JSX.Element {
({ + points={sortedOffers.map((x) => ({ location: x.location, id: x.id, }))} selectedPoint={ activeOffer ? { - location: activeOffer.location, - id: activeOffer.id, - } + location: activeOffer.location, + id: activeOffer.id, + } : undefined } /> diff --git a/src/components/pages/main-page/sorting-dropdown.tsx b/src/components/pages/main-page/sorting-dropdown.tsx new file mode 100644 index 0000000..0b05e76 --- /dev/null +++ b/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 = (selectedSort: SortingOption) => { + setIsOpen(false); + setSelectedSort(selectedSort); + onSortChange(selectedSort) + } + return ( +
+ Sort by + { + setIsOpen(!isOpen); + }} + > + {selectedSort} + + + + + {isOpen && ( +
    + {SortingOptions.map((option) => ( +
  • handleSortChange(option)} + > + {option} +
    • + ))} +
+ )} +
+ ); +} + +export default SortingDropdown; diff --git a/src/consts.ts b/src/consts.ts index 2341465..90a5aa7 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -143,3 +143,17 @@ export enum CardClass { 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 +]; \ No newline at end of file From 68278e3f711c9677cf5b5fa07a8bd0ebab647cd7 Mon Sep 17 00:00:00 2001 From: VartoS Date: Thu, 26 Dec 2024 15:04:03 +0500 Subject: [PATCH 2/2] =?UTF-8?q?=D0=BA=D0=BE=D0=B4=D1=81=D1=82=D0=B0=D0=B9?= =?UTF-8?q?=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pages/main-page/main-page.tsx | 15 ++++++--------- .../pages/main-page/sorting-dropdown.tsx | 12 ++++++------ src/consts.ts | 8 ++++---- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/components/pages/main-page/main-page.tsx b/src/components/pages/main-page/main-page.tsx index 34b17a6..17904cf 100644 --- a/src/components/pages/main-page/main-page.tsx +++ b/src/components/pages/main-page/main-page.tsx @@ -38,7 +38,7 @@ function MainPage(): JSX.Element { default: break; } - return sorted + return sorted; }; const sortedOffers = getSortedOffers(); return ( @@ -54,14 +54,11 @@ function MainPage(): JSX.Element { {offers.length} places to stay in {activeCityName} - + ) => - setActiveOffer(offer) - } + setActiveOffer(offer)} cardClass={CardClass.Cities} wrapperClassName={ 'cities__places-list places__list tabs__content' @@ -78,9 +75,9 @@ function MainPage(): JSX.Element { selectedPoint={ activeOffer ? { - location: activeOffer.location, - id: activeOffer.id, - } + location: activeOffer.location, + id: activeOffer.id, + } : undefined } /> diff --git a/src/components/pages/main-page/sorting-dropdown.tsx b/src/components/pages/main-page/sorting-dropdown.tsx index 0b05e76..d401867 100644 --- a/src/components/pages/main-page/sorting-dropdown.tsx +++ b/src/components/pages/main-page/sorting-dropdown.tsx @@ -2,18 +2,18 @@ import { useState } from 'react'; import { SortingOption, SortingOptions } from '../../../consts'; type SortingDropDownProps = { - onSortChange: (selectedSort: SortingOption) => void; - }; + onSortChange: (selectedSort: SortingOption) => void; +}; function SortingDropdown({ onSortChange }: SortingDropDownProps): JSX.Element { const [isOpen, setIsOpen] = useState(false); const [selectedSort, setSelectedSort] = useState(SortingOption.Popular); - const handleSortChange = (selectedSort: SortingOption) => { + const handleSortChange = (sortOption: SortingOption) => { setIsOpen(false); - setSelectedSort(selectedSort); - onSortChange(selectedSort) - } + setSelectedSort(sortOption); + onSortChange(sortOption); + }; return (
Sort by diff --git a/src/consts.ts b/src/consts.ts index 90a5aa7..c5c64dd 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -135,7 +135,7 @@ export const CityData = { export enum StoreNameSpace { Data = 'DATA', User = 'USER', - SingleOffer = 'SINGLE_OFFER' + SingleOffer = 'SINGLE_OFFER', } export enum CardClass { @@ -148,12 +148,12 @@ export enum SortingOption { Popular = 'Popular', PriceLowToHigh = 'Price: low to high', PriceHighToLow = 'Price: high to low', - TopRatedFirst = 'Top rated first' + TopRatedFirst = 'Top rated first', } export const SortingOptions = [ SortingOption.Popular, SortingOption.PriceHighToLow, SortingOption.PriceLowToHigh, - SortingOption.TopRatedFirst -]; \ No newline at end of file + SortingOption.TopRatedFirst, +];