fix: update minor style improvements, fetching data, add update fields

Alexandrbig1 · Alexandrbig1 · commit 9420883b6d82 · 2025-10-31T23:07:20.000-05:00
diff --git a/src/api/productService.js b/src/api/productService.js
@@ -5,46 +5,65 @@ import axiosInstance from './axiosInstance.js';
  * @param {Object} apiProduct - The product object from the API.
  * @returns {Object} Transformed product object.
  */
-const transformProduct = (apiProduct) => {
-  const originalPrice = apiProduct.sale > 0
-    ? Number((apiProduct.price / (1 - apiProduct.sale / 100)).toFixed(2))
-    : null;
+const transformProduct = (apiProduct = {}) => {
+  if (!apiProduct || typeof apiProduct !== 'object') return null;
+
+  const price = Number(apiProduct.price ?? 0);
+  const sale = Number(apiProduct.sale ?? 0);
+  const originalPrice = sale > 0 ? Number((price / (1 - sale / 100)).toFixed(2)) : null;
 
   return {
-    id: apiProduct._id,
-    name: apiProduct.name,
-    description: apiProduct.description || apiProduct.shortDescription,
-    price: apiProduct.price,
-    originalPrice: originalPrice,
-    category: apiProduct.category,
-    imageUrl: apiProduct.image,
-    rating: apiProduct.rating,
-    reviewCount: apiProduct.reviewsCount,
-    stock: 15, // Consider fetching stock from the API if available
-    isNew: apiProduct.new,
-    onSale: apiProduct.sale > 0,
-    flavors: apiProduct.flavors || [],
-    features: apiProduct.quality || [],
-    goals: apiProduct.goals || [],
-    sizes: apiProduct.sizes || [],
-    salePercentage: apiProduct.sale,
-    longDescription: apiProduct.longDescription,
-    usageTips: apiProduct.usageTips || []
+    id: apiProduct._id ?? apiProduct.id ?? null,
+    name: apiProduct.name ?? apiProduct.title ?? 'Unnamed Product',
+    description: apiProduct.description ?? apiProduct.shortDescription ?? '',
+    shortDescription: apiProduct.shortDescription ?? apiProduct.description ?? '',
+    longDescription: apiProduct.longDescription ?? '',
+    price,
+    originalPrice,
+    category: apiProduct.category ?? null,
+    imageUrl: apiProduct.image ?? apiProduct.imageUrl ?? '/images/product-default-image.jpg',
+    imageGallery: Array.isArray(apiProduct.images) ? apiProduct.images : Array.isArray(apiProduct.gallery) ? apiProduct.gallery : [],
+    rating: Number(apiProduct.rating ?? 0),
+    reviewCount: Number(apiProduct.reviewsCount ?? apiProduct.reviewCount ?? 0),
+    stock: Number(apiProduct.stock ?? apiProduct.inventory ?? 0),
+    isNew: Boolean(apiProduct.new),
+    onSale: sale > 0,
+    salePercentage: sale,
+    flavors: Array.isArray(apiProduct.flavors) ? apiProduct.flavors : [],
+    sizes: Array.isArray(apiProduct.sizes) ? apiProduct.sizes : [],
+    quality: Array.isArray(apiProduct.quality) ? apiProduct.quality : [],
+    goals: Array.isArray(apiProduct.goals) ? apiProduct.goals : [],
+    collections: Array.isArray(apiProduct.collections) ? apiProduct.collections : [],
+    usageTips: typeof apiProduct.usageTips === 'object' ? apiProduct.usageTips : {},
+    createdAt: apiProduct.createdAt ? new Date(apiProduct.createdAt).toISOString() : null,
+    updatedAt: apiProduct.updatedAt ? new Date(apiProduct.updatedAt).toISOString() : null,
+    raw: apiProduct, // keep original object for debugging if needed
   };
 };
 
 /**
  * Transforms the API response containing multiple products.
+ * Accepts several shapes returned by different backends.
  * @param {Object} apiResponse - The response object from the API.
  * @returns {Object} Transformed response object.
  */
-const transformApiResponse = (apiResponse) => {
+const transformApiResponse = (apiResponse = {}) => {
+  // apiResponse may be { products: [...], total, page, pages } or { data: { products: [...] } }
+  const payload = apiResponse.products ?? apiResponse.data?.products ?? apiResponse.data ?? apiResponse;
+  const productsArray = Array.isArray(payload) ? payload : Array.isArray(payload.products) ? payload.products : [];
+
+  const mapped = productsArray.map(transformProduct).filter(Boolean);
+
+  const total = Number(apiResponse.total ?? apiResponse.data?.total ?? payload.total ?? mapped.length);
+  const page = Number(apiResponse.page ?? apiResponse.data?.page ?? payload.page ?? 1);
+  const pages = Number(apiResponse.pages ?? apiResponse.data?.pages ?? payload.pages ?? 1);
+
   return {
-    products: apiResponse.products.map(transformProduct),
-    totalCount: apiResponse.total,
-    currentPage: apiResponse.page,
-    hasNextPage: apiResponse.page < apiResponse.pages,
-    totalPages: apiResponse.pages
+    products: mapped,
+    totalCount: total,
+    currentPage: page,
+    hasNextPage: page < pages,
+    totalPages: pages,
   };
 };
 
@@ -73,20 +92,39 @@ export const getProducts = async (params = {}) => {
 
     const data = response.data;
 
+    // support multiple payload shapes
+    if (Array.isArray(data)) {
+      return {
+        success: true,
+        data: {
+          products: data.map(transformProduct).filter(Boolean),
+          total: data.length,
+          page: 1,
+          pages: 1,
+        },
+        status: response.status,
+      };
+    }
+
+    // If API returns wrapper like { products: [...], total, page, pages }
+    if (data.products || data.data?.products) {
+      return {
+        success: true,
+        data: transformApiResponse(data),
+        status: response.status,
+      };
+    }
+
+    // If API returns nested data or other shapes, attempt to transform generically
     return {
       success: true,
-      data: Array.isArray(data) ? {
-        products: data,
-        total: data.length,
-        page: 1,
-        pages: 1,
-      } : transformApiResponse(data),
+      data: transformApiResponse(data),
       status: response.status,
     };
   } catch (error) {
     return {
       success: false,
-      error: error.response?.data?.message || 'Failed to fetch products',
+      error: error.response?.data?.message || error.message || 'Failed to fetch products',
       status: error.response?.status || 500,
     };
   }
@@ -104,16 +142,20 @@ export const getProductById = async (id) => {
     }
 
     const response = await axiosInstance.get(`/products/${id}`);
+    const data = response.data;
+
+    // Accept shapes: { ...product }, { product: {...} }, { data: { product: {...} } }
+    const productPayload = data.product ?? data.data?.product ?? data.data ?? data;
 
     return {
       success: true,
-      data: transformProduct(response.data),
+      data: transformProduct(productPayload),
       status: response.status,
     };
   } catch (error) {
     return {
       success: false,
-      error: error.response?.data?.message || 'Failed to fetch product',
+      error: error.response?.data?.message || error.message || 'Failed to fetch product',
       status: error.response?.status || 500,
     };
   }
@@ -134,15 +176,30 @@ export const searchProducts = async (query, params = {}) => {
       },
     });
 
