Merge pull request #63 from fs-mar24-codemafia/develop

Develop
fs-mar24-codemafia · Jun 16, 2024 · 31f6596 · 31f6596
2 parents ad1b516 + 7278903
commit 31f6596
Show file tree

Hide file tree

Showing 27 changed files with 381 additions and 193 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "react-swipeable": "^7.0.1",
     "react-toggle-dark-mode": "^1.1.1",
     "react-transition-group": "^4.4.5",
     "typescript": "^4.9.5"

diff --git a/public/icons/svg/down-dark.svg b/public/icons/svg/down-dark.svg
diff --git a/public/icons/svg/view-grid.svg b/public/icons/svg/view-grid.svg
diff --git a/public/icons/svg/view-list.svg b/public/icons/svg/view-list.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import './App.scss';
 // import { Header } from './components/Header';
 import { NotFoundPage } from './pages/NotFoundPage';
 import { HomePage } from './pages/HomePage';
-import { ProductsPage } from './pages/ProductsPage/ProductsPage';
+import { ProductsPage } from './pages/ProductsPage';
 import { CartPage } from './pages/CartPage';
 import { ItemPage } from './pages/ItemPage';
 import { FavPage } from './pages/FavPage';

diff --git a/src/components/AddToFavButton/AddToFavButton.scss b/src/components/AddToFavButton/AddToFavButton.scss
@@ -1,18 +1,25 @@
 @import '../../styles/utils/mixins';
 
-.iconFavour {
+.add-to-fav {
   height: 40px;
   width: 40px;
-  border: 1px solid var(--color-icons);
+  border: 1px solid var(--add-to-fav-borger);
   display: flex;
   justify-content: center;
+  background: transparent;
+  background-color: var(--add-to-fav-bg);
   align-items: center;
   cursor: pointer;
 
-  @include hover(border-color, var(--color-primary));
+  @include hover(border-color, var(--add-to-fav-borger-hover));
+  @include hover(background-color, var(--add-to-fav-bg-hover));
 
   &--added {
+    background-color: transparent;
     border: 1px solid var(--color-elements);
-    filter: var(--icon-filter); //new
   }
 }
+
+.icon-fav--added{
+  filter: var(--icon-filter);
+}
diff --git a/src/components/AddToFavButton/AddToFavButton.tsx b/src/components/AddToFavButton/AddToFavButton.tsx
@@ -27,12 +27,14 @@ export const AddToFavButton: React.FC<Props> = ({ product }) => {
   };
 
   return (
-    <div
-      className={cn('iconFavour', { 'iconFavour--added': isProductAdded })}
+    <button
+      className={cn('add-to-fav', { 'add-to-fav--added': isProductAdded })}
       title="Add to favourites"
       onClick={handleClick}
     >
-      <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
-    </div>
+      <div className={cn('icon-fav', { 'icon-fav--added': isProductAdded })}>
+        <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
+      </div>
+    </button>
   );
 };
