diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index 01d291a..7dac082 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import './Main.scss'; import { MainBannerSlider } from './MainBannerSlider'; // import { GoodsSlider } from './GoodsSlider'; @@ -6,12 +6,20 @@ import { CategoriesList } from './CategoriesList'; import { GoodsSlider } from './GoodsSlider'; import { loadPhones } from '../../app/slices/phonesSlice'; import { useAppDispatch, useAppSelector } from '../../app/reduxHooks'; +import { Phone } from '../../utils/types/Phone'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type type Props = {}; +function sortByHighDiscounts(phones: Phone[]) { + return [...phones].sort((p1, p2) => p2.priceDiscount - p1.priceDiscount); +} + export const Main: React.FC = () => { const dispatch = useAppDispatch(); const { phones } = useAppSelector(state => state.phones); + const phonesWithHighestDiscounts = useMemo(() => { + return sortByHighDiscounts(phones); + }, [phones]); useEffect(() => { dispatch(loadPhones()); @@ -24,7 +32,10 @@ export const Main: React.FC = () => { - + );