+    const data = response.data;
+
+    if (Array.isArray(data)) {
+      return {
+        success: true,
+        data: {
+          products: data.map(transformProduct).filter(Boolean),
+          total: data.length,
+          page: 1,
+          pages: 1,
+        },
+        status: response.status,
+      };
+    }
+
     return {
       success: true,
-      data: response.data,
+      data: transformApiResponse(data),
       status: response.status,
     };
   } catch (error) {
     return {
       success: false,
-      error: error.response?.data?.message || 'Failed to search products',
+      error: error.response?.data?.message || error.message || 'Failed to search products',
       status: error.response?.status || 500,
     };
   }
@@ -164,7 +221,7 @@ export const getProductCategories = async () => {
   } catch (error) {
     return {
       success: false,
-      error: error.response?.data?.message || 'Failed to fetch categories',
+      error: error.response?.data?.message || error.message || 'Failed to fetch categories',
       status: error.response?.status || 500,
     };
   }
@@ -182,19 +239,25 @@ export const getRecommendedProducts = async (id, limit = 3) => {
       throw new Error('Product ID is required');
     }
 
-    // const response = await axiosInstance.get(`/products/recommended/${id}?limit=${limit}`);
     const response = await axiosInstance.get(`/products/${id}/recommended?limit=${limit}`);
