feat: enhance InstanceProductsTable and SerializedPartsTable with improved API calls and UI feedback

Author: matbmoser

ichub-frontend/src/features/catalog-management/components/product-detail/InstanceProductsTable.tsx

@@ -20,7 +20,7 @@
  * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
@@ -46,7 +46,7 @@ import { SerializedPart } from '../../../serialized-parts/types';
 import { SerializedPartTwinRead } from '../../../serialized-parts/types/twin-types';
 import { fetchSerializedParts } from '../../../serialized-parts/api';
 import { createSerializedPartTwin, shareSerializedPartTwin, unshareSerializedPartTwin, deleteSerializedPart } from '../../../serialized-parts/api';
-import { fetchAllSerializedPartTwins } from '../../../serialized-parts/api';
+import { fetchSerializedPartTwinsForCatalogPart } from '../../../serialized-parts/api';
 import { PartType, StatusVariants } from '../../types/types';
 import { SerializedPartStatusChip } from './SerializedPartStatusChip';
 
@@ -62,6 +62,9 @@ interface InstanceProductsTableProps {
 }
 
 export default function InstanceProductsTable({ part, onAddClick }: Readonly<InstanceProductsTableProps>) {
+  // Ref to prevent duplicate API calls in React StrictMode
+  const dataLoadedRef = useRef(false);
+  
   const [rows, setRows] = useState<SerializedPartWithStatus[]>([]);
   const [twinCreatingId, setTwinCreatingId] = useState<number | null>(null);
   const [twinSharingId, setTwinSharingId] = useState<number | null>(null);
@@ -110,14 +113,22 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
   useEffect(() => {
     if (!part) {
       setRows([]);
+      dataLoadedRef.current = false; // Reset ref when part changes
       return;
     }
+    
     const loadData = async () => {
+      // Prevent duplicate calls in React StrictMode
+      if (dataLoadedRef.current) {
+        return;
+      }
+      dataLoadedRef.current = true;
+      
       try {
         // Fetch both serialized parts and twins
         const [serializedParts, twins] = await Promise.all([
           fetchSerializedParts(part.manufacturerId, part.manufacturerPartId),
-          fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId)
+          fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId)
         ]);
 
         // Merge serialized parts with twin status
@@ -135,6 +146,8 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
         console.log('Loaded instance products:', rowsWithStatus);
       } catch (error) {
         console.error("Error fetching instance products:", error);
+        // Reset ref on error so it can be retried
+        dataLoadedRef.current = false;
       }
     };
 
@@ -163,7 +176,7 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
       // Refresh data after successful creation
       const [serializedParts, twins] = await Promise.all([
         fetchSerializedParts(part.manufacturerId, part.manufacturerPartId),
-        fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId)
+        fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId)
       ]);
 
       const rowsWithStatus = serializedParts.map((serializedPart, index) => {
@@ -214,7 +227,7 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
       // Refresh data after successful share
       const [serializedParts, twins] = await Promise.all([
         fetchSerializedParts(part.manufacturerId, part.manufacturerPartId),
-        fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId)
+        fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId)
       ]);
 
       const rowsWithStatus = serializedParts.map((serializedPart, index) => {
@@ -257,7 +270,7 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
     setTwinUnsharingId(row.id);
     try {
       // Find the twin to get the AAS ID
-      const twins = await fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId);
+      const twins = await fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId);
       const twin = twins.find(
         (t) => t.manufacturerId === row.manufacturerId &&
                t.manufacturerPartId === row.manufacturerPartId &&
@@ -281,7 +294,7 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
       // Refresh data after successful unshare
       const [serializedParts, updatedTwins] = await Promise.all([
         fetchSerializedParts(part.manufacturerId, part.manufacturerPartId),
-        fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId)
+        fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId)
       ]);
 
       const rowsWithStatus = serializedParts.map((serializedPart, index) => {
@@ -337,7 +350,7 @@ export default function InstanceProductsTable({ part, onAddClick }: Readonly<Ins
       // Refresh data after successful deletion
       const [serializedParts, twins] = await Promise.all([
         fetchSerializedParts(part.manufacturerId, part.manufacturerPartId),
-        fetchAllSerializedPartTwins(part.manufacturerId, part.manufacturerPartId)
+        fetchSerializedPartTwinsForCatalogPart(part.manufacturerId, part.manufacturerPartId)
       ]);
 
       const rowsWithStatus = serializedParts.map((serializedPart, index) => {

ichub-frontend/src/features/main.tsx

@@ -30,8 +30,8 @@ import { FeatureConfig, NavigationItem } from '../types/routing';
 // Import all feature configurations
 export const allFeatures: FeatureConfig[] = [
   catalogManagementFeature,
-  partDiscoveryFeature,
   serializedPartsFeature,
+  partDiscoveryFeature,
   partnerManagementFeature,
   // Add placeholder for status feature (disabled)
   {

ichub-frontend/src/features/serialized-parts/api.ts

@@ -29,13 +29,12 @@ const SERIALIZED_PART_READ_BASE_PATH = '/part-management/serialized-part';
 const SERIALIZED_PART_TWIN_BASE_PATH = '/twin-management/serialized-part-twin';
 const backendUrl = getIchubBackendUrl();
 
-// Simple cache for twins to avoid redundant API calls
-const twinsCache = new Map<string, { data: SerializedPartTwinRead[]; timestamp: number }>();
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
-
-const getCacheKey = (manufacturerId?: string, manufacturerPartId?: string) => {
-  return `${manufacturerId || 'all'}-${manufacturerPartId || 'all'}`;
-};
+// Create axios instance with caching configuration for GET requests
+const cacheableAxios = axios.create({
+  headers: {
+    'Cache-Control': 'max-age=300', // Cache for 5 minutes
+  },
+});
 
 export const fetchAllSerializedParts = async (): Promise<SerializedPart[]> => {
   const response = await axios.get<SerializedPart[]>(`${backendUrl}${SERIALIZED_PART_READ_BASE_PATH}`);
@@ -81,42 +80,34 @@ export const shareSerializedPartTwin = async (
   );
 };
 
-export const fetchAllSerializedPartTwins = async (
-  manufacturerId?: string,
-  manufacturerPartId?: string
-): Promise<SerializedPartTwinRead[]> => {
-  // Check cache first
-  const cacheKey = getCacheKey(manufacturerId, manufacturerPartId);
-  const cached = twinsCache.get(cacheKey);
-  const now = Date.now();
+export const fetchAllSerializedPartTwins = async (): Promise<SerializedPartTwinRead[]> => {
+  // Fetch all twins without any filters using browser caching
+  const params = new URLSearchParams();
+  params.append('include_data_exchange_agreements', 'true');
 
-  if (cached && (now - cached.timestamp) < CACHE_DURATION) {
-    console.log('Returning cached twins data for:', cacheKey);
-    return cached.data;
-  }
+  console.log('Fetching all twins from API (browser-cached)');
+  const response = await cacheableAxios.get<SerializedPartTwinRead[]>(
+    `${backendUrl}${SERIALIZED_PART_TWIN_BASE_PATH}?${params.toString()}`
+  );
 
-  // Build query parameters to filter on the server side
+  return response.data;
+};
+
+export const fetchSerializedPartTwinsForCatalogPart = async (
+  manufacturerId: string,
+  manufacturerPartId: string
+): Promise<SerializedPartTwinRead[]> => {
+  // Build query parameters to filter by catalog part using browser caching
   const params = new URLSearchParams();
   params.append('include_data_exchange_agreements', 'true');
+  params.append('manufacturerId', manufacturerId);
+  params.append('manufacturerPartId', manufacturerPartId);
 
-  if (manufacturerId) {
-    params.append('manufacturerId', manufacturerId);
-  }
-  if (manufacturerPartId) {
-    params.append('manufacturerPartId', manufacturerPartId);
-  }
-  
-  console.log('Fetching twins from API for:', cacheKey);
-  const response = await axios.get<SerializedPartTwinRead[]>(
+  console.log('Fetching filtered twins from API for catalog part (browser-cached):', manufacturerId, manufacturerPartId);
+  const response = await cacheableAxios.get<SerializedPartTwinRead[]>(
     `${backendUrl}${SERIALIZED_PART_TWIN_BASE_PATH}?${params.toString()}`
   );
 
-  // Cache the result
-  twinsCache.set(cacheKey, {
-    data: response.data,
-    timestamp: now
-  });
-  
   return response.data;
 };