ugh

components/dashboard/BuyerOrderInfo.tsx

@@ -10,23 +10,22 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { clientFetch } from "@/lib/client-utils";
+import { getCookie } from "@/lib/client-utils";
+import axios from "axios";
 import { useRouter } from "next/navigation";
 
-interface OrderProduct {
-  productId: string;
-  quantity: number;
-  pricePerUnit: number;
-  totalItemPrice: number;
-}
-
 interface Order {
   _id: string;
   orderId: number;
   status: string;
   totalPrice: number;
   orderDate: string;
-  products: OrderProduct[];
+  products: Array<{
+    productId: string;
+    quantity: number;
+    pricePerUnit: number;
+    totalItemPrice: number;
+  }>;
 }
 
 interface BuyerOrderInfoProps {
@@ -34,26 +33,17 @@ interface BuyerOrderInfoProps {
   chatId: string;
 }
 
-/**
- * Component that displays order information for a buyer in a chat
- * Shows a tooltip with recent orders and allows navigation to order details
- */
 export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps) {
   const router = useRouter();
-  
-  // State
   const [loading, setLoading] = useState(false);
   const [orders, setOrders] = useState<Order[]>([]);
   const [hasOrders, setHasOrders] = useState<boolean | null>(null);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  
-  // Refs to prevent unnecessary re-renders and API calls
   const lastFetchedRef = useRef<number>(0);
   const isFetchingRef = useRef<boolean>(false);
+  const tooltipDelayRef = useRef<NodeJS.Timeout | null>(null);
   
-  /**
-   * Fetch buyer orders from the API
-   */
+  // Fetch data without unnecessary dependencies to reduce render cycles
   const fetchBuyerOrders = useCallback(async (force = false) => {
     // Prevent multiple simultaneous fetches
     if (isFetchingRef.current) return;
@@ -72,12 +62,27 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
     setLoading(true);
     
     try {
-      // Use clientFetch to handle auth and API routing automatically
-      const response = await clientFetch(`/chats/${chatId}/orders?limit=10`);
+      const authToken = getCookie("Authorization");
       
-      if (response && response.orders) {
-        setOrders(response.orders);
-        setHasOrders(response.orders.length > 0);
+      if (!authToken) {
+        isFetchingRef.current = false;
+        setLoading(false);
+        return;
+      }
+      
+      const authAxios = axios.create({
+        baseURL: process.env.NEXT_PUBLIC_API_URL,
+        headers: {
+          Authorization: `Bearer ${authToken}`
+        }
+      });
+      
+      // Use the new endpoint that works with sub-users
+      const response = await authAxios.get(`/chats/${chatId}/orders?limit=10`); // Limit to fewer orders for faster response
+      
+      if (response.data && response.data.orders) {
+        setOrders(response.data.orders);
+        setHasOrders(response.data.orders.length > 0);
       } else {
         setHasOrders(false);
       }
@@ -90,44 +95,48 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [chatId, orders.length, hasOrders]);
+  }, [chatId]); // Minimize dependencies even further
   
-  // Fetch orders when component mounts
+  // Start fetching immediately when component mounts
   useEffect(() => {
     if (chatId) {
+      // Immediately attempt to fetch in the background
       fetchBuyerOrders();
     }
+    
+    return () => {
+      // Clean up any pending timeouts
+      if (tooltipDelayRef.current) {
+        clearTimeout(tooltipDelayRef.current);
+      }
+    };
   }, [chatId, fetchBuyerOrders]);
   
-  /**
-   * Navigate to order details page
-   */
   const handleViewOrder = (orderId: string) => {
     router.push(`/dashboard/orders/${orderId}`);
   };
   
-  /**
-   * Handle mouse enter on the button to start loading data
-   */
+  // Handle hover with immediate tooltip opening
   const handleButtonMouseEnter = () => {
+    // Start fetching data, but don't wait for it to complete
     if (!isFetchingRef.current) {
-      queueMicrotask(() => fetchBuyerOrders());
+      queueMicrotask(() => {
+        fetchBuyerOrders();
+      });
     }
   };
   
-  /**
-   * Handle tooltip state change, load data if opening
-   */
+  // Handle tooltip state change
   const handleTooltipOpenChange = (open: boolean) => {
     setIsTooltipOpen(open);
     if (open && !isFetchingRef.current) {
-      queueMicrotask(() => fetchBuyerOrders());
+      queueMicrotask(() => {
+        fetchBuyerOrders();
+      });
     }
   };
   
-  /**
-   * Format price as currency
-   */
+  // Format the price as currency
   const formatPrice = (price: number) => {
     return `£${price.toFixed(2)}`;
   };
@@ -137,26 +146,13 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
     return null;
   }
   
-  // Calculate total products across all orders
+  // Precompute product count for button display (only if we have orders)
   const productCount = orders.length > 0 
     ? orders.reduce((total, order) => {
         return total + order.products.reduce((sum, product) => sum + product.quantity, 0);
       }, 0)
     : 0;
   
-  /**
-   * Get badge variant based on order status
-   */
-  const getStatusBadgeVariant = (status: string) => {
-    switch (status) {
-      case "paid": return "paid";
-      case "unpaid": return "unpaid";
-      case "shipped": return "shipped"; 
-      case "completed": return "completed";
-      default: return "secondary";
-    }
-  };
-  
   return (
     <TooltipProvider>
       <Tooltip onOpenChange={handleTooltipOpenChange}>
@@ -215,10 +211,13 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                         <Package className="h-3.5 w-3.5" />
                         <span className="text-xs font-medium">Order #{order.orderId}</span>
                       </div>
-                      <Badge 
-                        variant={getStatusBadgeVariant(order.status)} 
-                        className="text-[10px] h-5 px-1.5"
-                      >
+                      <Badge variant={
+                        order.status === "paid" ? "paid" : 
+                        order.status === "unpaid" ? "unpaid" :
+                        order.status === "shipped" ? "shipped" :
+                        order.status === "completed" ? "completed" :
+                        "secondary"
+                      } className="text-[10px] h-5 px-1.5">
                         {order.status.toUpperCase()}
                       </Badge>
                     </div>