connected to backend

2026-02-04 10:01:25 +05:00
parent 1d0698573f
commit e7b838e3fe
21 changed files with 571 additions and 395 deletions
--- a/components/pageParts/products/products.tsx
+++ b/components/pageParts/products/products.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Title from "../../lib_components/title";
+import Text from "../../lib_components/text";
+import type { ProductTypes } from "@/types";
+import { allProducts } from "@/data";
+import ProductCard from "../../cards/productCard";
+import { LoadingSkeleton } from "@/components/loadingProduct";
+import { EmptyState } from "@/components/emptyState";
+import { usePathname } from "next/navigation";
+import { baseUrl } from "@/data/url";
+
+export default function Products() {
+  const [cars, setCars] = useState<ProductTypes[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const pathname = usePathname();
+  const lang = pathname.split("/")[1];
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(baseUrl, {
+          headers: {
+            "Accept-Language": lang,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error("Server xatosi");
+        }
+
+        const data = await response.json();
+        console.log("backend Data: ", data?.data);
+
+        if (data?.data && data.data.length > 0) {
+          setCars(data.data);
+        } else {
+          setCars([]);
+        }
+      } catch (error) {
+        console.log("Xatolik: ", error);
+        setError(error instanceof Error ? error.message : "Noma'lum xatolik");
+        // Xatolik bo'lsa ham local data'ni ko'rsatish
+        setCars(allProducts);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProducts();
+  }, [lang]); // Bo'sh array - faqat bitta marta ishlaydi
+
+  return (
+    <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
+      {/* title part */}
+      <div className="flex flex-col mb-10">
+        <div className="flex items-center justify-center w-full">
+          <div className="text-[#f2a01c] px-2 text-[18px] font-semibold">
+            <Text txt="katalog" />
+          </div>
+        </div>
+        <Title text="pricing-h2" />
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-600 text-center">
+            <Text txt="downloadError" /> : {error}
+          </p>
+        </div>
+      )}
+
+      {/* products */}
+      <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
+        {loading ? (
+          <LoadingSkeleton />
+        ) : cars.length > 0 ? (
+          cars.map((item: ProductTypes, index: number) => (
+            <div key={item.id || index}>
+              <ProductCard data={item} />
+            </div>
+          ))
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+    </div>
+  );
+}