91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
/**
|
|
* @page Products Catalog Router Shell (`app/products/page.tsx`)
|
|
* @purpose Evaluates whether the selected category has `is_parent_feature = True`.
|
|
* If enabled, renders <ParentFeatureCatalog category={category} /> (Brand -> Series -> Model hierarchical mode).
|
|
* Otherwise, renders <StandardCatalog /> (Standard sidebar filter mode).
|
|
*/
|
|
'use client';
|
|
|
|
import { useState, useEffect, Suspense } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { catalogService, CategoryResponse } from '@/services/api/catalogService';
|
|
import { ParentFeatureCatalog } from '@/components/catalog/ParentFeatureCatalog';
|
|
import { StandardCatalog } from '@/components/catalog/StandardCatalog';
|
|
|
|
function CatalogPageContent() {
|
|
const searchParams = useSearchParams();
|
|
const categoryParam = searchParams.get('category');
|
|
const brandParam = searchParams.get('brand');
|
|
const searchQuery = searchParams.get('search');
|
|
|
|
const [categories, setCategories] = useState<CategoryResponse[]>([]);
|
|
const [activeCategory, setActiveCategory] = useState<CategoryResponse | null>(null);
|
|
const [isLoadingCategory, setIsLoadingCategory] = useState<boolean>(true);
|
|
|
|
// Fetch Categories and evaluate parent feature flag
|
|
useEffect(() => {
|
|
setIsLoadingCategory(true);
|
|
catalogService
|
|
.getCategories()
|
|
.then((catData) => {
|
|
setCategories(catData);
|
|
if (categoryParam) {
|
|
const found = catData.find(
|
|
(c) =>
|
|
c.category_id === categoryParam ||
|
|
c.slug.toLowerCase() === categoryParam.toLowerCase()
|
|
);
|
|
setActiveCategory(found || null);
|
|
} else {
|
|
setActiveCategory(null);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setCategories([]);
|
|
setActiveCategory(null);
|
|
})
|
|
.finally(() => {
|
|
setIsLoadingCategory(false);
|
|
});
|
|
}, [categoryParam]);
|
|
|
|
if (isLoadingCategory) {
|
|
return (
|
|
<div className="w-full bg-[#f8f9fa] min-h-screen py-12 font-sans flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="w-8 h-8 border-3 border-red-600 border-t-transparent rounded-full animate-spin" />
|
|
<p className="text-xs font-semibold text-gray-500">Loading catalog...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// If a category is selected AND has is_parent_feature enabled -> Render ParentFeatureCatalog
|
|
if (activeCategory && activeCategory.is_parent_feature) {
|
|
return <ParentFeatureCatalog category={activeCategory} />;
|
|
}
|
|
|
|
// Otherwise -> Render StandardCatalog
|
|
return (
|
|
<StandardCatalog
|
|
initialCategory={activeCategory}
|
|
categoryParam={categoryParam}
|
|
brandParam={brandParam}
|
|
searchQuery={searchQuery}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function ProductsPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="w-full bg-[#f8f9fa] min-h-screen py-12 font-sans flex items-center justify-center">
|
|
<div className="w-8 h-8 border-3 border-red-600 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
}
|
|
>
|
|
<CatalogPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|