get all product

src/shared/config/api/URLs.ts

@@ -7,6 +7,7 @@ export const API_URLS = {
   Banner: `${API_V}shared/banner/list/`,
   Category: `${API_V}products/category/list/`,
   Product: `${API_V}products/product/`,
+  ProductList: `${API_V}products/all/`,
   Login: `${API_V}accounts/login/`,
   Search_Product: `${API_V}products/search/`,
   Favourite: (product_id: string) => `${API_V}accounts/${product_id}/like/`,

src/widgets/categories/ui/category-carousel.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { ProductTypes } from '@/shared/config/api/category/type';
-import { product_api } from '@/shared/config/api/product/api';
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
@@ -12,7 +10,7 @@ import {
   type CarouselApi,
 } from '@/shared/ui/carousel';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
-import { useQuery } from '@tanstack/react-query';
+import { ProductRes } from '@/widgets/welcome/lib/api';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 
@@ -20,11 +18,13 @@ import { memo, useEffect, useRef, useState } from 'react';
 /// CategoryCarousel optimized
 //////////////////////////
 interface CategoryCarouselProps {
-  category: ProductTypes;
+  category: ProductRes;
+  isLoading: boolean;
 }
 
 const CategoryCarousel = memo(function CategoryCarousel({
   category,
+  isLoading,
 }: CategoryCarouselProps) {
   const router = useRouter();
   const [api, setApi] = useState<CarouselApi>();
@@ -72,19 +72,6 @@ const CategoryCarousel = memo(function CategoryCarousel({
   const scrollPrev = () => api?.scrollPrev();
   const scrollNext = () => api?.scrollNext();
 
-  // React Query
-  const { data: product, isLoading } = useQuery({
-    queryKey: ['product_list', category.id],
-    queryFn: () =>
-      product_api.list({
-        page: 1,
-        page_size: 16,
-        category_id: category.id,
-      }),
-    select: (data) => data.data,
-    enabled: isVisible,
-  });
-
   // Shartli renderlar
   if (!isVisible) {
     return (
@@ -95,13 +82,12 @@ const CategoryCarousel = memo(function CategoryCarousel({
     );
   }
 
-  if (!isLoading && (!product || product.results.length === 0)) return null;
+  if (!isLoading && !category) return null;
 
-  const activeProducts = product?.results.filter((p) => p.state === 'A') ?? [];
+  const activeProducts =
+    category?.products.filter((p) => p.state === 'A') ?? [];
   if (!isLoading && activeProducts.length === 0) return null;
 
-  if (isLoading) return null;
-
   return (
     <section
       ref={sectionRef}

src/widgets/welcome/lib/api.ts

@@ -1,4 +1,5 @@
 import httpClient from '@/shared/config/api/httpClient';
+import { ProductListResult } from '@/shared/config/api/product/type';
 import { API_URLS } from '@/shared/config/api/URLs';
 import { AxiosResponse } from 'axios';
 import { BannerRes } from './type';
@@ -26,6 +27,12 @@ export interface UserRes {
   username: string;
 }
 
+export interface ProductRes {
+  id: number;
+  name: string;
+  products: ProductListResult[];
+}
+
 export const banner_api = {
   async getBanner(): Promise<AxiosResponse<BannerRes[]>> {
     const res = await httpClient.get(API_URLS.Banner);
@@ -35,4 +42,9 @@ export const banner_api = {
     const res = await httpClient.get(API_URLS.Get_Me);
     return res;
   },
+
+  async getAllProducts(): Promise<AxiosResponse<ProductRes[]>> {
+    const res = await httpClient.get(API_URLS.ProductList);
+    return res;
+  },
 };

src/widgets/welcome/ui/index.tsx

@@ -80,6 +80,14 @@ const Welcome = () => {
     },
   });
 
+  const { data: allProducts, isLoading: allProductsLoading } = useQuery({
+    queryKey: ['all_products'],
+    queryFn: () => banner_api.getAllProducts(),
+    select(data) {
+      return data.data;
+    },
+  });
+
   const scrollPrev = () => {
     if (api?.canScrollPrev()) {
       api?.scrollPrev();
@@ -272,8 +280,14 @@ const Welcome = () => {
         </Button>
       </section>
 
-      {category &&
-        category.map((e) => <CategoryCarousel category={e} key={e.id} />)}
+      {allProducts &&
+        allProducts.map((e) => (
+          <CategoryCarousel
+            category={e}
+            key={e.id}
+            isLoading={allProductsLoading}
+          />
+        ))}
     </>
   );
 };