fixed favorites api

2025-12-09 14:59:20 +05:00
parent 2857d34f4d
commit d6c163dd06
21 changed files with 467 additions and 147 deletions
--- a/features/home/components/Carousel.tsx
+++ b/features/home/components/Carousel.tsx
@@ -21,7 +21,7 @@ export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
      >
        {items.map((item, i) => (
          <SwiperSlide key={i}>
-            <div className="relative w-full h-[200px] sm:h-[300px] md:h-[420px]">
+            <div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
              <Image 
                src={item.image} 
                alt={item.title} 
--- a/features/home/components/HomePage.tsx
+++ b/features/home/components/HomePage.tsx
@@ -5,8 +5,12 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import HeroCarousel from "./Carousel";
 import CategoryGrid from "./CategoryGrid";
 import CollectionSection from "./ProductGrid";
-import { useCategories, useCarousels, useCollections } from "@/lib/hooks";
-
+import {
+  useCategories,
+  useCarousels,
+  useCollections,
+  useFavorites,
+} from "@/lib/hooks";

 export default function HomePage() {
  const locale = useLocale();
@@ -19,15 +23,18 @@ export default function HomePage() {
    isLoading: categoriesLoading,
    isError: categoriesError,
  } = useCategories();
-  
+
  const { data: carousels, isLoading: carouselsLoading } = useCarousels();
-  
+
  const {
    data: collections,
    isLoading: collectionsLoading,
    isError: collectionsError,
  } = useCollections();

+  // CRITICAL: Prefetch favorites on mount to avoid loading states
+  const { isLoading: favoritesLoading } = useFavorites();
+
  useEffect(() => setMounted(true), []);

  const loadMore = () => {
@@ -48,8 +55,12 @@ export default function HomePage() {
  const visibleCollections = collections?.slice(0, visibleCount) || [];
  const hasMore = collections ? visibleCount < collections.length : false;

+  // Show loading indicator while favorites are being fetched
+  const showFavoritesLoading =
+    favoritesLoading && !categoriesLoading && !collectionsLoading;
+
  return (
-    <div className="px-2 md:px-4 lg:px-4 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
+    <div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
      {!carouselsLoading && carouselItems.length > 0 && (
        <HeroCarousel items={carouselItems} />
      )}
@@ -62,6 +73,13 @@ export default function HomePage() {
        title={t("categories")}
      />

+      {showFavoritesLoading && (
+        <div className="text-center py-4">
+          <div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-solid border-blue-600 border-r-transparent"></div>
+          <p className="text-gray-500 text-sm mt-2">Loading favorites...</p>
+        </div>
+      )}
+
      {collectionsError ? (
        <section className="bg-white rounded-2xl shadow-sm p-6">
          <p className="text-red-600">
@@ -115,4 +133,4 @@ export default function HomePage() {
      )}
    </div>
  );
-}
+}
--- a/features/home/components/ProductCard.tsx
+++ b/features/home/components/ProductCard.tsx
@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/carousel";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";

 type ProductCardProps = {
  id: number;
@@ -22,12 +23,10 @@ type ProductCardProps = {
  discount?: number | null;
  discount_text?: string | null;
  images: string[];
-  is_favorite: boolean;
  labels?: { text: string; bg_color: string }[];
  price_color?: string;
  height?: number;
  width?: number;
-  button?: boolean;
 };

 export default function ProductCard({
@@ -38,32 +37,29 @@ export default function ProductCard({
  discount,
  discount_text,
  images,
-  is_favorite,
  labels = [],
  price_color = "#005bff",
  height = 360,
  width = 280,
-  button = true,
 }: ProductCardProps) {
-  const [favorite, setFavorite] = useState(is_favorite);
+  const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
+  const { mutate: toggleFavorite, isPending } = useToggleFavorite();
+
  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
  const autoplayRef = useRef<NodeJS.Timeout | null>(null);

  const hasMultipleImages = images.length > 1;

-  // Track carousel current slide
  useEffect(() => {
    if (!api) return;

    setCurrent(api.selectedScrollSnap());
-
    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
    });
  }, [api]);

-  // Auto-play functionality - 3 seconds
  useEffect(() => {
    if (!api || !hasMultipleImages) return;

@@ -85,28 +81,34 @@ export default function ProductCard({
    };

    startAutoplay();
-
    return () => stopAutoplay();
  }, [api, hasMultipleImages]);

-  const handleFavorite = async (e: MouseEvent<HTMLButtonElement>) => {
+  const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();

-    const newFavoriteState = !favorite;
-    setFavorite(newFavoriteState);
-
-    if (newFavoriteState) {
-      toast.success("Товар добавлен в избранное");
-    } else {
-      toast.success("Товар удален из избранного");
-    }
+    toggleFavorite(
+      { productId: id, isFavorite },
+      {
+        onSuccess: (data) => {
+          toast.success(
+            data.wasAdded
+              ? "Товар добавлен в избранное"
+              : "Товар удален из избранного"
+          );
+        },
+        onError: () => {
+          toast.error("Ошибка. Попробуйте снова");
+        },
+      }
+    );
  };

  const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
    const target = e.target as HTMLElement;
    if (
-      target.closest('button') ||
+      target.closest("button") ||
      target.closest('[data-carousel-control="true"]')
    ) {
      e.preventDefault();
@@ -122,20 +124,19 @@ export default function ProductCard({
  return (
    <a
      href={`/product/${id}`}
-      className="no-underline block"
+      className="no-underline flex justify-center"
      onClick={handleCardClick}
    >
      <Card
-        className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl hover:shadow-md transition-all cursor-pointer"
+        className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl cursor-pointer"
        style={{ height, maxWidth: width }}
      >
-        {/* Image Section with Carousel */}
        <div className="relative w-full h-[260px] group">
          <Carousel
            opts={{
              align: "start",
              loop: true,
-              watchDrag: false, // Disable drag/swipe on desktop
+              watchDrag: false,
            }}
            setApi={setApi}
            className="w-full h-full"
@@ -143,7 +144,7 @@ export default function ProductCard({
            <CarouselContent className="h-[260px] ml-0">
              {images.map((image, index) => (
                <CarouselItem key={index} className="h-[260px] pl-0">
-                  <div className="h-full flex items-center justify-center p-2">
+                  <div className="h-full flex items-center justify-center">
                    <img
                      src={image}
                      alt={`${name} - ${index + 1}`}
@@ -155,7 +156,6 @@ export default function ProductCard({
              ))}
            </CarouselContent>

-            {/* Navigation Arrows - Only show if multiple images */}
            {hasMultipleImages && (
              <>
                <CarouselPrevious
@@ -172,19 +172,21 @@ export default function ProductCard({
            )}
          </Carousel>

-          {/* Favorite Button */}
+          {/* Favorite button - show skeleton while loading favorites */}
          <button
            onClick={handleFavorite}
-            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all"
+            disabled={isPending || isFavoriteLoading}
+            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
          >
-            {favorite ? (
+            {isFavoriteLoading ? (
+              <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+            ) : isFavorite ? (
              <Heart className="w-5 h-5 text-red-500 fill-red-500" />
            ) : (
              <Heart className="w-5 h-5 text-gray-700" />
            )}
          </button>

-          {/* Image Indicators */}
          {hasMultipleImages && (
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
              {images.map((_, index) => (
@@ -200,7 +202,6 @@ export default function ProductCard({
            </div>
          )}

-          {/* Labels */}
          {labels?.length > 0 && (
            <div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
              {labels.map((label, idx) => (
@@ -216,17 +217,18 @@ export default function ProductCard({
          )}
        </div>

-        {/* Content */}
        <CardContent className="p-0 space-y-1">
          <p
-            className="text-sm font-semibold mx-2"
+            className="text-sm mx-2 font-medium"
            style={{ color: price_color }}
          >
            {struct_price_text}
          </p>
-          <p className="text-gray-800 text-sm truncate mx-2">{name}</p>
+          <p className="text-black text-sm font-semibold leading-normal truncate mx-2">
+            {name}
+          </p>
        </CardContent>
      </Card>
    </a>
  );
-}
+}
--- a/features/home/components/ProductGrid.tsx
+++ b/features/home/components/ProductGrid.tsx
@@ -60,7 +60,7 @@ export default function CollectionSection({ collection, locale }: Props) {
  const displayProducts = productsData?.data.slice(0, 10) || [];

  return (
-    <section className="bg-white rounded-2xl shadow-sm ">
+    <section className="bg-white rounded-2xl shadow-sm p-6">
      <div
        className="flex items-center justify-between mb-4 cursor-pointer group"
        onClick={handleTitleClick}
@@ -73,14 +73,15 @@ export default function CollectionSection({ collection, locale }: Props) {

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
        {displayProducts.map((product) => {
-          // 🔥 TÜM RESİMLERİ AL - Burada değişiklik!
-          const allImages = product.media?.map(
-            (media) =>
-              media.images_800x800 ||
-              media.images_720x720 ||
-              media.images_400x400 ||
-              media.thumbnail
-          ).filter(Boolean) || ["/placeholder-product.jpg"];
+          const allImages = product.media
+            ?.map(
+              (media) =>
+                media.images_800x800 ||
+                media.images_720x720 ||
+                media.images_400x400 ||
+                media.thumbnail
+            )
+            .filter(Boolean) || ["/placeholder-product.jpg"];

          const formattedPrice = product.price_amount
            ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
@@ -95,17 +96,15 @@ export default function CollectionSection({ collection, locale }: Props) {
                product.price_amount ? parseFloat(product.price_amount) : null
              }
              struct_price_text={formattedPrice}
-              images={allImages} // 🔥 Array olarak tüm resimler
-              is_favorite={false}
+              images={allImages}
              labels={[]}
-              price_color="#111"
+              price_color="#0059ff"
              height={360}
              width={250}
-              button={false}
            />
          );
        })}
      </div>
    </section>
  );
-}
+}