Update BuyerOrderInfo.tsx
This commit is contained in:
NotII
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Package, ShoppingBag, Info, ExternalLink } from "lucide-react";
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { Package, ShoppingBag, Info, ExternalLink, Loader2 } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -35,73 +35,138 @@ interface BuyerOrderInfoProps {
|
||||
|
||||
export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [hasOrders, setHasOrders] = useState<boolean | null>(null);
|
||||
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
||||
const lastFetchedRef = useRef<number>(0);
|
||||
const isFetchingRef = useRef<boolean>(false);
|
||||
const tooltipDelayRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Only load if we have a chatId
|
||||
// Fetch data without unnecessary dependencies to reduce render cycles
|
||||
const fetchBuyerOrders = useCallback(async (force = false) => {
|
||||
// Prevent multiple simultaneous fetches
|
||||
if (isFetchingRef.current) return;
|
||||
|
||||
// Don't fetch if we already know there are no orders
|
||||
if (hasOrders === false && !force) return;
|
||||
|
||||
// Don't fetch if we already have orders and data was fetched less than 10 seconds ago
|
||||
const now = Date.now();
|
||||
if (!force && orders.length > 0 && now - lastFetchedRef.current < 10000) return;
|
||||
|
||||
// Only continue if we have a chatId
|
||||
if (!chatId) return;
|
||||
|
||||
const fetchBuyerOrders = async () => {
|
||||
try {
|
||||
const authToken = getCookie("Authorization");
|
||||
isFetchingRef.current = true;
|
||||
setLoading(true);
|
||||
|
||||
if (!authToken) return;
|
||||
try {
|
||||
const authToken = getCookie("Authorization");
|
||||
|
||||
const authAxios = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
if (!authToken) {
|
||||
isFetchingRef.current = false;
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Use the new endpoint that works with sub-users
|
||||
const response = await authAxios.get(`/chats/${chatId}/orders?limit=250`);
|
||||
|
||||
if (response.data && response.data.orders) {
|
||||
setOrders(response.data.orders);
|
||||
const authAxios = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Error fetching buyer orders:", error);
|
||||
setLoading(false);
|
||||
// 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);
|
||||
}
|
||||
|
||||
lastFetchedRef.current = Date.now();
|
||||
} catch (error) {
|
||||
console.error("Error fetching buyer orders:", error);
|
||||
setHasOrders(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
isFetchingRef.current = false;
|
||||
}
|
||||
}, [chatId]); // Minimize dependencies even further
|
||||
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
|
||||
fetchBuyerOrders();
|
||||
}, [chatId]);
|
||||
}, [chatId, fetchBuyerOrders]);
|
||||
|
||||
const handleViewOrder = (orderId: string) => {
|
||||
router.push(`/dashboard/orders/${orderId}`);
|
||||
};
|
||||
|
||||
// Handle hover with immediate tooltip opening
|
||||
const handleButtonMouseEnter = () => {
|
||||
// Start fetching data, but don't wait for it to complete
|
||||
if (!isFetchingRef.current) {
|
||||
queueMicrotask(() => {
|
||||
fetchBuyerOrders();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle tooltip state change
|
||||
const handleTooltipOpenChange = (open: boolean) => {
|
||||
setIsTooltipOpen(open);
|
||||
if (open && !isFetchingRef.current) {
|
||||
queueMicrotask(() => {
|
||||
fetchBuyerOrders();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Format the price as currency
|
||||
const formatPrice = (price: number) => {
|
||||
return `£${price.toFixed(2)}`;
|
||||
};
|
||||
|
||||
// Don't show anything while loading or if no orders
|
||||
if (loading || orders.length === 0) {
|
||||
// If we know there are no orders, don't show the component at all
|
||||
if (hasOrders === false) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Count products across all orders
|
||||
const productCount = orders.reduce((total, order) => {
|
||||
return total + order.products.reduce((sum, product) => sum + product.quantity, 0);
|
||||
}, 0);
|
||||
// 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;
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<Tooltip onOpenChange={handleTooltipOpenChange}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-2 flex items-center gap-1.5"
|
||||
onMouseEnter={handleButtonMouseEnter}
|
||||
>
|
||||
<ShoppingBag className="h-4 w-4" />
|
||||
<span className="text-xs font-medium">{orders.length} Orders</span>
|
||||
<span className="text-xs font-medium">
|
||||
{orders.length > 0 ? `${orders.length} Orders` : "Orders"}
|
||||
</span>
|
||||
{productCount > 0 && (
|
||||
<Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-1">
|
||||
{productCount} items
|
||||
@@ -109,46 +174,67 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" align="start" className="w-80 p-0" sideOffset={10}>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="w-80 p-0"
|
||||
sideOffset={10}
|
||||
>
|
||||
<div className="py-2">
|
||||
<div className="px-3 py-2 text-xs font-medium border-b flex justify-between items-center">
|
||||
<span>Recent Orders from this Customer</span>
|
||||
<Info className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto divide-y divide-border">
|
||||
{orders.map((order) => (
|
||||
<div
|
||||
key={order._id}
|
||||
className="px-3 py-2 hover:bg-accent/50 cursor-pointer"
|
||||
onClick={() => handleViewOrder(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-3.5 w-3.5" />
|
||||
<span className="text-xs font-medium">Order #{order.orderId}</span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
|
||||
<div className="flex gap-1">
|
||||
<span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
|
||||
<span>·</span>
|
||||
<span>{formatPrice(order.totalPrice)}</span>
|
||||
{loading ? (
|
||||
// Show loading state
|
||||
<div className="p-4 flex justify-center items-center">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Loading orders...</span>
|
||||
</div>
|
||||
) : orders.length === 0 ? (
|
||||
// Show no orders state
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
No orders found for this customer
|
||||
</div>
|
||||
) : (
|
||||
// Show orders
|
||||
<div className="max-h-64 overflow-y-auto divide-y divide-border">
|
||||
{orders.map((order) => (
|
||||
<div
|
||||
key={order._id}
|
||||
className="px-3 py-2 hover:bg-accent/50 cursor-pointer"
|
||||
onClick={() => handleViewOrder(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-3.5 w-3.5" />
|
||||
<span className="text-xs font-medium">Order #{order.orderId}</span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
|
||||
<div className="flex gap-1">
|
||||
<span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
|
||||
<span>·</span>
|
||||
<span>{formatPrice(order.totalPrice)}</span>
|
||||
</div>
|
||||
<span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-t px-3 py-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
Reference in New Issue
Block a user