slider, capsity colors fixed

mate-academy · Oct 17, 2024 · 74c0233 · 74c0233
1 parent 6a30195
commit 74c0233
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 10 deletions.
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -18,10 +18,33 @@ export const Filter: React.FC<Props> = React.memo(({ product, products }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const path = pathname.split('-');
+
+  let path = pathname.split('-');
 
   const replaceColor = (newColor: string) => {
-    path[path.length - 1] = newColor;
+    if (
+      path.some(item => {
+        switch (item) {
+          case 'space':
+            return true;
+
+          case 'rose':
+            return true;
+
+          case 'sky':
+            return true;
+
+          default:
+            return false;
+        }
+      })
+    ) {
+      path = path.slice(0, -2);
+      path.push(newColor);
+    } else {
+      path = path.slice(0, -1);
+      path.push(newColor.replace(' ', '-'));
+    }
 
     const newPath = path.join('-');
 

diff --git a/src/components/FilterCapacity/FilterCapacity.tsx b/src/components/FilterCapacity/FilterCapacity.tsx
@@ -21,7 +21,38 @@ export const FilterCapacity: React.FC<Props> = React.memo(({ product }) => {
   const replaceCapacity = (newCapacity: string) => {
     const path = pathname.split('-');
 
-    path[path.length - 2] = newCapacity.toLowerCase();
+    if (
+      path.some(item => {
+        switch (item) {
+          case '38mm':
+            return true;
+
+          case '40mm':
+            return true;
+
+          case '42mm':
+            return true;
+
+          case '44mm':
+            return true;
+
+          default:
+            return false;
+        }
+      })
+    ) {
+      const indexCapacity = path.findIndex(
+        item =>
+          item.includes('38mm') ||
+          item.includes('42mm') ||
+          item.includes('40mm') ||
+          item.includes('44mm'),
+      );
+
+      path[indexCapacity] = newCapacity.toLowerCase();
+    } else {
+      path[path.length - 2] = newCapacity.toLowerCase();
+    }
 
     const newPath = path.join('-');
 

diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
@@ -56,12 +56,7 @@ export const ProductCard: React.FC<Props> = React.memo(
             className="productCard__link"
           >
             {slash ? (
-              <img
-                src={`/${image}`}
-                // src={image}
-                alt={name}
-                className="productCard__link_img"
-              />
+              <img src={image} alt={name} className="productCard__link_img" />
             ) : (
               <img src={image} alt={name} className="productCard__link_img" />
             )}

diff --git a/src/constants/Colors.ts b/src/constants/Colors.ts
@@ -3,6 +3,7 @@ import { ColorPalette } from '../types/ColorPalet';
 export const Colors: ColorPalette = {
   'space gray': '#6E6E73',
   spacegray: '#6E6E73',
+  'space-gray': '#6E6E73',
   silver: '#C0C0C0',
   gold: '#D4AF37',
   blue: '#0071E3',

diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
@@ -32,7 +32,7 @@ export const CartPage: React.FC = () => {
 
   useEffect(() => {
     window.scrollTo({ top: 0 });
-  }, []);
+  }, [productsOfCart]);
 
   return (
     <section className="cart">