+    const data = response.data;
 
+    // data may be { products: [...] } or an array
+    const productsArray = Array.isArray(data)
+      ? data
+      : Array.isArray(data.products)
+      ? data.products
+      : data.data?.products ?? [];
 
     return {
       success: true,
-      data: response.data.products.map(transformProduct),
+      data: productsArray.map(transformProduct).filter(Boolean),
       status: response.status,
     };
   } catch (error) {
     return {
       success: false,
-      error: error.response?.data?.message || 'Failed to fetch recommended products',
+      error: error.response?.data?.message || error.message || 'Failed to fetch recommended products',
       status: error.response?.status || 500,
     };
   }
diff --git a/src/components/ProductDetails.jsx b/src/components/ProductDetails.jsx
@@ -33,6 +33,8 @@ export default function ProductDetails({ product }) {
   // Defensive normalization
   const qualities = Array.isArray(product?.quality) ? product.quality : [];
 
+  console.log(qualities);
+
   const usage = product?.usageTips || {
     when: 'Best used post-workout for muscle recovery or anytime during the day to support lean muscle growth.',
     blend:
diff --git a/src/components/RecentlyViewed.jsx b/src/components/RecentlyViewed.jsx
@@ -71,11 +71,9 @@ export default function RecentlyViewed({ saleOnly = false }) {
     <section className="max-w-6xl mx-auto px-3 sm:px-6 lg:px-8 py-8">
       {/* Header section with title and navigation arrows */}
       <div className="flex items-center justify-between mb-6 flex-col sm:flex-row gap-4 sm:gap-0">
-        <h2 className="section-title text-center w-full sm:w-auto mb-0">
+        <h2 className="section-title text-[32px] lg:text-[48px]">
           <span className="text-[#000]">RECENTLY </span>
-          <span className="stroke-title" style={{ color: '#f7faff' }}>
-            VIEWED
-          </span>
+          <span className="text-[#f7faff] stroke-title">VIEWED</span>
         </h2>
 
         {/* Navigation Buttons */}
diff --git a/src/index.css b/src/index.css
@@ -44,6 +44,7 @@
    COMPONENTS
 ========================== */
 @layer components {
+
   /* Section Title */
   .section-title {
     @apply text-4xl lg:text-heading-xxl font-montserrat font-bold leading-none uppercase text-center tracking-tight;
@@ -247,6 +248,7 @@
    ACCESSIBILITY
 ========================== */
 @media (prefers-reduced-motion: reduce) {
+
   .link-underline::after,
   .link-underline-inverse::after,
   .animate-double-pop,
@@ -280,4 +282,5 @@ body {
   height: 100%;
   background-color: var(--color-white-back);
   color: var(--color-black);
-}
+  overflow-x: hidden;
+}
diff --git a/src/pages/Products/HighlyRecommended/HighlyRecommended.jsx b/src/pages/Products/HighlyRecommended/HighlyRecommended.jsx
@@ -90,18 +90,18 @@ function HighlyRecommended() {
   return (
     <>
       {recommendedProducts?.length > 0 && (
-        <section className="max-w-6xl mx-auto px-3 sm:px-6 lg:px-8 py-8">
+        <section className="max-w-6xl mx-auto px-3 sm:px-6 lg:px-8 py-8 flex flex-col gap-6">
           {/* Header section with title and navigation arrows */}
-          <div className="flex items-center justify-between mb-6 flex-col sm:flex-row gap-4 sm:gap-0">
-            <h2 className="section-title text-center w-full sm:w-auto mb-0">
+          <div className="flex items-center justify-between  flex-col sm:flex-row gap-4 sm:gap-0">
+            <h2 className="section-title text-left md:text-center w-full sm:w-auto mb-0">
               <span className="text-[#000]">HIGHLY </span>
               <span className="stroke-title" style={{ color: '#f7faff' }}>
                 RECOMMENDED
               </span>
             </h2>
 
             {/* Navigation Buttons */}
-            <div className="flex items-center gap-3">
+            <div className="hidden sm:flex items-center gap-3">
               <button
                 onClick={prevSlide}
                 disabled={!canGoPrev}
diff --git a/src/pages/Products/ProductPage.jsx b/src/pages/Products/ProductPage.jsx
@@ -30,6 +30,8 @@ export default function ProductPage() {
     };
   }, [dispatch, id]);
 
+  // console.log(currentProduct);
+
   // Normalize possible payload wrapper
   const product = currentProduct?.product || currentProduct;
 
@@ -64,7 +66,7 @@ export default function ProductPage() {
   if (product)
     return (
       <main className="max-w-6xl mx-auto p-6">
-        <section className="flex flex-row w-full mt-4 max-w-[70vw] gap-8">
+        <section className="flex flex-col md:flex-row w-full md:align-center mt-4 md:max-w-[70vw] gap-8">
           {/* Left side section */}
           <div className="Left-side flex-4 images-section">
             {/* Hero Image section */}
@@ -106,7 +108,7 @@ export default function ProductPage() {
               </button>
             </div>
             {/* Additional image section */}
-            <section className="additional-images-grid grid grid-cols-4 gap-4 px-4 mt-4">
+            <div className="additional-images-grid grid grid-cols-4 gap-4 px-4 mt-4">
               <img
                 className="w-full h-auto object-cover rounded-lg cursor-pointer"
                 src="/images/products/nova-whey-vanilla-protein.jpg"
@@ -127,7 +129,7 @@ export default function ProductPage() {
                 src="/images/products/nova-whey-vanilla-protein.jpg"
                 alt={product.name}
               />
-            </section>
+            </div>
           </div>
           {/* Right Side Section */}
           <div className="right-side flex-5 product-detail-section flex-col flex gap-3">
@@ -141,15 +143,15 @@ export default function ProductPage() {
             <h1 className="text-4xl font-bold mb-2">{product.name}</h1>
             <p className="text-gray-700">{product.longDescription}</p>
             {/* Flavour and size selection */}
-            <section className="flavours-size-section flex flex-col gap-4 ">
+            <div className="flavours-size-section flex flex-col gap-4 ">
               {/* flavour selection */}
-              <div className="flavours-selection items-center justify-start flex flex-row gap-4 ">
-                <h3 className="text-gray-800 font-semibold ">Flavors :</h3>
-                <div className="flavours-selection flex flex-row gap-4 ">
+              <div className="flavours-selection md:items-center justify-start flex flex-row gap-4 ">
+                <h3 className="text-gray-800 font-semibold ">Flavors:</h3>
+                <div className="flavours-selection flex flex-row  gap-4 flex-wrap md:flex-nowrap">
                   {product.flavors.map((flavor) => (
                     <div
                       key={flavor}
-                      className="flavor-option border border-gray-300 px-4 py-2 rounded-md cursor-pointer hover:bg-gray-100"
+                      className="flavor-option border border-gray-300 px-4 py-2 rounded-md cursor-pointer hover:bg-gray-100 "
                     >
                       {flavor}
                     </div>
@@ -168,8 +170,8 @@ export default function ProductPage() {
                   </div>
                 ))}
               </div>
-            </section>
-            <section className="actions-section flex flex-col gap-4 mt-4">
+            </div>
+            <div className="actions-section flex flex-col gap-4 mt-4">
               <div className="product-count flex flex-row items-center gap-2">
                 {/* <button className="cursor-pointer text-gray-600 px-3 py-3 rounded-md hover:bg-gray-50 transition">
                   -
@@ -200,8 +202,8 @@ export default function ProductPage() {
               >
                 {isInWishlist ? 'Remove from Wishlist' : 'Add to Wishlist'}
               </button>
-            </section>
-            <section className="shipping-info flex-col gap-2 text-sm text-gray-600 mt-4">
+            </div>
+            <div className="shipping-info flex-col gap-2 text-sm text-gray-600 mt-4">
               <h4 className="font-semibold text-xs text-gray-800">
                 Secure checkout. Satisfaction guaranteed.
               </h4>
@@ -215,7 +217,7 @@ export default function ProductPage() {
                   Delivery in 1-3 Days on average.
                 </div>
               </div>
-            </section>
+            </div>
           </div>
         </section>
         {/* Additional Product Information */}
diff --git a/src/store/productSlice.js b/src/store/productSlice.js
