add trade detail view and counter offer functionality
This commit is contained in:
Matthieu
@@ -26,6 +26,7 @@ import {
|
||||
import { getUserCollection, getCardsByIds } from '../services/api';
|
||||
import { Card } from '../types';
|
||||
import TradeCreator from './TradeCreator';
|
||||
import TradeDetail from './TradeDetail';
|
||||
import ConfirmModal from './ConfirmModal';
|
||||
|
||||
interface UserProfile {
|
||||
@@ -79,6 +80,13 @@ export default function Community() {
|
||||
const [tradeHistory, setTradeHistory] = useState<Trade[]>([]);
|
||||
const [tradeCardDetails, setTradeCardDetails] = useState<Map<string, Card>>(new Map());
|
||||
const [processingTradeId, setProcessingTradeId] = useState<string | null>(null);
|
||||
const [selectedTrade, setSelectedTrade] = useState<Trade | null>(null);
|
||||
const [counterOfferData, setCounterOfferData] = useState<{
|
||||
receiverId: string;
|
||||
receiverUsername: string;
|
||||
receiverCollection: CollectionItem[];
|
||||
initialOffer?: { senderCards: Card[]; receiverCards: Card[] };
|
||||
} | null>(null);
|
||||
|
||||
// Profile state
|
||||
const [username, setUsername] = useState('');
|
||||
@@ -310,6 +318,38 @@ export default function Community() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleCounterOffer = async (trade: Trade, senderCards: Card[], receiverCards: Card[]) => {
|
||||
try {
|
||||
// Decline the original trade
|
||||
await declineTrade(trade.id);
|
||||
|
||||
// Load the sender's collection for the counter-offer
|
||||
const collectionMap = await getUserCollection(trade.sender_id);
|
||||
const cardIds = Array.from(collectionMap.keys());
|
||||
const cards = await getCardsByIds(cardIds);
|
||||
const senderCollection = cards.map((card) => ({
|
||||
card,
|
||||
quantity: collectionMap.get(card.id) || 0,
|
||||
}));
|
||||
|
||||
// Set up counter-offer data (swap sender and receiver)
|
||||
setCounterOfferData({
|
||||
receiverId: trade.sender_id,
|
||||
receiverUsername: trade.sender?.username || 'User',
|
||||
receiverCollection: senderCollection,
|
||||
initialOffer: {
|
||||
senderCards: receiverCards, // What you want to give back
|
||||
receiverCards: senderCards, // What you want to receive
|
||||
},
|
||||
});
|
||||
|
||||
await loadTradesData();
|
||||
} catch (error) {
|
||||
console.error('Error setting up counter-offer:', error);
|
||||
toast.error('Failed to set up counter-offer');
|
||||
}
|
||||
};
|
||||
|
||||
// ============ PROFILE FUNCTIONS ============
|
||||
const loadProfile = async () => {
|
||||
if (!user) return;
|
||||
@@ -348,15 +388,34 @@ export default function Community() {
|
||||
};
|
||||
|
||||
// ============ RENDER HELPERS ============
|
||||
const calculateTradeItemsPrice = (items: TradeItem[] | undefined, ownerId: string): number => {
|
||||
const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
|
||||
return ownerItems.reduce((total, item) => {
|
||||
const card = tradeCardDetails.get(item.card_id);
|
||||
const price = card?.prices?.usd ? parseFloat(card.prices.usd) : 0;
|
||||
return total + (price * item.quantity);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const renderTradeItems = (items: TradeItem[] | undefined, ownerId: string, label: string) => {
|
||||
const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
|
||||
const totalPrice = calculateTradeItemsPrice(items, ownerId);
|
||||
|
||||
if (ownerItems.length === 0) {
|
||||
return <p className="text-gray-500 text-xs">{label}: Gift</p>;
|
||||
return (
|
||||
<div>
|
||||
<p className="text-gray-400 text-xs mb-1">{label}:</p>
|
||||
<p className="text-gray-500 text-xs">Gift</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="text-gray-400 text-xs mb-1">{label}:</p>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<p className="text-gray-400 text-xs">{label}:</p>
|
||||
<p className="text-green-400 text-xs font-semibold">${totalPrice.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ownerItems.map((item) => {
|
||||
const card = tradeCardDetails.get(item.card_id);
|
||||
@@ -781,8 +840,16 @@ export default function Community() {
|
||||
pending: 'text-yellow-400',
|
||||
};
|
||||
|
||||
const canViewDetails = !isSender && trade.status === 'pending';
|
||||
|
||||
return (
|
||||
<div key={trade.id} className="bg-gray-800 rounded-lg p-3 space-y-2">
|
||||
<div
|
||||
key={trade.id}
|
||||
className={`bg-gray-800 rounded-lg p-3 space-y-2 ${
|
||||
canViewDetails ? 'cursor-pointer hover:bg-gray-750 transition-colors' : ''
|
||||
}`}
|
||||
onClick={() => canViewDetails && setSelectedTrade(trade)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
@@ -802,10 +869,15 @@ export default function Community() {
|
||||
{renderTradeItems(trade.items, trade.receiver_id, isSender ? 'Get' : 'Send')}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{tradesSubTab === 'pending' && (
|
||||
<div className="flex gap-2 pt-2 border-t border-gray-700">
|
||||
{isSender ? (
|
||||
{canViewDetails && (
|
||||
<p className="text-xs text-blue-400 text-center pt-1">
|
||||
Tap to view details
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Actions - Only show quick actions for sender (cancel) */}
|
||||
{tradesSubTab === 'pending' && isSender && (
|
||||
<div className="flex gap-2 pt-2 border-t border-gray-700" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => handleCancelTrade(trade.id)}
|
||||
disabled={processingTradeId === trade.id}
|
||||
@@ -813,25 +885,6 @@ export default function Community() {
|
||||
>
|
||||
<X size={14} /> Cancel
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleAcceptTrade(trade.id)}
|
||||
disabled={processingTradeId === trade.id}
|
||||
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-green-600 rounded-lg text-sm"
|
||||
>
|
||||
{processingTradeId === trade.id ? <Loader2 className="animate-spin" size={14} /> : <Check size={14} />}
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeclineTrade(trade.id)}
|
||||
disabled={processingTradeId === trade.id}
|
||||
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-red-600 rounded-lg text-sm"
|
||||
>
|
||||
<X size={14} /> Decline
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -890,6 +943,32 @@ export default function Community() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Trade Detail Modal */}
|
||||
{selectedTrade && (
|
||||
<TradeDetail
|
||||
trade={selectedTrade}
|
||||
onClose={() => setSelectedTrade(null)}
|
||||
onAccept={handleAcceptTrade}
|
||||
onDecline={handleDeclineTrade}
|
||||
onCounterOffer={handleCounterOffer}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Counter Offer Creator */}
|
||||
{counterOfferData && (
|
||||
<TradeCreator
|
||||
receiverId={counterOfferData.receiverId}
|
||||
receiverUsername={counterOfferData.receiverUsername}
|
||||
receiverCollection={counterOfferData.receiverCollection}
|
||||
onClose={() => setCounterOfferData(null)}
|
||||
onTradeCreated={() => {
|
||||
setCounterOfferData(null);
|
||||
loadTradesData();
|
||||
toast.success('Counter offer sent!');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Confirm Modal */}
|
||||
<ConfirmModal
|
||||
isOpen={confirmModal.isOpen}
|
||||
|
||||
308
src/components/TradeDetail.tsx
Normal file
308
src/components/TradeDetail.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Check, ArrowLeftRight, DollarSign, Loader2, RefreshCcw } from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { Trade, TradeItem } from '../services/tradesService';
|
||||
import { Card } from '../types';
|
||||
import { getCardsByIds } from '../services/api';
|
||||
|
||||
interface TradeDetailProps {
|
||||
trade: Trade;
|
||||
onClose: () => void;
|
||||
onAccept: (tradeId: string) => Promise<void>;
|
||||
onDecline: (tradeId: string) => Promise<void>;
|
||||
onCounterOffer: (trade: Trade, senderCards: Card[], receiverCards: Card[]) => void;
|
||||
}
|
||||
|
||||
interface TradeCardItem {
|
||||
card: Card;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
function calculateTotalPrice(items: TradeCardItem[]): number {
|
||||
return items.reduce((total, { card, quantity }) => {
|
||||
const price = card.prices?.usd ? parseFloat(card.prices.usd) : 0;
|
||||
return total + (price * quantity);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export default function TradeDetail({
|
||||
trade,
|
||||
onClose,
|
||||
onAccept,
|
||||
onDecline,
|
||||
onCounterOffer,
|
||||
}: TradeDetailProps) {
|
||||
const { user } = useAuth();
|
||||
const toast = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [processing, setProcessing] = useState(false);
|
||||
const [senderCards, setSenderCards] = useState<TradeCardItem[]>([]);
|
||||
const [receiverCards, setReceiverCards] = useState<TradeCardItem[]>([]);
|
||||
|
||||
const isSender = trade.sender_id === user?.id;
|
||||
const isReceiver = trade.receiver_id === user?.id;
|
||||
const otherUser = isSender ? trade.receiver : trade.sender;
|
||||
|
||||
useEffect(() => {
|
||||
loadTradeCards();
|
||||
}, [trade]);
|
||||
|
||||
const loadTradeCards = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const allCardIds = trade.items?.map(item => item.card_id) || [];
|
||||
if (allCardIds.length === 0) {
|
||||
setSenderCards([]);
|
||||
setReceiverCards([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const cards = await getCardsByIds(allCardIds);
|
||||
const cardMap = new Map<string, Card>();
|
||||
cards.forEach(card => cardMap.set(card.id, card));
|
||||
|
||||
const senderItems: TradeCardItem[] = [];
|
||||
const receiverItems: TradeCardItem[] = [];
|
||||
|
||||
trade.items?.forEach(item => {
|
||||
const card = cardMap.get(item.card_id);
|
||||
if (!card) return;
|
||||
|
||||
if (item.owner_id === trade.sender_id) {
|
||||
senderItems.push({ card, quantity: item.quantity });
|
||||
} else {
|
||||
receiverItems.push({ card, quantity: item.quantity });
|
||||
}
|
||||
});
|
||||
|
||||
setSenderCards(senderItems);
|
||||
setReceiverCards(receiverItems);
|
||||
} catch (error) {
|
||||
console.error('Error loading trade cards:', error);
|
||||
toast.error('Failed to load trade details');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccept = async () => {
|
||||
setProcessing(true);
|
||||
try {
|
||||
await onAccept(trade.id);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error accepting trade:', error);
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDecline = async () => {
|
||||
setProcessing(true);
|
||||
try {
|
||||
await onDecline(trade.id);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error declining trade:', error);
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCounterOffer = () => {
|
||||
const senderCardsList = senderCards.map(item => item.card);
|
||||
const receiverCardsList = receiverCards.map(item => item.card);
|
||||
onCounterOffer(trade, senderCardsList, receiverCardsList);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const senderPrice = calculateTotalPrice(senderCards);
|
||||
const receiverPrice = calculateTotalPrice(receiverCards);
|
||||
|
||||
const yourCards = isSender ? senderCards : receiverCards;
|
||||
const theirCards = isSender ? receiverCards : senderCards;
|
||||
const yourPrice = isSender ? senderPrice : receiverPrice;
|
||||
const theirPrice = isSender ? receiverPrice : senderPrice;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
||||
<div className="bg-gray-900 w-full md:max-w-4xl md:rounded-2xl flex flex-col max-h-screen md:max-h-[90vh]">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowLeftRight size={20} className="text-blue-400" />
|
||||
<div>
|
||||
<h2 className="text-lg font-bold">Trade Details</h2>
|
||||
<p className="text-sm text-gray-400">
|
||||
{isSender ? 'To' : 'From'}: {otherUser?.username}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-800 rounded-lg transition"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin text-blue-500" size={48} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Your Side */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-green-400">
|
||||
{isSender ? 'You Give' : 'You Receive'}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1 text-green-400 text-sm">
|
||||
<DollarSign size={14} />
|
||||
{yourPrice.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{yourCards.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-8">Gift (no cards)</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
{yourCards.map((item, idx) => (
|
||||
<div key={idx} className="relative rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={item.card.image_uris?.small || item.card.image_uris?.normal}
|
||||
alt={item.card.name}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
{item.quantity > 1 && (
|
||||
<div className="absolute top-1 right-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
|
||||
x{item.quantity}
|
||||
</div>
|
||||
)}
|
||||
{item.card.prices?.usd && (
|
||||
<div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
|
||||
${item.card.prices.usd}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Their Side */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-blue-400">
|
||||
{isSender ? 'You Receive' : 'They Give'}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1 text-blue-400 text-sm">
|
||||
<DollarSign size={14} />
|
||||
{theirPrice.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{theirCards.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-8">Gift (no cards)</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
{theirCards.map((item, idx) => (
|
||||
<div key={idx} className="relative rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={item.card.image_uris?.small || item.card.image_uris?.normal}
|
||||
alt={item.card.name}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
{item.quantity > 1 && (
|
||||
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
|
||||
x{item.quantity}
|
||||
</div>
|
||||
)}
|
||||
{item.card.prices?.usd && (
|
||||
<div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
|
||||
${item.card.prices.usd}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message */}
|
||||
{trade.message && (
|
||||
<div className="mt-4 p-3 bg-gray-800 rounded-lg">
|
||||
<p className="text-sm text-gray-400 mb-1">Message:</p>
|
||||
<p className="text-sm">{trade.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Price Difference */}
|
||||
{!loading && (senderPrice > 0 || receiverPrice > 0) && (
|
||||
<div className="mt-4 p-3 bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Value Difference:</span>
|
||||
<span className={Math.abs(senderPrice - receiverPrice) > 5 ? 'text-yellow-400' : 'text-gray-300'}>
|
||||
${Math.abs(senderPrice - receiverPrice).toFixed(2)}
|
||||
{senderPrice > receiverPrice ? ' in your favor' : senderPrice < receiverPrice ? ' in their favor' : ' (balanced)'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions - Only for pending trades */}
|
||||
{trade.status === 'pending' && !loading && (
|
||||
<div className="border-t border-gray-800 p-4 space-y-2">
|
||||
{isReceiver ? (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
disabled={processing}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg font-medium transition"
|
||||
>
|
||||
{processing ? (
|
||||
<Loader2 className="animate-spin" size={18} />
|
||||
) : (
|
||||
<>
|
||||
<Check size={18} />
|
||||
Accept Trade
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDecline}
|
||||
disabled={processing}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 rounded-lg font-medium transition"
|
||||
>
|
||||
<X size={18} />
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCounterOffer}
|
||||
disabled={processing}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
|
||||
>
|
||||
<RefreshCcw size={18} />
|
||||
Make Counter Offer
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-center text-gray-400 text-sm py-2">
|
||||
Waiting for {otherUser?.username} to respond...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user