Feat : Add Collection Page #118

src/api/collectionService.js

@@ -0,0 +1,11 @@
+import axiosInstance from './axiosInstance';
+
+/**
+ * Fetch collection by ID with its products
+ * @param {string} collectionId - The collection identifier (e.g., 'weight-management')
+ * @returns {Promise} Collection data with products array
+ */
+export const getCollectionById = async (collectionId) => {
+  const response = await axiosInstance.get(`/collections/${collectionId}`);
+  return response.data;
+};

src/api/index.js

@@ -18,5 +18,8 @@ export {
   clearCart,
 } from './cartService.js';
 
+export { getCollectionById } from './collectionService.js';
+
 export * from './productService.js';
 export * from './cartService.js';
+export * from './collectionService.js';

src/components/CollectionSection.jsx

@@ -6,7 +6,7 @@ import weightManagementImg from '/images/weight-management.png';
 import healthWellnessImg from '/images/health-wellness.png';
 import './collection.css';
 
-const collections = [
+export const collections = [
   { id: 'pre-workout', title: 'PRE-WORKOUT', image: preWorkoutImg },
   { id: 'build-muscle', title: 'BUILD MUSCLE', image: buildMuscleImg },
   {
@@ -55,8 +55,8 @@ const CollectionSection = () => {
     };
   }, []);
 
-  const handleCardClick = () => {
-    navigate('/collections');
+  const handleCardClick = (collection) => {
+    navigate(`/collections/${collection.id}`);
   };
 
   return (
@@ -73,7 +73,7 @@ const CollectionSection = () => {
             key={collection.id}
             ref={(el) => (cardsRef.current[index] = el)}
             className="collection-card"
-            onClick={handleCardClick}
+            onClick={() => handleCardClick(collection)}
           >
             <div className="collection-image-wrapper">
               <img

src/components/Products/ProductCard.jsx

@@ -66,7 +66,11 @@ const ProductCard = forwardRef(
       } catch {
         // ignore errors (localStorage not available)
       }
-      navigate(`/products/${product.id}`);
+
+      const productId = product.id || product._id;
+      if (productId) {
+        navigate(`/products/${encodeURIComponent(productId)}`);
+      }
     };
 
     const formatPrice = (price) => {

src/components/SupplementForGoalsSection.jsx

@@ -9,21 +9,34 @@ import {
 import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import './SupplementForGoalsSection.css';
 
-const goalCards = [
+export const goalCards = [
   {
     label: 'protein powder',
+    id: 'protein-powder',
     image: proteinPowder,
     href: '/collections/protein-powder',
   },
-  { label: 'pre-workout', image: preWorkout, href: '/collections/pre-workout' },
+  {
+    label: 'pre-workout',
+    id: 'pre-workout',
+    image: preWorkout,
+    href: '/collections/pre-workout',
+  },
   {
     label: 'intra-workout',
+    id: 'intra-workout',
     image: intraWorkout,
     href: '/collections/intra-workout',
   },
-  { label: 'amino acids', image: aminoAcids, href: '/collections/amino-acids' },
+  {
+    label: 'amino acids',
+    id: 'amino-acids',
+    image: aminoAcids,
+    href: '/collections/amino-acids',
+  },
   {
     label: 'weight management',
+    id: 'weight-management',
     image: weightManagement,
     href: '/collections/weight-management',
   },