From 0fa317be50ae0de68861c83069dc4c502a828f8e Mon Sep 17 00:00:00 2001 From: sheva Date: Fri, 4 Aug 2023 22:09:00 +0300 Subject: [PATCH] added some fixes --- README.md | 2 + src/components/NoResults/NoResults.tsx | 4 +- .../ProductsSlider/ProductsSlider.tsx | 103 +++++++++--------- .../ShopByCategory/ShopByCategory.tsx | 4 +- src/helpers/sortOptions.ts | 5 + src/pages/PhonesPage/PhonesPage.tsx | 11 +- 6 files changed, 68 insertions(+), 61 deletions(-) create mode 100644 src/helpers/sortOptions.ts diff --git a/README.md b/README.md index efb45c226a..816cd23d06 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ # React Phone catalog +[DEMO LINK](https://sheva10barca.github.io/react_phone-catalog/) + - If you work alone follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline) - If you work in a team follow the [Work in a team guideline](https://github.com/mate-academy/react_task-guideline/blob/master/team-flow.md#how-to-work-in-a-team) diff --git a/src/components/NoResults/NoResults.tsx b/src/components/NoResults/NoResults.tsx index 48ab238309..ec919942ce 100644 --- a/src/components/NoResults/NoResults.tsx +++ b/src/components/NoResults/NoResults.tsx @@ -6,8 +6,8 @@ type Props = { category: string; }; -export const NoResults: React.FC = ({ category }) => ( +export const NoResults: React.FC = React.memo(({ category }) => (

{`${category} not found`}

-); +)); diff --git a/src/components/ProductsSlider/ProductsSlider.tsx b/src/components/ProductsSlider/ProductsSlider.tsx index bd7033062f..d3bf6558a8 100644 --- a/src/components/ProductsSlider/ProductsSlider.tsx +++ b/src/components/ProductsSlider/ProductsSlider.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import cn from 'classnames'; import { Product } from '../../types/Product'; @@ -14,61 +14,64 @@ type Props = { products: Product[]; }; -export const ProductsSlider: React.FC = ({ title, products }) => { - const [startIndex, setStartIndex] = useState(0); +export const ProductsSlider: React.FC = React.memo( + ({ title, products }) => { + const [startIndex, setStartIndex] = useState(0); - const handlePrevClick = () => { - setStartIndex((prevStartIndex) => Math.max(0, prevStartIndex - 1)); - }; + const handlePrevClick = () => { + setStartIndex((prevStartIndex) => Math.max(0, prevStartIndex - 1)); + }; - const handleNextClick = () => { - setStartIndex((prevStartIndex) => Math.min( - prevStartIndex + 1, - products.length - 4, - )); - }; + const handleNextClick = () => { + setStartIndex((prevStartIndex) => Math.min( + prevStartIndex + 1, products.length - 4, + )); + }; - const visibleCards = products.slice(startIndex, startIndex + 4); + const visibleCards = useMemo(() => { + return products.slice(startIndex, startIndex + 4); + }, [products, startIndex]); - const isPrevButtonDisabled = startIndex === 0; - const isNextButtonDisabled = startIndex === products.length - 4; + const isPrevButtonDisabled = startIndex === 0; + const isNextButtonDisabled = startIndex === products.length - 4; - return ( -
-
-

{title}

+ return ( +
+
+

{title}

-
- - +
+ + +
-
-
- {visibleCards.map((card) => ( -
- -
- ))} +
+ {visibleCards.map((card) => ( +
+ +
+ ))} +
-
- ); -}; + ); + }, +); diff --git a/src/components/ShopByCategory/ShopByCategory.tsx b/src/components/ShopByCategory/ShopByCategory.tsx index cce80519b5..a051d8eedc 100644 --- a/src/components/ShopByCategory/ShopByCategory.tsx +++ b/src/components/ShopByCategory/ShopByCategory.tsx @@ -9,7 +9,7 @@ type Props = { products: Product[]; }; -export const ShopByCategory: React.FC = ({ products }) => { +export const ShopByCategory: React.FC = React.memo(({ products }) => { const getLengthByCategory = ( arrProducts: Product[], type: ProductType, @@ -66,4 +66,4 @@ export const ShopByCategory: React.FC = ({ products }) => {
); -}; +}); diff --git a/src/helpers/sortOptions.ts b/src/helpers/sortOptions.ts new file mode 100644 index 0000000000..3f433c1c33 --- /dev/null +++ b/src/helpers/sortOptions.ts @@ -0,0 +1,5 @@ +export const sortOptions = [ + { value: 'age', label: 'Newest' }, + { value: 'name', label: 'Alphabetically' }, + { value: 'price', label: 'Cheapest' }, +]; diff --git a/src/pages/PhonesPage/PhonesPage.tsx b/src/pages/PhonesPage/PhonesPage.tsx index 2c673a8358..3d309c9061 100644 --- a/src/pages/PhonesPage/PhonesPage.tsx +++ b/src/pages/PhonesPage/PhonesPage.tsx @@ -3,6 +3,7 @@ import { useSearchParams } from 'react-router-dom'; import { Product } from '../../types/Product'; import { getSearchWith } from '../../helpers/searchHelper'; +import { sortOptions } from '../../helpers/sortOptions'; import { ProductCard } from '../../components/ProductCard/ProductCard'; import { DropDown } from '../../components/DropDown/DropDown'; @@ -17,12 +18,6 @@ type Props = { phones: Product[]; }; -const sortOptions = [ - { value: 'age', label: 'Newest' }, - { value: 'name', label: 'Alphabetically' }, - { value: 'price', label: 'Cheapest' }, -]; - const smallestPageSize = 4; export const PhonesPage: React.FC = React.memo(({ phones }) => { @@ -91,7 +86,9 @@ export const PhonesPage: React.FC = React.memo(({ phones }) => { const startIndex = (+currentPage - 1) * +pageSize; const endIndex = startIndex + +pageSize; - const visiblePhones = sortedPhones.slice(startIndex, +endIndex); + const visiblePhones = useMemo(() => { + return sortedPhones.slice(startIndex, +endIndex); + }, [sortedPhones, startIndex, endIndex]); const phonesLength = sortedPhones.length; const pageSizes = [smallestPageSize, 8, phonesLength]; // add 16 when will be more phones on API