Merge pull request #63 from fs-jun24-team-3/feature/favorites-state-a…

…nd-count-in-the-header

Feature/favorites state and count in the header

src/app/slices/favoritesSlice.ts

@@ -3,12 +3,12 @@ import { UnionProduct } from '../../utils/types/UnionProduct';
 
 interface FavoriteState {
   favoriteItems: UnionProduct[];
-  count: number;
+  favCount: number;
 }
 
 const initialState: FavoriteState = {
   favoriteItems: JSON.parse(localStorage.getItem('favorites') || '[]'),
-  count: JSON.parse(localStorage.getItem('favCount') || '0'),
+  favCount: JSON.parse(localStorage.getItem('favCount') || '0'),
 };
 
 export const favoritesSlice = createSlice({
@@ -24,18 +24,15 @@ export const favoritesSlice = createSlice({
         state.favoriteItems = state.favoriteItems.filter(
           favItem => favItem.id !== action.payload.id,
         );
-        state.count -= 1;
+        state.favCount -= 1;
       } else {
         state.favoriteItems.push(action.payload);
-        state.count += 1;
+        state.favCount += 1;
       }
 
-      localStorage.setItem('favCount', JSON.stringify(state.count));
+      localStorage.setItem('favCount', JSON.stringify(state.favCount));
       localStorage.setItem('favorites', JSON.stringify(state.favoriteItems));
     },
-    // removeFromFavorites: (state, action: PayloadAction<FavoriteItem>) => {},
-    // increaseQuantity: (state, action: PayloadAction<FavoriteItem>) => {},
-    // decreaseQuantity: (state, action: PayloadAction<FavoriteItem>) => {},
   },
 });
 

src/components/Buttons/FavoriteButton/FavoriteButton.tsx

@@ -1,23 +1,28 @@
 import heart from '../../../img/headerIcon/like.png';
 import heartSelected from '../../../img/heartOnClick.png';
-import React, { useState } from 'react';
+import React from 'react';
 import { ButtonWithImage } from '../ButtonWithImage';
 import { ButtonSize } from '../../../utils/types/ButtonSize';
+import { useAppSelector } from '../../../app/reduxHooks';
 
 type Props = {
   size: ButtonSize;
+  productId: string;
   onClick: () => void;
 };
 
-export const FavoriteButton: React.FC<Props> = ({ size, onClick }) => {
-  const isDefaultSelected = false;
-  const [isSelected, setIsSelected] = useState(isDefaultSelected);
+export const FavoriteButton: React.FC<Props> = ({
+  size,
+  productId,
+  onClick,
+}) => {
+  const { favoriteItems } = useAppSelector(state => state.favorites);
+  const isSelected = favoriteItems.some(favItem => favItem.id === productId);
 
   return (
     <ButtonWithImage
       onClick={() => {
         onClick();
-        setIsSelected(!isSelected);
       }}
       size={size}
       path={isSelected ? heartSelected : heart}

src/components/Header/Header.module.scss

@@ -38,6 +38,7 @@
       background-repeat: no-repeat;
       background-position: center;
       margin: 16px;
+      position: relative;
 
       @include onTablet {
         margin: 16px;
@@ -206,3 +207,39 @@
     }
   }
 }
+
+.favorites-count {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #4219d0;
+  width: 13px;
+  height: 13px;
+  border-radius: 48px;
+
+  &__meaning {
+    font-size: 9px;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  &-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: -6px;
+    right: -7px;
+    width: 15px;
+    height: 15px;
+    border-radius: 48px;
+    position: absolute;
+    background-color: #fff;
+    overflow: hidden;
+    transform: scale(0);
+    transition: transform 0.1s ease-in-out;
+
+    &--visible {
+      transform: scale(1);
+    }
+  }
+}

src/components/Header/Header.tsx

@@ -4,13 +4,17 @@ import styles from './Header.module.scss';
 import logo from '../../img/Logo.png';
 import { NavLink } from 'react-router-dom';
 import classNames from 'classnames';
+import { useAppSelector } from '../../app/reduxHooks';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const Header: React.FC<Props> = () => {
   const [isMobileScreen, setIsMobileScreen] = useState(window.innerWidth < 640);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { favCount } = useAppSelector(state => state.favorites);
+
+  console.log(favCount);
 
   useEffect(() => {
     const handleMenuOnResize = () => {
@@ -62,7 +66,25 @@ export const Header: React.FC<Props> = () => {
                   })
                 }
               >
-                <div className={styles['header__icons--like']}></div>
+                <div className={styles['header__icons--like']}>
+                  {
+                    <div
+                      className={classNames(
+                        styles['favorites-count-container'],
+                        {
+                          [styles['favorites-count-container--visible']]:
+                            favCount > 0,
+                        },
+                      )}
+                    >
+                      <div className={styles['favorites-count']}>
+                        <p className={styles['favorites-count__meaning']}>
+                          {favCount}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
               </NavLink>
               <NavLink
                 to="/cart"

src/components/ProductActions/ProductActions.tsx

@@ -32,7 +32,11 @@ export const ProductActions: React.FC<Props> = ({
   return (
     <div className={styles['product-actions-block']}>
       <MainButton label="Add to cart" size={size} onClick={handleAddToCart} />
-      <FavoriteButton size={size} onClick={handleAddToFavorites} />
+      <FavoriteButton
+        size={size}
+        onClick={handleAddToFavorites}
+        productId={item!.id}
+      />
     </div>
   );
 };