x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,5 +1,4 @@
 import ProductCard from './ProductCard';
-import ProductSwatchCard from './ProductSwatchCard';
 import { useRef } from 'react';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

apps/spa/src/components/ProductCard.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { Product, Variant, TranslatableString } from '../types';
 import { getCategoryImage, formatPrice } from '../types';
 import { Heart, ShoppingBag, Layers } from 'lucide-react';
@@ -53,7 +53,7 @@ export default function ProductCard({
   const { addToCart } = useCartStore();
   const { i18n, t } = useTranslation();
   const isWished = isInWishlist(product.id);
-  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null);
+  const selectedVariant = product.variants?.[0] || null;
 
   // Extract unique color swatches from variants
   const colorSwatches = useMemo(() => {

apps/spa/src/components/ProductSwatchCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import type { Product, Variant, TranslatableString } from '../types';
 import { formatPrice } from '../types';
@@ -36,9 +36,9 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
   }, [product.variants]);
 
   // Active selected variant
-  const [activeVariant, setActiveVariant] = useState<Variant | null>(() => {
+  const activeVariant = useMemo<Variant | null>(() => {
     return colorSwatches[0]?.variant || product.variants?.[0] || null;
-  });
+  }, [colorSwatches, product.variants]);
 
   // Display Image: variant image if available, else first product image
   const displayImageUrl = useMemo(() => {

apps/website/src/components/ProductCard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useMemo } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import { ShoppingBag, Layers } from 'lucide-react'
@@ -22,7 +22,7 @@ interface ProductCardProps {
 export default function ProductCard({ product, cardStyle = 'standard', badgeText }: ProductCardProps) {
   const lang = useLang()
   const { addToCart } = useCartStore()
-  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null)
+  const selectedVariant = product.variants?.[0] || null
 
   // Extract unique color swatches from variants
   const colorSwatches = useMemo(() => {

apps/website/src/components/ProductSwatchCard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useMemo } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import type { Product, Variant } from '@homaroma/types'
@@ -35,10 +35,10 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
     return swatches
   }, [product.variants])
 
-  // Active selected variant (for image and price swap when clicking swatch)
+  // Active selected variant
-  const [activeVariant, setActiveVariant] = useState<Variant | null>(() => {
+  const activeVariant = useMemo<Variant | null>(() => {
     return colorSwatches[0]?.variant || product.variants?.[0] || null
-  })
+  }, [colorSwatches, product.variants])
 
   // Display Image: variant image if available, else first product image
   const displayImageUrl = useMemo(() => {