added loader for ProductCart and some style improvements

mate-academy · Aug 4, 2023 · e0d2578 · e0d2578
1 parent 61459d2
commit e0d2578
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 64 deletions.
diff --git a/src/components/AddToCartButton/AddToCartButton.scss b/src/components/AddToCartButton/AddToCartButton.scss
@@ -15,13 +15,15 @@
 
   cursor: pointer;
 
-  &:hover {
-    box-shadow: 0 3px 13px #171f3042;
-  }
+  transition-duration: 0.3s;
 
   &.isItemInCart {
     border: 1px solid #e2e6e9;
     color: #27ae60;
     background-color: transparent;
   }
+
+  &:hover {
+    box-shadow: 0 3px 13px #171f3042;
+  }
 }
diff --git a/src/components/AddToFavButton/AddToFavButton.scss b/src/components/AddToFavButton/AddToFavButton.scss
@@ -10,11 +10,18 @@
 
   cursor: pointer;
 
-  &:hover {
-    border-color: #313237;
-  }
+  transition-duration: 0.3s;
+
+  background-image: url("../../images/heart.svg");
+  background-repeat: no-repeat;
+  background-position: center;
 
   &.isItemFav {
     border-color: #e2e6e9;
+    background-image: url("../../images/heart-selected.svg");
+  }
+
+  &:hover {
+    border-color: #313237;
   }
 }
