api ulandi

src/features/favourite/ui/Favourite.tsx

@@ -1,96 +1,41 @@
 'use client';
 
+import { product_api } from '@/shared/config/api/product/api';
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { Button } from '@/shared/ui/button';
+import { Card } from '@/shared/ui/card';
+import { Skeleton } from '@/shared/ui/skeleton';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
+import { useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { Heart } from 'lucide-react';
-import { useState } from 'react';
-
-// Fake data
-const LIKED_PRODUCTS = [
-  {
-    id: 1,
-    name: 'Samsung Galaxy S23 Ultra 256GB, Phantom Black',
-    price: 12500000,
-    oldPrice: 15000000,
-    image: '/samsung-galaxy-s24-smartphone.jpg',
-    rating: 4.8,
-    reviews: 342,
-    discount: 17,
-    inStock: true,
-    liked: true,
-  },
-  {
-    id: 2,
-    name: 'Apple Ipad Pro Tablet',
-    price: 2850000,
-    oldPrice: 3200000,
-    image: '/apple-ipad-pro-tablet.jpg',
-    rating: 4.9,
-    reviews: 567,
-    discount: 11,
-    liked: true,
-    inStock: true,
-  },
-  {
-    id: 3,
-    name: 'Apple Watch Series 9',
-    price: 7500000,
-    oldPrice: 8500000,
-    image: '/apple-watch-series-9-smartwatch.jpg',
-    rating: 4.7,
-    reviews: 234,
-    discount: 12,
-    inStock: true,
-    liked: true,
-  },
-  {
-    id: 4,
-    name: 'MacBook Air 13 M2 chip, 8GB RAM, 256GB SSD',
-    price: 14200000,
-    oldPrice: 16000000,
-    image: '/apple-macbook-pro-laptop.jpg',
-    rating: 4.9,
-    reviews: 891,
-    liked: true,
-    discount: 11,
-    inStock: true,
-  },
-  {
-    id: 5,
-    name: 'Dyson V15 Detect Simsiz Changyutgich',
-    price: 6800000,
-    oldPrice: 7800000,
-    image: '/dyson-v15-detect-vacuum-cleaner.jpg',
-    rating: 4.6,
-    reviews: 178,
-    discount: 13,
-    liked: true,
-    inStock: false,
-  },
-  {
-    id: 6,
-    name: 'Coca-Cola',
-    price: 1250000,
-    oldPrice: 1650000,
-    image: '/classic-coca-cola.png',
-    rating: 4.5,
-    liked: true,
-    reviews: 423,
-    discount: 24,
-    inStock: true,
-  },
-];
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
 
 export default function Favourite() {
-  const [likedProducts, setLikedProducts] = useState(LIKED_PRODUCTS);
   const router = useRouter();
+  const t = useTranslations();
+  const {
+    data: favourite,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['favourite_product'],
+    queryFn: () => product_api.favouuriteProduct(),
+    select(data) {
+      return data.data;
+    },
+  });
 
-  const handleRemove = (id: number) => {
-    setLikedProducts((prev) => prev.filter((product) => product.id !== id));
-  };
+  useEffect(() => {
+    if ((error as AxiosError)?.status === 403) {
+      router.replace('/auth');
+    } else if ((error as AxiosError)?.status === 401) {
+      router.replace('/auth');
+    }
+  }, [error]);
 
-  if (likedProducts.length === 0) {
+  if (favourite && favourite.results.length === 0) {
     return (
       <div className="min-h-screen py-12">
         <div className="container mx-auto px-4">
@@ -99,18 +44,16 @@ export default function Favourite() {
               <Heart className="w-16 h-16 text-slate-300" />
             </div>
             <h2 className="text-2xl font-bold text-slate-800 mb-2">
-              {"Sevimlilar bo'sh"}
+              {t("Sevimlilar bo'sh")}
             </h2>
             <p className="text-slate-500 text-center max-w-md mb-8">
-              {`Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz.
-              Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni
-              saqlang.`}
+              {t(`Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz`)}
             </p>
             <Button
               className="bg-blue-600 text-white px-8 py-3 rounded-xl hover:bg-blue-700"
               onClick={() => router.push('/')}
             >
-              Xarid qilishni boshlash
+              {t('Xarid qilishni boshlash')}
             </Button>
           </div>
         </div>
@@ -118,26 +61,59 @@ export default function Favourite() {
     );
   }
 
+  if (isLoading) {
+    return (
+      <div className="custom-container">
+        <div className="mb-8">
+          <Skeleton className="h-8 w-64 mb-2" />
+          <Skeleton className="h-4 w-32" />
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="rounded-xl border p-3 space-y-3">
+              <Skeleton className="h-40 w-full rounded-lg" />
+              <Skeleton className="h-4 w-[80%]" />
+              <Skeleton className="h-4 w-[60%]" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="custom-container">
       <>
         <div className="mb-8">
           <div>
             <h1 className="text-3xl font-bold text-slate-800 mb-2">
-              Sevimli mahsulotlar
+              {t('Sevimli mahsulotlar')}
             </h1>
-            <p className="text-slate-500">{likedProducts.length} ta mahsulot</p>
+            <p className="text-slate-500">
+              {favourite && favourite.total} {t('ta mahsulot')}
+            </p>
           </div>
         </div>
 
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-30">
-          {likedProducts.map((product) => (
-            <ProductCard
-              key={product.id}
-              product={product}
-              handleRemove={handleRemove}
-            />
-          ))}
+          {isLoading &&
+            Array.from({ length: 6 }).map((_, index) => (
+              <Card className="p-3 space-y-3 rounded-xl" key={index}>
+                <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/2" />
+                <Skeleton className="h-10 w-full rounded-lg" />
+              </Card>
+            ))}
+          {favourite &&
+            !isLoading &&
+            favourite?.results
+              .filter((product) => product.is_active)
+              .map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
         </div>
       </>
     </div>