BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix1607

Browse Source
This commit is contained in:
egortriston
2025-07-16 14:28:47 +03:00
parent 3e98f8fed6
commit 2703137ca1
7 changed files with 368 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/index/CategoryNavSection.tsx
View File

@ -3,138 +3,69 @@ import { useQuery } from '@apollo/client';
import { GET_PARTSINDEX_CATEGORIES } from '@/lib/graphql';
import { useRouter } from 'next/router';
interface PartsIndexCatalog {
interface CategoryNavItem {
id: string;
name: string;
image?: string;
groups?: PartsIndexGroup[];
}
interface PartsIndexGroup {
id: string;
name: string;
image?: string;
subgroups?: PartsIndexSubgroup[];
entityNames?: { id: string; name: string }[];
}
interface PartsIndexSubgroup {
id: string;
name: string;
image?: string;
entityNames?: { id: string; name: string }[];
}
const FALLBACK_CATEGORIES: CategoryNavItem[] = [
{ id: '1', name: 'Детали для ТО', image: '/images/catalog_item.png' },
{ id: '2', name: 'Шины', image: '/images/catalog_item2.png' },
{ id: '3', name: 'Диски', image: '/images/catalog_item3.png' },
{ id: '4', name: 'Масла и жидкости', image: '/images/catalog_item4.png' },
{ id: '5', name: 'Инструменты', image: '/images/catalog_item5.png' },
{ id: '6', name: 'Автохимия', image: '/images/catalog_item6.png' },
{ id: '7', name: 'Аксессуары', image: '/images/catalog_item7.png' },
{ id: '8', name: 'Электрика', image: '/images/catalog_item8.png' },
{ id: '9', name: 'АКБ', image: '/images/catalog_item9.png' },
];
const CategoryNavSection: React.FC = () => {
const router = useRouter();
const { data, loading, error } = useQuery<{ partsIndexCategoriesWithGroups: PartsIndexCatalog[] }>(
const { data } = useQuery<{ partsIndexCategoriesWithGroups: CategoryNavItem[] }>(
GET_PARTSINDEX_CATEGORIES,
{
variables: {
lang: 'ru'
},
variables: { lang: 'ru' },
errorPolicy: 'all',
fetchPolicy: 'cache-first'
fetchPolicy: 'cache-first',
}
);
// Обработчик клика по категории для перехода в каталог с товарами
const handleCategoryClick = (catalog: PartsIndexCatalog) => {
console.log('🔍 Клик по категории:', { catalogId: catalog.id, categoryName: catalog.name });
// Получаем первую группу для groupId (это правильный ID для partsIndexCategory)
const firstGroup = catalog.groups?.[0];
const groupId = firstGroup?.id;
console.log('🔍 Найденная группа:', { groupId, groupName: firstGroup?.name });
// Переходим на страницу каталога с параметрами PartsIndex
const categories = (data?.partsIndexCategoriesWithGroups && data.partsIndexCategoriesWithGroups.length > 0)
? data.partsIndexCategoriesWithGroups.slice(0, 9)
: FALLBACK_CATEGORIES;
const handleCategoryClick = (category: CategoryNavItem) => {
router.push({
pathname: '/catalog',
query: {
partsIndexCatalog: catalog.id,
categoryName: encodeURIComponent(catalog.name),
...(groupId && { partsIndexCategory: groupId })
categoryId: category.id,
categoryName: encodeURIComponent(category.name)
}
});
};
// Fallback данные на случай ошибки
const fallbackCategories = [
{ id: '1', name: 'Двигатель', image: '/images/catalog_item.png' },
{ id: '2', name: 'Трансмиссия', image: '/images/catalog_item2.png' },
{ id: '3', name: 'Подвеска', image: '/images/catalog_item3.png' },
{ id: '4', name: 'Тормоза', image: '/images/catalog_item4.png' },
{ id: '5', name: 'Электрика', image: '/images/catalog_item5.png' },
{ id: '6', name: 'Кузов', image: '/images/catalog_item6.png' },
{ id: '7', name: 'Салон', image: '/images/catalog_item7.png' },
{ id: '8', name: 'Климат', image: '/images/catalog_item8.png' },
{ id: '9', name: 'Расходники', image: '/images/catalog_item9.png' }
];
// Используем данные из API или fallback
const categories = data?.partsIndexCategoriesWithGroups || [];
const displayCategories = categories.length > 0 ? categories : fallbackCategories;
if (loading) {
return (
<div className="w-layout-blockcontainer container-2 w-container">
<div className="w-layout-hflex flex-block-6">
{Array.from({ length: 9 }).map((_, index) => (
<div key={index} className="w-layout-vflex flex-block-7">
<div className="animate-pulse bg-gray-200 h-6 w-20 rounded mb-2"></div>
</div>
))}
</div>
<div className="w-layout-hflex flex-block-5">
{Array.from({ length: 9 }).map((_, index) => (
<div key={index} className="w-layout-vflex flex-block-8">
<div className="animate-pulse bg-gray-200 h-32 w-full rounded"></div>
</div>
))}
</div>
</div>
);
}
return (
<div className="w-layout-blockcontainer container-2 w-container">
{/* Навигационная панель с названиями категорий */}
<div className="w-layout-hflex flex-block-6">
{displayCategories.slice(0, 9).map((catalog) => (
<div key={catalog.id} className="w-layout-vflex flex-block-7">
<div
className="text-block-10"
onClick={() => handleCategoryClick(catalog)}
style={{ cursor: 'pointer' }}
<section className="catnav">
<div className="w-layout-blockcontainer batd w-container">
<div className="w-layout-hflex flex-block-108-copy">
{categories.map((category, idx) => (
<div
key={category.id}
className={`ci${idx + 1}`}
style={category.image ? { cursor: 'pointer', backgroundImage: `url('${category.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' } : { cursor: 'pointer' }}
onClick={() => handleCategoryClick(category)}
>
{catalog.name}
<div className={idx === 0 ? 'text-block-54-copy' : 'text-block-54'} style={{ textAlign: 'center' }}>
{category.name}
</div>
</div>
</div>
))}
))}
</div>
</div>
{/* Блок с изображениями категорий */}
<div className="w-layout-hflex flex-block-5">
{displayCategories.slice(0, 9).map((catalog) => (
<div key={catalog.id} className="w-layout-vflex flex-block-8">
<img
src={catalog.image || '/images/catalog_item.png'}
loading="lazy"
alt={catalog.name}
className="image-5"
onClick={() => handleCategoryClick(catalog)}
style={{ cursor: 'pointer' }}
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = '/images/catalog_item.png';
}}
/>
</div>
))}
</div>
</div>
</section>
);
};