diff --git a/src/components/AddToFavButton/AddToFavButton.tsx b/src/components/AddToFavButton/AddToFavButton.tsx
@@ -1,9 +1,7 @@
+/*  eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 import cn from 'classnames';
 
-import favIcon from '../../images/heart.svg';
-import favIconSelected from '../../images/heart-selected.svg';
-
 import './AddToFavButton.scss';
 
 type Props = {
@@ -23,8 +21,6 @@ export const AddToFavButton: React.FC<Props> = ({
       })}
       onClick={handleAddToFavorites}
       data-cy="addToFavorite"
-    >
-      <img src={isItemFav ? favIconSelected : favIcon} alt="favIcon" />
-    </button>
+    />
   );
 };
diff --git a/src/components/Carousel/Carousel.scss b/src/components/Carousel/Carousel.scss
@@ -60,6 +60,7 @@
     width: 14px;
 
     cursor: pointer;
+    transition-duration: 0.3s;
 
     &.active {
       background-color: #313237;

diff --git a/src/components/DropDown/DropDown.scss b/src/components/DropDown/DropDown.scss
@@ -20,6 +20,8 @@
     background-size: 16px 16px;
     padding-right: 18px;
 
+    transition-duration: 0.3s;
+
     &--is-active {
       background-image: url("../../images/arrows/arrow-up.svg");
     }

diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -22,6 +22,8 @@
   }
 
   &__item {
+    transition-duration: 0.3s;
+
     &:hover {
       color: #313237;
     }
@@ -32,6 +34,8 @@
     gap: 16px;
     cursor: pointer;
 
+    transition-duration: 0.3s;
+
     &-btn {
       display: flex;
       justify-content: center;
@@ -42,6 +46,8 @@
       background: none;
 
       border: 1px solid #b4bcc3;
+
+      transition-duration: 0.3s;
     }
 
     &:hover {

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -101,6 +101,8 @@
 
     background: no-repeat center;
 
+    transition-duration: 0.3s;
+
     &--fav {
       background-image: url("../../images/header-buttons/favorites-default.svg");
     }

diff --git a/src/components/ProductCard/ProductCard.scss b/src/components/ProductCard/ProductCard.scss
@@ -1,11 +1,26 @@
 .ProductCard {
   padding: 24px;
   color: #313237;
-  max-width: 272px;
-  max-height: 507px;
+  width: 272px;
+  height: 507px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   border: 1px solid #e2e6e9;
 
+  transition-duration: 0.3s;
+
+  &:hover {
+    transform: scale(1.04);
+    box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px,
+      rgba(0, 0, 0, 0.12) 0 -12px 30px,
+      rgba(0, 0, 0, 0.12) 0 4px 6px,
+      rgba(0, 0, 0, 0.17) 0 12px 13px,
+      rgba(0, 0, 0, 0.09) 0 -3px 5px;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;

diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { RotatingLines } from 'react-loader-spinner';
 
 import { CartContext } from '../../providers/CartProvider/CartProvider';
 
@@ -35,34 +36,35 @@ export const ProductCard: React.FC<Props> = React.memo(({ product }) => {
 
   const { productsInCart, setProductsInCart } = useContext(CartContext);
   const { favoriteProducts, setFavoriteProducts } = useContext(FavContext);
-
-  const discountedPrice = getDiscount(price, discount);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [productWithDetails, setProductWithDetails]
-    = useState<ProductDetails | null>(null);
+    = useState<ProductDetails>();
 
   useEffect(() => {
-    let isMounted = true;
+    setIsLoading(true);
 
     const loadProduct = async () => {
       try {
-        const productFromServer = await getProduct(id);
+        const productFromServer = await getProduct(product.id);
 
-        if (isMounted) {
-          setProductWithDetails(productFromServer);
-        }
+        setProductWithDetails(productFromServer);
       } catch {
         throw new Error('Loading Error');
+      } finally {
+        setIsLoading(false);
       }
     };
 
     loadProduct();
 
     return () => {
-      isMounted = false;
+      setIsLoading(false);
     };
   }, []);
 
+  const discountedPrice = getDiscount(price, discount);
+
   const getTypeOfProduct = (prodType: string) => {
     switch (prodType) {
       case ProductType.tablet:
@@ -117,47 +119,59 @@ export const ProductCard: React.FC<Props> = React.memo(({ product }) => {
   return (
     <div className="ProductCard">
       <div className="ProductCard__content">
-        <Link to={`/${productType}/${id}`} state={productWithDetails} className="ProductCard__photo">
-          <img src={imageUrl} alt="product" className="ProductCard__img" />
-        </Link>
-
-        <div className="ProductCard__title">{name || ''}</div>
-
-        <div className="ProductCard__price">
-          <div className="ProductCard__price-normal">{`$${discountedPrice}`}</div>
-          {discount > 0 && (
-            <div className="ProductCard__price-discounted">{`$${price}`}</div>
-          )}
-        </div>
-
-        <div className="ProductCard__details">
-          <div className="ProductCard__details-item">
-            <div className="ProductCard__details-item__name">Screen</div>
-            <div className="ProductCard__details-item__value">
-              {screen || 'unknown'}
+        {isLoading ? (
+          <RotatingLines
+            strokeColor="#EB5757"
+            strokeWidth="5"
+            animationDuration="0.75"
+            width="66"
+            visible={isLoading}
+          />
+        ) : (
+          <>
+            <Link to={`/${productType}/${id}`} state={productWithDetails} className="ProductCard__photo">
+              <img src={imageUrl} alt="product" className="ProductCard__img" />
+            </Link>
+
+            <div className="ProductCard__title">{name}</div>
+
+            <div className="ProductCard__price">
+              <div className="ProductCard__price-normal">{`$${discountedPrice}`}</div>
+              {discount > 0 && (
+                <div className="ProductCard__price-discounted">{`$${price}`}</div>
+              )}
             </div>
-          </div>
-          <div className="ProductCard__details-item">
-            <div className="ProductCard__details-item__name">Capacity</div>
-            <div className="ProductCard__details-item__value">
-              {capacity || 'unknown'}
+
+            <div className="ProductCard__details">
+              <div className="ProductCard__details-item">
+                <div className="ProductCard__details-item__name">Screen</div>
+                <div className="ProductCard__details-item__value">
+                  {screen || 'unknown'}
+                </div>
+              </div>
+              <div className="ProductCard__details-item">
+                <div className="ProductCard__details-item__name">Capacity</div>
+                <div className="ProductCard__details-item__value">
+                  {capacity || 'unknown'}
+                </div>
+              </div>
+              <div className="ProductCard__details-item">
+                <div className="ProductCard__details-item__name">RAM</div>
+                <div className="ProductCard__details-item__value">
+                  {ram || 'unknown'}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className="ProductCard__details-item">
-            <div className="ProductCard__details-item__name">RAM</div>
-            <div className="ProductCard__details-item__value">
-              {ram || 'unknown'}
+
+            <div className="ProductCard__buttons">
+              <AddToCartButton handleAddToCart={handleAddToCart} id={id} />
+              <AddToFavButton
+                handleAddToFavorites={handleAddToFavorites}
+                isItemFav={isItemFav}
+              />
             </div>
-          </div>
-        </div>
-
-        <div className="ProductCard__buttons">
-          <AddToCartButton handleAddToCart={handleAddToCart} id={id} />
-          <AddToFavButton
-            handleAddToFavorites={handleAddToFavorites}
-            isItemFav={isItemFav}
-          />
-        </div>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss
@@ -3,17 +3,23 @@
   align-items: center;
   box-shadow: -1px 0 0 #e2e6e9;
   position: relative;
+  border: 1px solid transparent;
 
   &__input {
     width: 327px;
     padding: 22px 0 22px 24px;
     background: none;
     background-color: #fafbfc;
-    border: none;
+    border: 1px solid transparent;
     font-family: "MontSemiBold", Helvetica, sans-serif;
     font-size: 14px;
     color: #313237;
     letter-spacing: 0;
+    border-bottom: #e2e6e9;
+  }
+
+  &:focus {
+    border: 1px solid #313237;
   }
 
   &__btn {

diff --git a/src/components/ShopByCategory/ShopByCategory.scss b/src/components/ShopByCategory/ShopByCategory.scss
@@ -23,6 +23,11 @@
 
     display: flex;
     flex-direction: column;
+    transition-duration: 0.3s;
+
+    &:hover {
+      transform: scale(1.04);
+    }
 
     &-photo {
       height: 368px;

diff --git a/src/pages/ProductDetailsPage/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage/ProductDetailsPage.tsx
@@ -133,7 +133,7 @@ export const ProductDetailsPage: React.FC<Props> = React.memo(({
   return (
     <div className="ProductDetailsPage">
       <div className="container">
-        {currentProduct ? (
+        {currentProduct || propsData ? (
           <div className="ProductDetailsPage__content">
             <Breadcrumbs />
 
@@ -236,7 +236,7 @@ export const ProductDetailsPage: React.FC<Props> = React.memo(({
                 <div className="ProductDetailsPage__price price">
                   <div className="price__normal">{`$${discountedPrice}`}</div>
 
-                  {currentProduct?.discount > 0 && (
+                  {currentProduct && currentProduct?.discount > 0 && (
                     <div className="price__without-discount">{`$${currentProduct.price}`}</div>
                   )}
                 </div>