добавлен роутинг между категориями

src/components/vin/VinCategory.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useQuery, useLazyQuery } from '@apollo/client';
 import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_UNITS } from '@/lib/graphql/laximo';
+import { useRouter } from 'next/router';
 
 interface VinCategoryProps {
   catalogCode?: string;
@@ -15,6 +16,7 @@ interface VinCategoryProps {
 }
 
 const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => {
+  const router = useRouter();
   const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
   const lastCategoryIdRef = useRef<string | null>(null);
 
@@ -63,8 +65,20 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
   const loading = activeTab === 'uzly' ? quickGroupsLoading : categoriesLoading;
   const error = activeTab === 'uzly' ? quickGroupsError : categoriesError;
 
+  // Функция для обновления openedPath и catpath в URL
+  const updatePath = (newPath: string[]) => {
+    setOpenedPath(newPath);
+    if (router) {
+      router.push(
+        { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } },
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
+
   const handleBack = () => {
-    setOpenedPath(openedPath.slice(0, openedPath.length - 1));
+    updatePath(openedPath.slice(0, openedPath.length - 1));
   };
 
   const handleCategoryClick = (category: any, level: number) => {
@@ -74,9 +88,9 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
     }
     if (category.children && category.children.length > 0) {
       if (openedPath[level] === (category.quickgroupid || category.categoryid || category.id)) {
-        setOpenedPath(openedPath.slice(0, level));
+        updatePath(openedPath.slice(0, level));
       } else {
-        setOpenedPath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
+        updatePath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
       }
     } else if (category.link && onQuickGroupSelect) {
       onQuickGroupSelect(category);

src/components/vin/VinLeftbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useLazyQuery, useQuery } from '@apollo/client';
 import { GET_LAXIMO_FULLTEXT_SEARCH, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';
+import { useRouter } from 'next/router';
 
 interface VinLeftbarProps {
   vehicleInfo?: {
@@ -32,6 +33,7 @@ interface QuickGroup {
 }
 
 const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect, activeTab: activeTabProp, openedPath = [], setOpenedPath = () => {} }) => {
+  const router = useRouter();
   const catalogCode = vehicleInfo?.catalog || '';
   const vehicleId = vehicleInfo?.vehicleid || '';
   const ssd = vehicleInfo?.ssd || '';
@@ -59,11 +61,39 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const lastCategoryIdRef = React.useRef<string | null>(null);
 
+  // --- Синхронизация openedPath с URL ---
+  // Обновляем openedPath и URL
+  const setOpenedPathAndUrl = (newPath: string[]) => {
+    setOpenedPath(newPath);
+    const params = new URLSearchParams(router.query as any);
+    if (newPath.length > 0) {
+      params.set('catpath', newPath.join(','));
+    } else {
+      params.delete('catpath');
+    }
+    router.push(
+      { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  // Восстанавливаем openedPath из URL
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const catpath = (router.query.catpath as string) || '';
+    if (catpath) {
+      setOpenedPath(catpath.split(',').filter(Boolean));
+    } else {
+      setOpenedPath([]);
+    }
+  }, [router.query.catpath]);
+
   const handleToggle = (categoryId: string, level: number) => {
     if (openedPath[level] === categoryId) {
-      setOpenedPath(openedPath.slice(0, level));
+      setOpenedPathAndUrl(openedPath.slice(0, level));
     } else {
-      setOpenedPath([...openedPath.slice(0, level), categoryId]);
+      setOpenedPathAndUrl([...openedPath.slice(0, level), categoryId]);
       
       // Загружаем units для категории, если они еще не загружены
       if (activeTabProp === 'manufacturer' && !unitsByCategory[categoryId]) {
@@ -133,9 +163,9 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const handleQuickGroupToggle = (groupId: string, level: number) => {
     if (openedPath[level] === groupId) {
-      setOpenedPath(openedPath.slice(0, level));
+      setOpenedPathAndUrl(openedPath.slice(0, level));
     } else {
-      setOpenedPath([...openedPath.slice(0, level), groupId]);
+      setOpenedPathAndUrl([...openedPath.slice(0, level), groupId]);
     }
   };