refactor: optimize category data fetching in Content component by utilizing cached category tree for improved performance and reduced socket queries

src/components/Content.js

@@ -259,12 +259,37 @@ class Content extends Component {
 
 
   fetchCategoryData(categoryId) {
+    // Check if we have the category tree data in window.productCache
+    const hasCategoryTree = window.productCache && 
+                           window.productCache["categoryTree_209"] && 
+                           window.productCache["categoryTree_209"].categoryTree;
+                           
+    // Check for specific category data in cache
     const cachedData = getCachedCategoryData(categoryId);
-    if (cachedData) {
-      this.processDataWithCategoryTree(cachedData, categoryId);
-      return;
+    
+    // If we have the category tree data, use it and don't query socket.io
+    if (hasCategoryTree) {
+      console.log("Found category tree in cache");
+      
+      if (cachedData) {
+        console.log("Using cached category data for", categoryId);
+        this.processDataWithCategoryTree(cachedData, categoryId);
+        return;
+      } else {
+        // If we have the category tree but not the specific category data,
+        // we can still use the category tree to get child categories
+        const emptyResponse = {
+          products: [],
+          attributes: [],
+          categoryName: this.getCategoryNameFromTree(categoryId)
+        };
+        console.log("Using category tree data without products");
+        this.processDataWithCategoryTree(emptyResponse, categoryId);
+        return;
+      }
     }
 
+    // Only if we don't have the category tree in cache, proceed with socket.io query
     console.log(`productList:${categoryId}`);
     window.socketManager.off(`productList:${categoryId}`);
 
@@ -384,6 +409,21 @@ class Content extends Component {
     
     return null;
   }
+  
+  // Helper function to get category name from tree
+  getCategoryNameFromTree = (categoryId) => {
+    if (!window.productCache || !window.productCache["categoryTree_209"] || 
+        !window.productCache["categoryTree_209"].categoryTree) {
+      return null;
+    }
+    
+    // If categoryId is a string (SEO name), find by seoName, otherwise by ID
+    const category = typeof categoryId === 'string' 
+      ? this.findCategoryBySeoName(window.productCache["categoryTree_209"].categoryTree, categoryId)
+      : this.findCategoryById(window.productCache["categoryTree_209"].categoryTree, categoryId);
+      
+    return category ? category.name : null;
+  }
 
   // Helper function to get current category ID from seoName
   getCurrentCategoryId = () => {