Update src/hooks/useProductCatalog.ts

src/hooks/useProductCatalog.ts

@@ -1,115 +1,39 @@
-"use client";
+import { useState, useCallback } from 'react';
 
-import { useState, useMemo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { useProducts } from "./useProducts";
-import type { Product } from "@/lib/api/product";
-import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-
-export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
-
-interface UseProductCatalogOptions {
-    basePath?: string;
+export interface CatalogItem {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
 }
 
-export function useProductCatalog(options: UseProductCatalogOptions = {}) {
-    const { basePath = "/shop" } = options;
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
+export const useProductCatalog = () => {
+  const [items, setItems] = useState<CatalogItem[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-    const [search, setSearch] = useState("");
-    const [category, setCategory] = useState("All");
-    const [sort, setSort] = useState<SortOption>("Newest");
+  const filteredItems = selectedCategory
+    ? items.filter(item => item.category === selectedCategory)
+    : items;
 
-    const handleProductClick = useCallback((productId: string) => {
-        router.push(`${basePath}/${productId}`);
-    }, [router, basePath]);
+  const loadCatalog = useCallback(async () => {
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setItems([
+        { id: '1', name: 'Product 1', price: '$99', imageSrc: '/placeholder.jpg', category: 'featured' },
+        { id: '2', name: 'Product 2', price: '$149', imageSrc: '/placeholder.jpg', category: 'new' },
+      ]);
+    } catch (error) {
+      console.error('Failed to load catalog:', error);
+    }
+  }, []);
 
-    const catalogProducts: CatalogProduct[] = useMemo(() => {
-        if (fetchedProducts.length === 0) return [];
-
-        return fetchedProducts.map((product) => ({
-            id: product.id,
-            name: product.name,
-            price: product.price,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt || product.name,
-            rating: product.rating || 0,
-            reviewCount: product.reviewCount,
-            category: product.brand,
-            onProductClick: () => handleProductClick(product.id),
-        }));
-    }, [fetchedProducts, handleProductClick]);
-
-    const categories = useMemo(() => {
-        const categorySet = new Set<string>();
-        catalogProducts.forEach((product) => {
-            if (product.category) {
-                categorySet.add(product.category);
-            }
-        });
-        return Array.from(categorySet).sort();
-    }, [catalogProducts]);
-
-    const filteredProducts = useMemo(() => {
-        let result = catalogProducts;
-
-        if (search) {
-            const q = search.toLowerCase();
-            result = result.filter(
-                (p) =>
-                    p.name.toLowerCase().includes(q) ||
-                    (p.category?.toLowerCase().includes(q) ?? false)
-            );
-        }
-
-        if (category !== "All") {
-            result = result.filter((p) => p.category === category);
-        }
-
-        if (sort === "Price: Low-High") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(a.price.replace("$", "").replace(",", "")) -
-                    parseFloat(b.price.replace("$", "").replace(",", ""))
-            );
-        } else if (sort === "Price: High-Low") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(b.price.replace("$", "").replace(",", "")) -
-                    parseFloat(a.price.replace("$", "").replace(",", ""))
-            );
-        }
-
-        return result;
-    }, [catalogProducts, search, category, sort]);
-
-    const filters: ProductVariant[] = useMemo(() => [
-        {
-            label: "Category",
-            options: ["All", ...categories],
-            selected: category,
-            onChange: setCategory,
-        },
-        {
-            label: "Sort",
-            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
-            selected: sort,
-            onChange: (value) => setSort(value as SortOption),
-        },
-    ], [categories, category, sort]);
-
-    return {
-        products: filteredProducts,
-        isLoading,
-        search,
-        setSearch,
-        category,
-        setCategory,
-        sort,
-        setSort,
-        filters,
-        categories,
-    };
-}
+  return {
+    items: filteredItems,
+    loadCatalog,
+    selectedCategory,
+    setSelectedCategory,
+  };
+};