added some fixes

mate-academy · Aug 4, 2023 · 0fa317b · 0fa317b
1 parent e0d2578
commit 0fa317b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 61 deletions.
diff --git 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
@@ -6,8 +6,8 @@ type Props = {
   category: string;
 };
 
-export const NoResults: React.FC<Props> = ({ category }) => (
+export const NoResults: React.FC<Props> = React.memo(({ category }) => (
   <div className="NoResults">
     <h1 className="NoResults__title">{`${category} not found`}</h1>
   </div>
-);
+));
diff --git 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<Props> = ({ title, products }) => {
-  const [startIndex, setStartIndex] = useState(0);
+export const ProductsSlider: React.FC<Props> = 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 (
-    <div className="ProductsSlider">
-      <div className="ProductsSlider__content">
-        <h2 className="ProductsSlider__title">{title}</h2>
+    return (
+      <div className="ProductsSlider">
+        <div className="ProductsSlider__content">
+          <h2 className="ProductsSlider__title">{title}</h2>
 
-        <div className="ProductsSlider__buttons">
-          <button
-            type="button"
-            onClick={handlePrevClick}
-            disabled={isPrevButtonDisabled}
-            className={cn('ProductsSlider__button', {
-              disabled: isPrevButtonDisabled,
-            })}
-          >
-            <img src={arrowLeft} alt="arrow-left" />
-          </button>
-          <button
-            type="button"
-            onClick={handleNextClick}
-            disabled={isNextButtonDisabled}
-            className={cn('ProductsSlider__button', {
-              disabled: isNextButtonDisabled,
-            })}
-          >
-            <img src={arrowRight} alt="arrow-right" />
-          </button>
+          <div className="ProductsSlider__buttons">
+            <button
+              type="button"
+              onClick={handlePrevClick}
+              disabled={isPrevButtonDisabled}
+              className={cn('ProductsSlider__button', {
+                disabled: isPrevButtonDisabled,
+              })}
+            >
+              <img src={arrowLeft} alt="arrow-left" />
+            </button>
+            <button
+              type="button"
+              onClick={handleNextClick}
+              disabled={isNextButtonDisabled}
+              className={cn('ProductsSlider__button', {
+                disabled: isNextButtonDisabled,
+              })}
+            >
+              <img src={arrowRight} alt="arrow-right" />
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="ProductsSlider__cards" data-cy="cardsContainer">
-        {visibleCards.map((card) => (
-          <div className="ProductsSlider__card" key={card.id}>
-            <ProductCard product={card} />
-          </div>
-        ))}
+        <div className="ProductsSlider__cards" data-cy="cardsContainer">
+          {visibleCards.map((card) => (
+            <div className="ProductsSlider__card" key={card.id}>
+              <ProductCard product={card} />
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
diff --git 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<Props> = ({ products }) => {
+export const ShopByCategory: React.FC<Props> = React.memo(({ products }) => {
   const getLengthByCategory = (
     arrProducts: Product[],
     type: ProductType,
@@ -66,4 +66,4 @@ export const ShopByCategory: React.FC<Props> = ({ products }) => {
       </div>
     </div>
   );
-};
+});
diff --git a/src/helpers/sortOptions.ts 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
@@ -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<Props> = React.memo(({ phones }) => {
@@ -91,7 +86,9 @@ export const PhonesPage: React.FC<Props> = 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