add trade validation to prevent accepting invalid trades and update UI accordingly

This commit is contained in:
Matthieu
2025-11-27 15:34:37 +01:00
parent 1d77b6fb8e
commit 2acf50e46f
4 changed files with 149 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Search, Globe, Users, Eye, ArrowLeftRight, Loader2, Clock, History, UserPlus, UserMinus, Check, X, Send, Settings, Save, ChevronLeft, RefreshCw, Plus, Minus } from 'lucide-react';
import { Search, Globe, Users, Eye, ArrowLeftRight, Loader2, Clock, History, UserPlus, UserMinus, Check, X, Send, Settings, Save, ChevronLeft, RefreshCw, Plus, Minus, AlertTriangle } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useToast } from '../contexts/ToastContext';
import { supabase } from '../lib/supabase';
@@ -1412,10 +1412,15 @@ export default function Community() {
With: <strong>{otherUser?.username}</strong>
</span>
</div>
<div className="flex items-center gap-1.5">
{trade.status === 'pending' && !trade.is_valid && (
<AlertTriangle size={14} className="text-red-400" title="Trade no longer valid" />
)}
<span className={`text-xs capitalize ${statusColors[trade.status]}`}>
{trade.status}
</span>
</div>
</div>
{/* Items */}
<div className="grid grid-cols-2 gap-2 text-sm">

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { X, Check, ArrowLeftRight, DollarSign, Loader2, Edit, RefreshCcw, History } from 'lucide-react';
import { X, Check, ArrowLeftRight, DollarSign, Loader2, Edit, RefreshCcw, History, AlertTriangle } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useToast } from '../contexts/ToastContext';
import { Trade, TradeHistoryEntry, getTradeVersionHistory } from '../services/tradesService';
@@ -222,6 +222,18 @@ export default function TradeDetail({
</div>
) : (
<div className="space-y-4">
{/* Invalid Trade Warning */}
{trade.status === 'pending' && !trade.is_valid && (
<div className="bg-red-900/30 border border-red-600 rounded-lg p-3 flex items-start gap-2">
<AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
<div>
<h4 className="font-semibold text-red-400 text-sm">Trade No Longer Valid</h4>
<p className="text-red-200 text-xs mt-1">
One or more cards in this trade are no longer available in the required quantities. This trade cannot be accepted until it is updated.
</p>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* Your Side */}
<div className="space-y-3">
@@ -367,8 +379,9 @@ export default function TradeDetail({
<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"
disabled={processing || !trade.is_valid}
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 disabled:cursor-not-allowed rounded-lg font-medium transition"
title={!trade.is_valid ? 'This trade is no longer valid' : ''}
>
{processing ? (
<Loader2 className="animate-spin" size={18} />
@@ -431,8 +444,9 @@ export default function TradeDetail({
<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"
disabled={processing || !trade.is_valid}
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 disabled:cursor-not-allowed rounded-lg font-medium transition"
title={!trade.is_valid ? 'This trade is no longer valid' : ''}
>
{processing ? (
<Loader2 className="animate-spin" size={18} />

View File

@@ -18,6 +18,7 @@ export interface Trade {
updated_at: string | null;
version: number;
editor_id: string | null;
is_valid: boolean;
user1?: { username: string | null };
user2?: { username: string | null };
items?: TradeItem[];
@@ -160,6 +161,25 @@ export async function createTrade(params: CreateTradeParams): Promise<Trade> {
// Accept a trade (executes the card transfer)
export async function acceptTrade(tradeId: string): Promise<boolean> {
// First check if the trade is valid
const { data: trade, error: tradeError } = await supabase
.from('trades')
.select('is_valid, status')
.eq('id', tradeId)
.single();
if (tradeError) throw tradeError;
// Prevent accepting invalid trades
if (!trade.is_valid) {
throw new Error('This trade is no longer valid. One or more cards are no longer available in the required quantities.');
}
// Prevent accepting non-pending trades
if (trade.status !== 'pending') {
throw new Error('This trade has already been processed.');
}
const { data, error } = await supabase.rpc('execute_trade', {
trade_id: tradeId,
});

View File

@@ -0,0 +1,101 @@
-- Add is_valid column to trades table
ALTER TABLE public.trades
ADD COLUMN IF NOT EXISTS is_valid BOOLEAN DEFAULT true;
-- Create index for filtering by validity
CREATE INDEX IF NOT EXISTS idx_trades_is_valid ON public.trades(is_valid);
-- Function to validate if a trade can still be executed based on current collections
CREATE OR REPLACE FUNCTION public.validate_trade(p_trade_id uuid)
RETURNS boolean
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
DECLARE
v_item RECORD;
v_collection_quantity integer;
BEGIN
-- Check each item in the trade
FOR v_item IN
SELECT owner_id, card_id, quantity
FROM public.trade_items
WHERE trade_id = p_trade_id
LOOP
-- Get the quantity of this card in the owner's collection
SELECT COALESCE(quantity, 0) INTO v_collection_quantity
FROM public.collections
WHERE user_id = v_item.owner_id
AND card_id = v_item.card_id;
-- If owner doesn't have enough of this card, trade is invalid
IF v_collection_quantity < v_item.quantity THEN
RETURN false;
END IF;
END LOOP;
-- All items are available, trade is valid
RETURN true;
END;
$$;
-- Function to check and update validity of affected trades when collections change
CREATE OR REPLACE FUNCTION public.update_affected_trades_validity()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
DECLARE
v_user_id uuid;
v_card_id text;
v_trade RECORD;
v_is_valid boolean;
BEGIN
-- Get the user_id and card_id from the changed row
IF (TG_OP = 'DELETE') THEN
v_user_id := OLD.user_id;
v_card_id := OLD.card_id;
ELSE
v_user_id := NEW.user_id;
v_card_id := NEW.card_id;
END IF;
-- Find all pending trades that involve this card from this user
FOR v_trade IN
SELECT DISTINCT t.id
FROM public.trades t
JOIN public.trade_items ti ON ti.trade_id = t.id
WHERE t.status = 'pending'
AND ti.owner_id = v_user_id
AND ti.card_id = v_card_id
LOOP
-- Validate the trade
v_is_valid := public.validate_trade(v_trade.id);
-- Update the trade's validity
UPDATE public.trades
SET is_valid = v_is_valid,
updated_at = now()
WHERE id = v_trade.id;
END LOOP;
IF (TG_OP = 'DELETE') THEN
RETURN OLD;
ELSE
RETURN NEW;
END IF;
END;
$$;
-- Create trigger to auto-update trade validity when collections change
CREATE TRIGGER update_trades_on_collection_change
AFTER UPDATE OR DELETE ON public.collections
FOR EACH ROW
EXECUTE FUNCTION public.update_affected_trades_validity();
-- Add comment
COMMENT ON COLUMN public.trades.is_valid IS 'Indicates if the trade can still be executed based on current collections. Auto-updated when collections change.';
-- Initial validation: set is_valid for all existing pending trades
UPDATE public.trades
SET is_valid = public.validate_trade(id)
WHERE status = 'pending';