diff --git a/src/components/BreadCrumbs/BreadCrumbs.tsx b/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -8,7 +8,7 @@ export const BreadCrumbs: React.FC = () => {
 
   return (
     <div className="bread-crumbs">
-      <Link to="/">
+      <Link to="/" title='Return to the Homepage'>
         <i className="ico ico-home" />
       </Link>
       {pathnames.map((value, index) => {

diff --git a/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx b/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx
@@ -22,7 +22,7 @@ export const DesktopHeader: FC = () => {
 
   return (
     <header className="header">
-      <NavLink to="/" className="header__logo-link">
+      <NavLink to="/" className="header__logo-link" title='Go to Home page'>
         <img
           src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'}
           alt="Nice Gadgets logo"
@@ -33,7 +33,7 @@ export const DesktopHeader: FC = () => {
       <nav className="nav">
         <ul className="nav__list">
           {links.map(link => (
-            <li className="nav__item" key={link.link}>
+            <li className="nav__item" key={link.title}>
               <NavLink to={link.link} className="nav__link">
                 {link.title}
               </NavLink>
@@ -42,15 +42,15 @@ export const DesktopHeader: FC = () => {
         </ul>
 
         <div className="nav__buttons">
-          <div className="theme-button">
+          <div className="theme-button" title='Switch theme'>
             <DarkModeSwitch
               checked={theme === 'dark'}
               onChange={toggleTheme}
               size={23}
             />
           </div>
 
-          <NavLink to="/favourites" className="nav__button">
+          <NavLink to="/favourites" className="nav__button" title='Go to favourites'>
             <div className="ico ico-fav icon">
               {!!favorites.length && (
                 <div className="indicator indicator-fav">
@@ -60,7 +60,7 @@ export const DesktopHeader: FC = () => {
             </div>
           </NavLink>
 
-          <NavLink to="/cart" className="nav__button">
+          <NavLink to="/cart" className="nav__button" title='Go to cart'>
             <div className="ico ico-cart icon">
               {!!cartItems.length && (
                 <div className="indicator indicator-cart">

diff --git a/src/components/NewHeader/MobileHeader/MobileHeader.tsx b/src/components/NewHeader/MobileHeader/MobileHeader.tsx
@@ -27,25 +27,21 @@ export const MobileHeader: FC = () => {
   return (
     <>
       <header className="header">
-        <NavLink to="/" className="header__logo-link">
-          <img
-            src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'}
-            alt="Nice Gadgets logo"
-            className="logo"
-          />
+        <NavLink to="/" className="header__logo-link" onClick={handleMenuClose} title='Go to Home page'>
+          <img src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'} alt="Nice Gadgets logo" className="logo" />
         </NavLink>
 
         <div className="header__buttons">
-          <div className="theme-button">
+          <div className="theme-button" title='Switch theme'>
             <DarkModeSwitch
               checked={theme === 'dark'}
               onChange={toggleTheme}
               size={23}
             />
           </div>
 
-          <button className="menu-button" onClick={toggleMenuOpen}>
-            <div className={`ico ${isMenuOpen ? 'ico-close' : 'ico-menu'}`} />
+          <button className="menu-button" onClick={toggleMenuOpen} title={isMenuOpen ? 'Close menu' : 'Open menu'}>
+            <div className={`ico ${isMenuOpen ? 'ico-close-dark' : 'ico-menu'}`} />
           </button>
         </div>
       </header>
@@ -54,7 +50,7 @@ export const MobileHeader: FC = () => {
         <nav className="nav">
           <ul className="nav__list">
             {links.map(link => (
-              <li className="nav__item" key={link.link}>
+              <li className="nav__item" key={link.title}>
                 <NavLink
                   to={link.link}
                   className="nav__link"

diff --git a/src/components/NewHeader/NewHeader.scss b/src/components/NewHeader/NewHeader.scss
@@ -78,7 +78,6 @@ $button-size-tablet: 48px;
   left: 0;
   right: 0;
   height: 100vh;
-  // width: 100vw;
   background-color: var(--page-bg-color);
   transform: translateX(100%);
   transition: all $effect-duration;
@@ -197,7 +196,7 @@ $button-size-tablet: 48px;
   width: 12px;
   border-radius: 50%;
   background-color: var(--color-red);
-  filter: var(--icon-filter); //new
+  filter: var(--icon-filter);
 
   position: absolute;
   bottom: 8px;

diff --git a/src/components/OldHeader/Header.scss b/src/components/OldHeader/Header.scss
@@ -185,7 +185,7 @@
   width: 12px;
   border-radius: 50%;
   background-color: var(--color-red);
-  filter: var(--icon-filter); //new
+  filter: var(--icon-filter);
 
   position: absolute;
   bottom: 8px;

diff --git a/src/components/ProductDetails/ProductDetails.scss b/src/components/ProductDetails/ProductDetails.scss
@@ -12,10 +12,9 @@
 }
 
 .boxed-images {
-  flex-grow: 1;
   grid-column: span 12;
   display: flex;
-  align-items: center;
+  gap: 16px;
 
   @include on-tablet {
     grid-column: span 7;
@@ -24,18 +23,17 @@
   @include on-mobile {
     grid-column: span 4;
     flex-direction: column-reverse;
+    align-items: center;
   }
 
   &__small-container {
     display: flex;
     flex-direction: column;
     gap: 16px;
     width: min-content;
-    margin-right: 16px;
 
     @include on-mobile {
       flex-direction: row;
-      margin-right: 0;
       gap: 8px;
     }
   }
@@ -59,13 +57,19 @@
       height: 50px;
       width: 50px;
     }
+
+    &--active {
+      border: 1px solid var(--color-primary);
+    }
   }
 
   &__big-container {
     width: 100%;
     height: 464px;
     display: flex;
     justify-content: center;
+    overflow: hidden;
+
 
     @include on-tablet {
       width: 100%;
@@ -79,6 +83,12 @@
   }
 
   &__big-image {
+    -webkit-user-drag: none;
+    width: 100%;
+    object-fit: contain;
+    transition: transform 0.5s ease;
+    cursor: pointer;
+
     @include on-mobile {
       max-height: 240px;
     }
@@ -323,3 +333,11 @@
     margin-bottom: 56px;
   }
 }
+
+.swipe-left .boxed-images__big-image {
+  transform: translateX(-100%);
+}
+
+.swipe-right .boxed-images__big-image {
+  transform: translateX(100%);
+}
diff --git a/src/components/ProductDetails/ProductDetails.tsx b/src/components/ProductDetails/ProductDetails.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
+import { useSwipeable } from 'react-swipeable';
 
 import { ProductDetailed } from '../../types/ProductDetailed';
 import { Product } from '../../types/Product';
@@ -37,6 +38,34 @@ export const ProductDetails: React.FC<Props> = ({
     updateStorage,
   } = useItem(productDetailed);
 
+  const [swipeEffect, setSwipeEffect] = useState('');
+
+  const handleSwipeLeft = () => {
+    setSwipeEffect('swipe-left');
+    setTimeout(() => {
+      const currentIndex = images.indexOf(bigImage || '');
+      const nextIndex = (currentIndex + 1) % images.length;
+      setBigImage(images[nextIndex]);
+      setSwipeEffect('');
+    }, 500);
+  };
+
+  const handleSwipeRight = () => {
+    setSwipeEffect('swipe-right');
+    setTimeout(() => {
+      const currentIndex = images.indexOf(bigImage || '');
+      const prevIndex = (currentIndex - 1 + images.length) % images.length;
+      setBigImage(images[prevIndex]);
+      setSwipeEffect('');
+    }, 500);
+  };
+
+  const handlers = useSwipeable({
+    onSwipedLeft: handleSwipeLeft,
+    onSwipedRight: handleSwipeRight,
+    trackMouse: true,
+  });
+
   return (
     <>
       <h2 className="item-title">{name}</h2>
@@ -45,14 +74,19 @@ export const ProductDetails: React.FC<Props> = ({
           {images.map(image => (
             <img
               key={image}
-              className="boxed-images__small-image"
+              className={cn('boxed-images__small-image', {
+                'boxed-images__small-image--active': image === bigImage,
+              })}
               src={image}
               alt={image}
               onClick={() => setBigImage(image)}
             />
           ))}
         </div>
-        <div className="boxed-images__big-container">
+        <div
+          className={`boxed-images__big-container ${swipeEffect}`}
+          {...handlers}
+        >
           <img className="boxed-images__big-image" src={bigImage} alt="" />
         </div>
       </section>