fix: update best of core x component

Author: Alexandrbig1

src/components/BestOfCorex.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useProductCarousel } from '../hooks/useProductCarousel';
 import ProductSkeleton from './Products/ProductSkeleton';
@@ -7,25 +7,40 @@ import { useBestOfCoreX } from '../hooks/useBestOfCoreX';
 
 const BestOfCoreX = () => {
   const {
-    collections,
+    collections = [],
     activeTab,
     setActiveTab,
     products,
     loading,
-    error,
-    allCollectionsData
+    allCollectionsData,
   } = useBestOfCoreX();
 
   // Use the custom hook to manage all carousel state and logic
   const { scrollContainerRef, currentPage, productPages, scroll, showArrows } =
     useProductCarousel({ products, productsPerPage: 6 });
 
+  // memoize tab names for stability
+  const tabNames = useMemo(
+    () => (collections || []).map(([name]) => name),
+    [collections]
+  );
+
+  const handleSetActive = useCallback(
+    (name) => {
+      if (typeof setActiveTab === 'function') setActiveTab(name);
+    },
+    [setActiveTab]
+  );
+
   return (
-    <section className="px-4 sm:px-8 py-12 font-sans">
+    <section
+      className="px-4 sm:px-8 py-12 font-sans"
+      aria-labelledby="best-of-corex-heading"
+    >
       <div className="container mx-auto">
         <div className="flex justify-center items-center gap-4">
           <h2
-            id="why-choose"
+            id="best-of-corex-heading"
             className="text-4xl lg:text-heading-xxl font-montserrat text-black leading-none uppercase py-16 section-title"
           >
             <span className="text-[#000]">BEST </span>
@@ -37,35 +52,50 @@ const BestOfCoreX = () => {
         </div>
 
         {/* Tab Navigation & Carousel Arrows */}
-        <div className="flex justify-center items-center flex-wrap gap-4 mb-8">
+        <div
+          className="flex justify-center items-center flex-wrap gap-4 mb-8"
+          role="tablist"
+          aria-label="Collections"
+        >
           {/* Tab Buttons */}
-          {collections.map(([name]) => (
-            <button
-              key={name}
-              onClick={() => setActiveTab(name)}
-              className={`px-4 py-2 text-sm font-semibold rounded-full transition-colors ${
-                activeTab === name
-                  ? 'bg-black text-white'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-              }`}
-            >
-              {name}
-            </button>
-          ))}
+          {tabNames.length > 0 ? (
+            tabNames.map((name) => (
+              <button
+                key={name}
+                role="tab"
+                aria-selected={activeTab === name}
+                aria-current={activeTab === name ? 'true' : undefined}
+                onClick={() => handleSetActive(name)}
+                className={`px-4 py-2 text-sm font-semibold rounded-full transition-colors ${
+                  activeTab === name
+                    ? 'bg-black text-white'
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                }`}
+              >
+                {name}
+              </button>
+            ))
+          ) : (
+            <div className="text-sm text-gray-500">
+              No collections available
+            </div>
+          )}
 
           {/* Carousel Arrows */}
-          {showArrows && !loading && (
-            <div className="flex items-center gap-2">
+          {showArrows && !loading && productPages.length > 0 && (
+            <div className="flex items-center gap-2" aria-hidden={loading}>
               <button
                 onClick={() => scroll(-1)}
                 disabled={currentPage === 0}
+                aria-label="Previous page"
                 className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition disabled:opacity-50 disabled:hover:cursor-not-allowed"
               >
                 <ChevronLeft className="h-5 w-5" />
               </button>
               <button
                 onClick={() => scroll(1)}
                 disabled={currentPage >= productPages.length - 1}
+                aria-label="Next page"
                 className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition disabled:opacity-50 disabled:hover:cursor-not-allowed"
               >
                 <ChevronRight className="h-5 w-5" />
@@ -83,13 +113,21 @@ const BestOfCoreX = () => {
           </div>
         )}
 
-
         {/* Product Carousel */}
-        {!loading && allCollectionsData && (
+        {!loading &&
+        allCollectionsData &&
+        productPages &&
+        productPages.length > 0 ? (
           <ProductCarousel
             productPages={productPages}
             scrollContainerRef={scrollContainerRef}
           />
+        ) : (
+          !loading && (
+            <div className="text-center py-8 text-gray-500">
+              No products to display
+            </div>
+          )
         )}
       </div>
     </section>

src/components/Products/ProductGrid.jsx

@@ -1,6 +1,6 @@
 import ProductCard from './ProductCard';
 
-export default function ProductGrid({ products, lastProductElementRef, }) {
+export default function ProductGrid({ products, lastProductElementRef }) {
   if (!products || products.length === 0) {
     return null;
   }

src/pages/Products/Products.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchProducts } from '../../store/productSlice';
 import SEO from '../../components/SEO';
@@ -18,11 +18,13 @@ export default function Products() {
   const observer = useRef();
 
   const [displayedCount, setDisplayedCount] = useState(12);
-  
+
   // Get max price from products
   const maxProductPrice = useMemo(() => {
     if (!allProducts || allProducts.length === 0) return 100;
-    const prices = allProducts.map(p => Number(p.price || 0)).filter(p => !isNaN(p) && p > 0);
+    const prices = allProducts
+      .map((p) => Number(p.price || 0))
+      .filter((p) => !isNaN(p) && p > 0);
     return Math.ceil(Math.max(...prices)) || 100;
   }, [allProducts]);
 
@@ -45,9 +47,8 @@ export default function Products() {
     return allProducts.filter((p) => {
       const price = Number(p.price || 0);
       if (Number.isNaN(price)) return false;
-      
-      if (price < minPrice || price > maxPrice) return false;
 
+      if (price < minPrice || price > maxPrice) return false;
 
       if (filters.garageSaleOnly) {
         // consider sale fields: sale > 0 or onSale flag
@@ -102,10 +103,12 @@ export default function Products() {
         keywords="sports nutrition, supplements, protein powder, pre-workout, fitness products, CoreX Nutrition"
       />
 
-      <main className={`min-h-screen bg-[#F7FAFF] ${isFilterOpen ? 'relative' : ''}`}>
+      <main
+        className={`min-h-screen bg-[#F7FAFF] ${isFilterOpen ? 'relative' : ''}`}
+      >
         {/* Filter Panel Backdrop - covers entire viewport including header */}
         {isFilterOpen && (
-          <div 
+          <div
             className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
             style={{ zIndex: 9998 }}
             onClick={() => setIsFilterOpen(false)}
@@ -130,7 +133,10 @@ export default function Products() {
         <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
             {/* Left: All Filters button (full width on mobile) */}
-            <button onClick={() => setIsFilterOpen(true)} className="w-full sm:w-auto flex items-center justify-center gap-2 bg-transparent text-gray-700 px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-medium border border-gray-300 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50 transition-all duration-300 cursor-pointer">
+            <button
+              onClick={() => setIsFilterOpen(true)}
+              className="w-full sm:w-auto flex items-center justify-center gap-2 bg-transparent text-gray-700 px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-medium border border-gray-300 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50 transition-all duration-300 cursor-pointer"
+            >
               <span className="hidden sm:inline">All Filters</span>
               <span className="sm:hidden">Filters</span>
               <svg
@@ -162,15 +168,22 @@ export default function Products() {
                   // Supported backend keys: feature (default), a-z, z-a, price_asc, price_desc, rating_asc, rating_desc
                   let sortKey = 'feature';
                   if (field === 'title' && order === 'asc') sortKey = 'a-z';
-                  else if (field === 'title' && order === 'desc') sortKey = 'z-a';
-                  else if (field === 'price' && order === 'asc') sortKey = 'price_asc';
-                  else if (field === 'price' && order === 'desc') sortKey = 'price_desc';
-                  else if (field === 'rating' && order === 'asc') sortKey = 'rating_asc';
-                  else if (field === 'rating' && order === 'desc') sortKey = 'rating_desc';
+                  else if (field === 'title' && order === 'desc')
+                    sortKey = 'z-a';
+                  else if (field === 'price' && order === 'asc')
+                    sortKey = 'price_asc';
+                  else if (field === 'price' && order === 'desc')
+                    sortKey = 'price_desc';
+                  else if (field === 'rating' && order === 'asc')
+                    sortKey = 'rating_asc';
+                  else if (field === 'rating' && order === 'desc')
+                    sortKey = 'rating_desc';
                   else sortKey = 'feature';
 
                   // Fetch products from backend with sort
-                  dispatch(fetchProducts({ page: 1, limit: 1000, sort: sortKey }));
+                  dispatch(
+                    fetchProducts({ page: 1, limit: 1000, sort: sortKey })
+                  );
                 }}
               />
             </div>
@@ -223,9 +236,7 @@ export default function Products() {
                   />
                   {hasMoreProducts && (
                     <div className="flex justify-center mt-8">
-                      <div className="text-gray-500">
-                        Loading more...
-                      </div>
+                      <div className="text-gray-500">Loading more...</div>
                     </div>
                   )}
                 </>