1490 lines
59 KiB
TypeScript
1490 lines
59 KiB
TypeScript
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 { useAuth } from '../contexts/AuthContext';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
import { supabase } from '../lib/supabase';
|
|
import {
|
|
getFriends,
|
|
getPendingRequests,
|
|
getSentRequests,
|
|
searchUsers,
|
|
sendFriendRequest,
|
|
acceptFriendRequest,
|
|
declineFriendRequest,
|
|
removeFriend,
|
|
Friend,
|
|
} from '../services/friendsService';
|
|
import {
|
|
getTrades,
|
|
getTradeHistory,
|
|
acceptTrade,
|
|
declineTrade,
|
|
cancelTrade,
|
|
Trade,
|
|
TradeItem,
|
|
} from '../services/tradesService';
|
|
import { getUserCollectionPaginated, getCardsByIds, getCollectionTotalValue } from '../services/api';
|
|
import { Card } from '../types';
|
|
import TradeCreator from './TradeCreator';
|
|
import TradeDetail from './TradeDetail';
|
|
import ConfirmModal from './ConfirmModal';
|
|
|
|
interface UserProfile {
|
|
id: string;
|
|
username: string | null;
|
|
collection_visibility: 'public' | 'friends' | 'private' | null;
|
|
}
|
|
|
|
interface CollectionItem {
|
|
card: Card;
|
|
quantity: number;
|
|
}
|
|
|
|
type Tab = 'browse' | 'friends' | 'trades' | 'profile';
|
|
type FriendsSubTab = 'list' | 'requests' | 'search';
|
|
type TradesSubTab = 'pending' | 'history';
|
|
|
|
const VISIBILITY_OPTIONS = [
|
|
{ value: 'public', label: 'Public', description: 'Anyone can view' },
|
|
{ value: 'friends', label: 'Friends', description: 'Friends only' },
|
|
{ value: 'private', label: 'Private', description: 'Only you' },
|
|
] as const;
|
|
|
|
const PAGE_SIZE = 50;
|
|
|
|
export default function Community() {
|
|
const { user } = useAuth();
|
|
const toast = useToast();
|
|
const [activeTab, setActiveTab] = useState<Tab>('browse');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Browse state
|
|
const [browseSearch, setBrowseSearch] = useState('');
|
|
const [publicUsers, setPublicUsers] = useState<UserProfile[]>([]);
|
|
const [selectedUser, setSelectedUser] = useState<UserProfile | null>(null);
|
|
const [selectedUserCollection, setSelectedUserCollection] = useState<CollectionItem[]>([]);
|
|
const [loadingCollection, setLoadingCollection] = useState(false);
|
|
const [isLoadingMoreUserCards, setIsLoadingMoreUserCards] = useState(false);
|
|
const [hasMoreUserCards, setHasMoreUserCards] = useState(false);
|
|
const [userCollectionOffset, setUserCollectionOffset] = useState(0);
|
|
const [userCollectionTotalCount, setUserCollectionTotalCount] = useState(0);
|
|
const [userCollectionTotalValue, setUserCollectionTotalValue] = useState<number>(0);
|
|
const [isLoadingUserTotalValue, setIsLoadingUserTotalValue] = useState(true);
|
|
const [showTradeCreator, setShowTradeCreator] = useState(false);
|
|
const [userCollectionSearch, setUserCollectionSearch] = useState('');
|
|
const [hoveredUserCard, setHoveredUserCard] = useState<Card | null>(null);
|
|
const [selectedUserCard, setSelectedUserCard] = useState<CollectionItem | null>(null);
|
|
const [userCardFaceIndex, setUserCardFaceIndex] = useState<Map<string, number>>(new Map());
|
|
const userCollectionObserverTarget = useRef<HTMLDivElement>(null);
|
|
|
|
// Friends state
|
|
const [friendsSubTab, setFriendsSubTab] = useState<FriendsSubTab>('list');
|
|
const [friends, setFriends] = useState<Friend[]>([]);
|
|
const [pendingRequests, setPendingRequests] = useState<Friend[]>([]);
|
|
const [sentRequests, setSentRequests] = useState<Friend[]>([]);
|
|
const [friendSearch, setFriendSearch] = useState('');
|
|
const [friendSearchResults, setFriendSearchResults] = useState<{ id: string; username: string | null }[]>([]);
|
|
const [searchingFriends, setSearchingFriends] = useState(false);
|
|
const [friendListFilter, setFriendListFilter] = useState('');
|
|
const [requestsFilter, setRequestsFilter] = useState('');
|
|
|
|
// Trades state
|
|
const [tradesSubTab, setTradesSubTab] = useState<TradesSubTab>('pending');
|
|
const [pendingTrades, setPendingTrades] = useState<Trade[]>([]);
|
|
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);
|
|
|
|
// Profile state
|
|
const [username, setUsername] = useState('');
|
|
const [collectionVisibility, setCollectionVisibility] = useState<'public' | 'friends' | 'private'>('private');
|
|
const [savingProfile, setSavingProfile] = useState(false);
|
|
|
|
// Confirm modal state
|
|
const [confirmModal, setConfirmModal] = useState<{
|
|
isOpen: boolean;
|
|
title: string;
|
|
message: string;
|
|
onConfirm: () => void;
|
|
variant: 'danger' | 'warning' | 'info' | 'success';
|
|
}>({ isOpen: false, title: '', message: '', onConfirm: () => {}, variant: 'danger' });
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
loadAllData();
|
|
}
|
|
}, [user]);
|
|
|
|
// ============ REALTIME SUBSCRIPTIONS ============
|
|
// Subscribe to trade changes
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
const tradesChannel = supabase
|
|
.channel('trades-changes')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: '*',
|
|
schema: 'public',
|
|
table: 'trades',
|
|
},
|
|
(payload: any) => {
|
|
// Filter for trades involving this user
|
|
const newData = payload.new || payload.old;
|
|
if (newData && (newData.user1_id === user.id || newData.user2_id === user.id)) {
|
|
console.log('Trade change:', payload);
|
|
loadTradesData();
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(tradesChannel);
|
|
};
|
|
}, [user]);
|
|
|
|
// Subscribe to friendship changes
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
const friendshipsChannel = supabase
|
|
.channel('friendships-changes')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: '*',
|
|
schema: 'public',
|
|
table: 'friendships',
|
|
},
|
|
(payload: any) => {
|
|
// Filter for friendships involving this user
|
|
const newData = payload.new || payload.old;
|
|
if (newData && (newData.requester_id === user.id || newData.addressee_id === user.id)) {
|
|
console.log('Friendship change:', payload);
|
|
loadFriendsData();
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(friendshipsChannel);
|
|
};
|
|
}, [user]);
|
|
|
|
// Subscribe to profile changes (for visibility updates)
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
const profilesChannel = supabase
|
|
.channel('profiles-changes')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: 'UPDATE',
|
|
schema: 'public',
|
|
table: 'profiles',
|
|
},
|
|
(payload: any) => {
|
|
console.log('Profile change:', payload);
|
|
// Reload public users if a profile's visibility changed
|
|
if (payload.new && payload.old && payload.new.collection_visibility !== payload.old.collection_visibility) {
|
|
loadPublicUsers();
|
|
}
|
|
// Reload own profile if it's the current user
|
|
if (payload.new && payload.new.id === user.id) {
|
|
loadProfile();
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(profilesChannel);
|
|
};
|
|
}, [user]);
|
|
|
|
// Subscribe to collection changes when viewing someone's collection
|
|
useEffect(() => {
|
|
if (!user || !selectedUser) return;
|
|
|
|
const collectionsChannel = supabase
|
|
.channel(`collections-${selectedUser.id}`)
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: '*',
|
|
schema: 'public',
|
|
table: 'collections',
|
|
},
|
|
(payload: any) => {
|
|
// Filter for the selected user's collections
|
|
const data = payload.new || payload.old;
|
|
if (data && data.user_id === selectedUser.id) {
|
|
console.log('Collection change for viewed user:', payload);
|
|
loadUserCollection(selectedUser.id);
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(collectionsChannel);
|
|
};
|
|
}, [user, selectedUser]);
|
|
|
|
// Helper function to check if a card has an actual back face
|
|
const isDoubleFaced = (card: Card) => {
|
|
const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
|
|
return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
|
|
};
|
|
|
|
// Helper function to get the current face index for a card
|
|
const getCurrentFaceIndex = (cardId: string) => {
|
|
return userCardFaceIndex.get(cardId) || 0;
|
|
};
|
|
|
|
// Helper function to get the image URI for a card
|
|
const getCardImageUri = (card: Card, faceIndex: number = 0) => {
|
|
if (isDoubleFaced(card) && card.card_faces) {
|
|
return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
|
|
}
|
|
return card.image_uris?.normal || card.image_uris?.small;
|
|
};
|
|
|
|
// Helper function to get the large image URI for hover preview
|
|
const getCardLargeImageUri = (card: Card, faceIndex: number = 0) => {
|
|
if (isDoubleFaced(card) && card.card_faces) {
|
|
return card.card_faces[faceIndex]?.image_uris?.large || card.card_faces[faceIndex]?.image_uris?.normal;
|
|
}
|
|
return card.image_uris?.large || card.image_uris?.normal;
|
|
};
|
|
|
|
// Toggle card face
|
|
const toggleCardFace = (cardId: string, totalFaces: number) => {
|
|
setUserCardFaceIndex(prev => {
|
|
const newMap = new Map(prev);
|
|
const currentIndex = prev.get(cardId) || 0;
|
|
const nextIndex = (currentIndex + 1) % totalFaces;
|
|
newMap.set(cardId, nextIndex);
|
|
return newMap;
|
|
});
|
|
};
|
|
|
|
const loadAllData = async () => {
|
|
if (!user) return;
|
|
setLoading(true);
|
|
try {
|
|
await Promise.all([
|
|
loadPublicUsers(),
|
|
loadFriendsData(),
|
|
loadTradesData(),
|
|
loadProfile(),
|
|
]);
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// ============ BROWSE FUNCTIONS ============
|
|
const loadPublicUsers = async () => {
|
|
const { data, error } = await supabase
|
|
.from('profiles')
|
|
.select('id, username, collection_visibility')
|
|
.eq('collection_visibility', 'public')
|
|
.neq('id', user?.id)
|
|
.order('username');
|
|
|
|
if (!error && data) {
|
|
setPublicUsers(data);
|
|
}
|
|
};
|
|
|
|
const loadUserCollection = async (userId: string) => {
|
|
setLoadingCollection(true);
|
|
setIsLoadingUserTotalValue(true);
|
|
setSelectedUserCollection([]);
|
|
setUserCollectionOffset(0);
|
|
|
|
try {
|
|
// Load paginated collection for display
|
|
const result = await getUserCollectionPaginated(userId, PAGE_SIZE, 0);
|
|
setUserCollectionTotalCount(result.totalCount);
|
|
setHasMoreUserCards(result.hasMore);
|
|
|
|
if (result.items.size === 0) {
|
|
setSelectedUserCollection([]);
|
|
setUserCollectionTotalValue(0);
|
|
setIsLoadingUserTotalValue(false);
|
|
return;
|
|
}
|
|
|
|
const cardIds = Array.from(result.items.keys());
|
|
const cards = await getCardsByIds(cardIds);
|
|
setSelectedUserCollection(cards.map((card) => ({
|
|
card,
|
|
quantity: result.items.get(card.id) || 0,
|
|
})));
|
|
setUserCollectionOffset(PAGE_SIZE);
|
|
|
|
// Calculate total value (lightweight query from database)
|
|
const totalValue = await getCollectionTotalValue(userId);
|
|
setUserCollectionTotalValue(totalValue);
|
|
} catch (error) {
|
|
console.error('Error loading collection:', error);
|
|
setSelectedUserCollection([]);
|
|
setUserCollectionTotalValue(0);
|
|
} finally {
|
|
setLoadingCollection(false);
|
|
setIsLoadingUserTotalValue(false);
|
|
}
|
|
};
|
|
|
|
// Load more cards for infinite scroll in user collection view
|
|
const loadMoreUserCards = useCallback(async () => {
|
|
if (!selectedUser || isLoadingMoreUserCards || !hasMoreUserCards) return;
|
|
|
|
try {
|
|
setIsLoadingMoreUserCards(true);
|
|
|
|
const result = await getUserCollectionPaginated(
|
|
selectedUser.id,
|
|
PAGE_SIZE,
|
|
userCollectionOffset
|
|
);
|
|
setHasMoreUserCards(result.hasMore);
|
|
|
|
if (result.items.size === 0) {
|
|
return;
|
|
}
|
|
|
|
const cardIds = Array.from(result.items.keys());
|
|
const cards = await getCardsByIds(cardIds);
|
|
|
|
const newCards = cards.map(card => ({
|
|
card,
|
|
quantity: result.items.get(card.id) || 0,
|
|
}));
|
|
|
|
setSelectedUserCollection(prev => [...prev, ...newCards]);
|
|
setUserCollectionOffset(prev => prev + PAGE_SIZE);
|
|
} catch (error) {
|
|
console.error('Error loading more cards:', error);
|
|
} finally {
|
|
setIsLoadingMoreUserCards(false);
|
|
}
|
|
}, [selectedUser, userCollectionOffset, hasMoreUserCards, isLoadingMoreUserCards]);
|
|
|
|
// Intersection Observer for infinite scroll in user collection view
|
|
useEffect(() => {
|
|
if (!selectedUser) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting && hasMoreUserCards && !isLoadingMoreUserCards) {
|
|
loadMoreUserCards();
|
|
}
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const currentTarget = userCollectionObserverTarget.current;
|
|
if (currentTarget) {
|
|
observer.observe(currentTarget);
|
|
}
|
|
|
|
return () => {
|
|
if (currentTarget) {
|
|
observer.unobserve(currentTarget);
|
|
}
|
|
};
|
|
}, [selectedUser, hasMoreUserCards, isLoadingMoreUserCards, loadMoreUserCards]);
|
|
|
|
// ============ FRIENDS FUNCTIONS ============
|
|
const loadFriendsData = async () => {
|
|
if (!user) return;
|
|
const [friendsData, pendingData, sentData] = await Promise.all([
|
|
getFriends(user.id),
|
|
getPendingRequests(user.id),
|
|
getSentRequests(user.id),
|
|
]);
|
|
setFriends(friendsData);
|
|
setPendingRequests(pendingData);
|
|
setSentRequests(sentData);
|
|
};
|
|
|
|
const handleSearchFriends = async () => {
|
|
if (!user || friendSearch.trim().length < 2) return;
|
|
setSearchingFriends(true);
|
|
try {
|
|
const results = await searchUsers(friendSearch, user.id);
|
|
setFriendSearchResults(results || []);
|
|
} catch (error) {
|
|
console.error('Error searching users:', error);
|
|
} finally {
|
|
setSearchingFriends(false);
|
|
}
|
|
};
|
|
|
|
const handleSendRequest = async (addresseeId: string) => {
|
|
if (!user) return;
|
|
try {
|
|
await sendFriendRequest(user.id, addresseeId);
|
|
setFriendSearchResults((prev) => prev.filter((u) => u.id !== addresseeId));
|
|
await loadFriendsData();
|
|
toast.success('Friend request sent!');
|
|
} catch (error) {
|
|
toast.error('Failed to send friend request');
|
|
}
|
|
};
|
|
|
|
const handleAcceptRequest = async (friendshipId: string) => {
|
|
try {
|
|
await acceptFriendRequest(friendshipId);
|
|
await loadFriendsData();
|
|
toast.success('Friend request accepted!');
|
|
} catch (error) {
|
|
toast.error('Failed to accept request');
|
|
}
|
|
};
|
|
|
|
const handleDeclineRequest = async (friendshipId: string) => {
|
|
try {
|
|
await declineFriendRequest(friendshipId);
|
|
await loadFriendsData();
|
|
toast.info('Friend request declined');
|
|
} catch (error) {
|
|
toast.error('Failed to decline request');
|
|
}
|
|
};
|
|
|
|
const handleRemoveFriend = (friendshipId: string, friendName: string) => {
|
|
setConfirmModal({
|
|
isOpen: true,
|
|
title: 'Remove Friend',
|
|
message: `Remove ${friendName} from your friends?`,
|
|
variant: 'danger',
|
|
onConfirm: async () => {
|
|
try {
|
|
await removeFriend(friendshipId);
|
|
await loadFriendsData();
|
|
toast.success('Friend removed');
|
|
} catch (error) {
|
|
toast.error('Failed to remove friend');
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const isAlreadyFriendOrPending = (userId: string) => {
|
|
return friends.some((f) => f.id === userId) ||
|
|
pendingRequests.some((f) => f.id === userId) ||
|
|
sentRequests.some((f) => f.id === userId);
|
|
};
|
|
|
|
// ============ TRADES FUNCTIONS ============
|
|
const loadTradesData = async () => {
|
|
if (!user) return;
|
|
const [pending, history] = await Promise.all([
|
|
getTrades(user.id).then((trades) => trades.filter((t) => t.status === 'pending')),
|
|
getTradeHistory(user.id),
|
|
]);
|
|
|
|
const allCardIds = new Set<string>();
|
|
[...pending, ...history].forEach((trade) => {
|
|
trade.items?.forEach((item) => allCardIds.add(item.card_id));
|
|
});
|
|
|
|
if (allCardIds.size > 0) {
|
|
const cards = await getCardsByIds(Array.from(allCardIds));
|
|
const cardMap = new Map<string, Card>();
|
|
cards.forEach((card) => cardMap.set(card.id, card));
|
|
setTradeCardDetails(cardMap);
|
|
}
|
|
|
|
setPendingTrades(pending);
|
|
setTradeHistory(history);
|
|
};
|
|
|
|
const handleAcceptTrade = async (tradeId: string) => {
|
|
setProcessingTradeId(tradeId);
|
|
try {
|
|
const success = await acceptTrade(tradeId);
|
|
if (success) {
|
|
await loadTradesData();
|
|
toast.success('Trade accepted! Cards exchanged.');
|
|
} else {
|
|
toast.error('Failed. Check your collection.');
|
|
}
|
|
} catch (error) {
|
|
toast.error('Error accepting trade');
|
|
} finally {
|
|
setProcessingTradeId(null);
|
|
}
|
|
};
|
|
|
|
const handleDeclineTrade = async (tradeId: string) => {
|
|
setProcessingTradeId(tradeId);
|
|
try {
|
|
await declineTrade(tradeId);
|
|
await loadTradesData();
|
|
toast.info('Trade declined');
|
|
} catch (error) {
|
|
toast.error('Error declining trade');
|
|
} finally {
|
|
setProcessingTradeId(null);
|
|
}
|
|
};
|
|
|
|
const handleCancelTrade = (tradeId: string) => {
|
|
setConfirmModal({
|
|
isOpen: true,
|
|
title: 'Cancel Trade',
|
|
message: 'Cancel this trade offer?',
|
|
variant: 'warning',
|
|
onConfirm: async () => {
|
|
setProcessingTradeId(tradeId);
|
|
try {
|
|
await cancelTrade(tradeId);
|
|
await loadTradesData();
|
|
toast.info('Trade cancelled');
|
|
} catch (error) {
|
|
toast.error('Error cancelling trade');
|
|
} finally {
|
|
setProcessingTradeId(null);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
// ============ PROFILE FUNCTIONS ============
|
|
const loadProfile = async () => {
|
|
if (!user) return;
|
|
const { data } = await supabase
|
|
.from('profiles')
|
|
.select('username, collection_visibility')
|
|
.eq('id', user.id)
|
|
.single();
|
|
|
|
if (data) {
|
|
setUsername(data.username || '');
|
|
setCollectionVisibility(data.collection_visibility || 'private');
|
|
}
|
|
};
|
|
|
|
const handleSaveProfile = async () => {
|
|
if (!user) return;
|
|
setSavingProfile(true);
|
|
try {
|
|
const { error } = await supabase
|
|
.from('profiles')
|
|
.upsert({
|
|
id: user.id,
|
|
username,
|
|
collection_visibility: collectionVisibility,
|
|
updated_at: new Date(),
|
|
});
|
|
|
|
if (error) throw error;
|
|
toast.success('Profile updated!');
|
|
} catch (error) {
|
|
toast.error('Failed to update profile');
|
|
} finally {
|
|
setSavingProfile(false);
|
|
}
|
|
};
|
|
|
|
// ============ 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 (
|
|
<div>
|
|
<p className="text-gray-400 text-xs mb-1">{label}:</p>
|
|
<p className="text-gray-500 text-xs">Gift</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<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);
|
|
return (
|
|
<div key={item.id} className="flex items-center gap-1 bg-gray-700 px-2 py-0.5 rounded text-xs">
|
|
<span className="truncate max-w-[100px]">{card?.name || 'Card'}</span>
|
|
{item.quantity > 1 && <span className="text-gray-400">x{item.quantity}</span>}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Loading state
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
|
|
<Loader2 className="animate-spin text-blue-500" size={48} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============ USER COLLECTION VIEW ============
|
|
if (selectedUser) {
|
|
const filteredUserCollection = selectedUserCollection.filter(({ card }) =>
|
|
card.name.toLowerCase().includes(userCollectionSearch.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div className="relative bg-gray-900 text-white min-h-screen">
|
|
<div className="max-w-7xl mx-auto p-3 sm:p-6">
|
|
{/* Header with Back and Trade buttons */}
|
|
<div className="flex items-center justify-between gap-2 mb-4 md:mb-6">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser(null);
|
|
setSelectedUserCollection([]);
|
|
setUserCollectionSearch('');
|
|
setSelectedUserCard(null);
|
|
setHoveredUserCard(null);
|
|
}}
|
|
className="flex items-center gap-1 text-blue-400 hover:text-blue-300 text-sm"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
<span>Back</span>
|
|
</button>
|
|
<h1 className="text-2xl md:text-3xl font-bold truncate flex-1 text-center">{selectedUser.username}'s Collection</h1>
|
|
<button
|
|
onClick={() => setShowTradeCreator(true)}
|
|
className="flex items-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm whitespace-nowrap"
|
|
>
|
|
<ArrowLeftRight size={16} />
|
|
<span className="hidden sm:inline">Propose Trade</span>
|
|
<span className="sm:hidden">Trade</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search input */}
|
|
<div className="mb-8">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="text"
|
|
value={userCollectionSearch}
|
|
onChange={(e) => setUserCollectionSearch(e.target.value)}
|
|
placeholder="Search cards by name, type, or text..."
|
|
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Collection */}
|
|
<div>
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
|
|
<h2 className="text-xl font-semibold">
|
|
{userCollectionSearch
|
|
? `Found ${filteredUserCollection.length} card(s)`
|
|
: `Cards (${selectedUserCollection.length} unique, ${selectedUserCollection.reduce((acc, c) => acc + c.quantity, 0)} total)`
|
|
}
|
|
</h2>
|
|
{/* Collection Value Summary */}
|
|
<div className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
|
|
<div className="text-xs text-gray-400 mb-0.5">
|
|
{userCollectionSearch ? 'Filtered Value' : 'Total Collection Value'}
|
|
</div>
|
|
<div className="text-lg font-bold text-green-400">
|
|
{isLoadingUserTotalValue ? (
|
|
<Loader2 className="animate-spin" size={20} />
|
|
) : userCollectionSearch ? (
|
|
// For search results, calculate from filtered collection
|
|
`$${filteredUserCollection.reduce((total, { card, quantity }) => {
|
|
const price = card.prices?.usd ? parseFloat(card.prices.usd) : 0;
|
|
return total + (price * quantity);
|
|
}, 0).toFixed(2)}`
|
|
) : (
|
|
// For full collection, use pre-calculated total
|
|
`$${userCollectionTotalValue.toFixed(2)}`
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{loadingCollection ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="animate-spin text-blue-500" size={48} />
|
|
</div>
|
|
) : selectedUserCollection.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-400">
|
|
<p className="text-lg">Empty collection</p>
|
|
</div>
|
|
) : filteredUserCollection.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-400">
|
|
<p className="text-lg mb-2">No cards found</p>
|
|
<p className="text-sm">Try a different search term</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-1.5 sm:gap-2">
|
|
{filteredUserCollection.map(({ card, quantity }) => {
|
|
const currentFaceIndex = getCurrentFaceIndex(card.id);
|
|
const isMultiFaced = isDoubleFaced(card);
|
|
const displayName = isMultiFaced && card.card_faces
|
|
? card.card_faces[currentFaceIndex]?.name || card.name
|
|
: card.name;
|
|
|
|
return (
|
|
<div
|
|
key={card.id}
|
|
className="relative group cursor-pointer"
|
|
onMouseEnter={() => setHoveredUserCard(card)}
|
|
onMouseLeave={() => setHoveredUserCard(null)}
|
|
onClick={() => setSelectedUserCard({ card, quantity })}
|
|
>
|
|
{/* Card thumbnail */}
|
|
<div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
|
|
<img
|
|
src={getCardImageUri(card, currentFaceIndex)}
|
|
alt={displayName}
|
|
className="w-full h-auto"
|
|
/>
|
|
{/* Quantity badge */}
|
|
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs sm:text-sm font-bold px-2 py-1 rounded-full shadow-lg">
|
|
x{quantity}
|
|
</div>
|
|
{/* Price badge */}
|
|
{card.prices?.usd && (
|
|
<div className="absolute bottom-1 left-1 bg-green-600 text-white text-[10px] sm:text-xs font-bold px-1.5 py-0.5 rounded shadow-lg">
|
|
${card.prices.usd}
|
|
</div>
|
|
)}
|
|
{/* Flip button for double-faced cards */}
|
|
{isMultiFaced && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleCardFace(card.id, card.card_faces!.length);
|
|
}}
|
|
className="absolute bottom-1 right-1 bg-purple-600 hover:bg-purple-700 text-white p-1 rounded-full shadow-lg transition-all"
|
|
title="Flip card"
|
|
>
|
|
<RefreshCw size={12} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Card name below thumbnail */}
|
|
<div className="mt-1 text-xs text-center truncate px-1">
|
|
{displayName}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Infinite scroll loading indicator */}
|
|
{!userCollectionSearch && isLoadingMoreUserCards && (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="animate-spin text-blue-500" size={32} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Observer target for infinite scroll */}
|
|
{!userCollectionSearch && hasMoreUserCards && !isLoadingMoreUserCards && (
|
|
<div ref={userCollectionObserverTarget} className="h-20" />
|
|
)}
|
|
|
|
{/* End of collection indicator */}
|
|
{!userCollectionSearch && !hasMoreUserCards && selectedUserCollection.length > 0 && (
|
|
<div className="text-center py-8 text-gray-500 text-sm">
|
|
End of collection • {userCollectionTotalCount} total cards
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hover Card Preview - desktop only, only show if no card is selected */}
|
|
{hoveredUserCard && !selectedUserCard && (() => {
|
|
const currentFaceIndex = getCurrentFaceIndex(hoveredUserCard.id);
|
|
const isMultiFaced = isDoubleFaced(hoveredUserCard);
|
|
const currentFace = isMultiFaced && hoveredUserCard.card_faces
|
|
? hoveredUserCard.card_faces[currentFaceIndex]
|
|
: null;
|
|
|
|
const displayName = currentFace?.name || hoveredUserCard.name;
|
|
const displayTypeLine = currentFace?.type_line || hoveredUserCard.type_line;
|
|
const displayOracleText = currentFace?.oracle_text || hoveredUserCard.oracle_text;
|
|
|
|
return (
|
|
<div className="hidden lg:block fixed top-1/2 right-8 transform -translate-y-1/2 z-30 pointer-events-none">
|
|
<div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
|
|
<div className="relative">
|
|
<img
|
|
src={getCardLargeImageUri(hoveredUserCard, currentFaceIndex)}
|
|
alt={displayName}
|
|
className="w-full h-auto rounded-lg shadow-lg"
|
|
/>
|
|
{isMultiFaced && (
|
|
<div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
|
Face {currentFaceIndex + 1}/{hoveredUserCard.card_faces!.length}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 space-y-2">
|
|
<h3 className="text-xl font-bold">{displayName}</h3>
|
|
<p className="text-sm text-gray-400">{displayTypeLine}</p>
|
|
{displayOracleText && (
|
|
<p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
|
|
{displayOracleText}
|
|
</p>
|
|
)}
|
|
{hoveredUserCard.prices?.usd && (
|
|
<div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
|
|
${hoveredUserCard.prices.usd}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* Card Detail Panel - slides in from right */}
|
|
{selectedUserCard && (() => {
|
|
const currentFaceIndex = getCurrentFaceIndex(selectedUserCard.card.id);
|
|
const isMultiFaced = isDoubleFaced(selectedUserCard.card);
|
|
const currentFace = isMultiFaced && selectedUserCard.card.card_faces
|
|
? selectedUserCard.card.card_faces[currentFaceIndex]
|
|
: null;
|
|
|
|
const displayName = currentFace?.name || selectedUserCard.card.name;
|
|
const displayTypeLine = currentFace?.type_line || selectedUserCard.card.type_line;
|
|
const displayOracleText = currentFace?.oracle_text || selectedUserCard.card.oracle_text;
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300"
|
|
onClick={() => setSelectedUserCard(null)}
|
|
/>
|
|
|
|
{/* Sliding Panel */}
|
|
<div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-[120] overflow-y-auto animate-slide-in-right">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={() => setSelectedUserCard(null)}
|
|
className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[130] shadow-lg"
|
|
aria-label="Close"
|
|
>
|
|
<X size={24} className="md:w-5 md:h-5" />
|
|
</button>
|
|
|
|
<div className="p-4 sm:p-6">
|
|
{/* Card Image */}
|
|
<div className="relative mb-4 max-w-sm mx-auto">
|
|
<img
|
|
src={getCardLargeImageUri(selectedUserCard.card, currentFaceIndex)}
|
|
alt={displayName}
|
|
className="w-full h-auto rounded-lg shadow-lg"
|
|
/>
|
|
{isMultiFaced && (
|
|
<>
|
|
<div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
|
Face {currentFaceIndex + 1}/{selectedUserCard.card.card_faces!.length}
|
|
</div>
|
|
<button
|
|
onClick={() => toggleCardFace(selectedUserCard.card.id, selectedUserCard.card.card_faces!.length)}
|
|
className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
|
|
title="Flip card"
|
|
>
|
|
<RefreshCw size={20} />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Card Info */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h2 className="text-xl md:text-2xl font-bold text-white mb-2">{displayName}</h2>
|
|
<p className="text-xs sm:text-sm text-gray-400">{displayTypeLine}</p>
|
|
</div>
|
|
|
|
{displayOracleText && (
|
|
<div className="border-t border-gray-700 pt-3">
|
|
<p className="text-sm text-gray-300">{displayOracleText}</p>
|
|
</div>
|
|
)}
|
|
|
|
{selectedUserCard.card.prices?.usd && (
|
|
<div className="border-t border-gray-700 pt-3">
|
|
<div className="text-lg text-green-400 font-semibold">
|
|
${selectedUserCard.card.prices.usd} each
|
|
</div>
|
|
<div className="text-sm text-gray-400">
|
|
Total value: ${(parseFloat(selectedUserCard.card.prices.usd) * selectedUserCard.quantity).toFixed(2)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quantity Display */}
|
|
<div className="border-t border-gray-700 pt-3">
|
|
<h3 className="text-lg font-semibold mb-3">Quantity in Collection</h3>
|
|
<div className="flex items-center justify-center bg-gray-900 rounded-lg p-4">
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold">{selectedUserCard.quantity}</div>
|
|
<div className="text-xs text-gray-400">copies</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
})()}
|
|
|
|
{showTradeCreator && (
|
|
<TradeCreator
|
|
receiverId={selectedUser.id}
|
|
receiverUsername={selectedUser.username || 'Unknown'}
|
|
receiverCollection={selectedUserCollection}
|
|
onClose={() => setShowTradeCreator(false)}
|
|
onTradeCreated={() => {
|
|
setShowTradeCreator(false);
|
|
loadTradesData();
|
|
toast.success('Trade proposal sent!');
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const filteredPublicUsers = publicUsers.filter(
|
|
(u) => !browseSearch || u.username?.toLowerCase().includes(browseSearch.toLowerCase())
|
|
);
|
|
|
|
// ============ MAIN VIEW ============
|
|
return (
|
|
<div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Community</h1>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide mb-4 md:mb-6">
|
|
{[
|
|
{ id: 'browse' as Tab, label: 'Browse', icon: Globe },
|
|
{ id: 'friends' as Tab, label: `Friends`, count: friends.length, icon: Users },
|
|
{ id: 'trades' as Tab, label: `Trades`, count: pendingTrades.length, icon: ArrowLeftRight },
|
|
{ id: 'profile' as Tab, label: 'Profile', icon: Settings },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition flex-shrink-0 ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-800 text-gray-300 active:bg-gray-700'
|
|
}`}
|
|
>
|
|
<tab.icon size={16} />
|
|
<span>{tab.label}</span>
|
|
{tab.count !== undefined && tab.count > 0 && (
|
|
<span className={`text-xs px-1.5 py-0.5 rounded-full ${
|
|
activeTab === tab.id ? 'bg-blue-500' : 'bg-gray-700'
|
|
}`}>
|
|
{tab.count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ============ BROWSE TAB ============ */}
|
|
{activeTab === 'browse' && (
|
|
<div className="space-y-3">
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
|
<input
|
|
type="text"
|
|
value={browseSearch}
|
|
onChange={(e) => setBrowseSearch(e.target.value)}
|
|
placeholder="Search users..."
|
|
className="w-full pl-10 pr-4 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Users List */}
|
|
{filteredPublicUsers.length === 0 ? (
|
|
<p className="text-gray-400 text-center py-8 text-sm">No public collections</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{filteredPublicUsers.map((userProfile) => (
|
|
<button
|
|
key={userProfile.id}
|
|
onClick={() => { setSelectedUser(userProfile); loadUserCollection(userProfile.id); }}
|
|
className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<Globe size={18} className="text-green-400 flex-shrink-0" />
|
|
<span className="font-medium truncate">{userProfile.username || 'Unknown'}</span>
|
|
</div>
|
|
<Eye size={18} className="text-gray-400 flex-shrink-0" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Friends shortcut */}
|
|
{friends.length > 0 && (
|
|
<div className="pt-3 border-t border-gray-800">
|
|
<p className="text-xs text-gray-500 mb-2">Your friends</p>
|
|
<div className="space-y-2">
|
|
{friends.slice(0, 3).map((friend) => (
|
|
<button
|
|
key={friend.id}
|
|
onClick={() => {
|
|
setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
|
|
loadUserCollection(friend.id);
|
|
}}
|
|
className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<Users size={18} className="text-blue-400 flex-shrink-0" />
|
|
<span className="font-medium truncate">{friend.username || 'Unknown'}</span>
|
|
</div>
|
|
<Eye size={18} className="text-gray-400 flex-shrink-0" />
|
|
</button>
|
|
))}
|
|
{friends.length > 3 && (
|
|
<button
|
|
onClick={() => setActiveTab('friends')}
|
|
className="w-full text-center text-blue-400 text-sm py-2"
|
|
>
|
|
View all {friends.length} friends
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ============ FRIENDS TAB ============ */}
|
|
{activeTab === 'friends' && (
|
|
<div className="space-y-3">
|
|
{/* Sub tabs */}
|
|
<div className="flex gap-1">
|
|
{[
|
|
{ id: 'list' as FriendsSubTab, label: 'List' },
|
|
{ id: 'requests' as FriendsSubTab, label: 'Requests', count: pendingRequests.length },
|
|
{ id: 'search' as FriendsSubTab, label: 'Add' },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setFriendsSubTab(tab.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm flex-1 ${
|
|
friendsSubTab === tab.id ? 'bg-blue-600' : 'bg-gray-800 active:bg-gray-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{tab.count !== undefined && tab.count > 0 && (
|
|
<span className="ml-1 text-xs">({tab.count})</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Friends List */}
|
|
{friendsSubTab === 'list' && (
|
|
<div className="space-y-3">
|
|
{/* Search input */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
|
|
<input
|
|
type="text"
|
|
value={friendListFilter}
|
|
onChange={(e) => setFriendListFilter(e.target.value)}
|
|
placeholder="Search friends..."
|
|
className="w-full pl-9 pr-8 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
{friendListFilter && (
|
|
<button
|
|
onClick={() => setFriendListFilter('')}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{friends.length === 0 ? (
|
|
<p className="text-gray-400 text-center py-8 text-sm">No friends yet</p>
|
|
) : friends.filter((f) =>
|
|
!friendListFilter || f.username?.toLowerCase().includes(friendListFilter.toLowerCase())
|
|
).length === 0 ? (
|
|
<p className="text-gray-400 text-center py-8 text-sm">No friends match "{friendListFilter}"</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{friends
|
|
.filter((f) => !friendListFilter || f.username?.toLowerCase().includes(friendListFilter.toLowerCase()))
|
|
.map((friend) => (
|
|
<div key={friend.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
|
|
<span className="font-medium truncate">{friend.username || 'Unknown'}</span>
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
|
|
loadUserCollection(friend.id);
|
|
}}
|
|
className="p-2 text-blue-400 active:bg-blue-400/20 rounded-lg"
|
|
>
|
|
<Eye size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleRemoveFriend(friend.friendshipId, friend.username || 'user')}
|
|
className="p-2 text-red-400 active:bg-red-400/20 rounded-lg"
|
|
>
|
|
<UserMinus size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Requests */}
|
|
{friendsSubTab === 'requests' && (
|
|
<div className="space-y-3">
|
|
{/* Search input */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
|
|
<input
|
|
type="text"
|
|
value={requestsFilter}
|
|
onChange={(e) => setRequestsFilter(e.target.value)}
|
|
placeholder="Search requests..."
|
|
className="w-full pl-9 pr-8 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
{requestsFilter && (
|
|
<button
|
|
onClick={() => setRequestsFilter('')}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{(() => {
|
|
const filteredPending = pendingRequests.filter((r) =>
|
|
!requestsFilter || r.username?.toLowerCase().includes(requestsFilter.toLowerCase())
|
|
);
|
|
const filteredSent = sentRequests.filter((r) =>
|
|
!requestsFilter || r.username?.toLowerCase().includes(requestsFilter.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{filteredPending.length > 0 && (
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-2">Received</p>
|
|
<div className="space-y-2">
|
|
{filteredPending.map((req) => (
|
|
<div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
|
|
<span className="font-medium truncate">{req.username || 'Unknown'}</span>
|
|
<div className="flex gap-1">
|
|
<button onClick={() => handleAcceptRequest(req.friendshipId)} className="p-2 text-green-400 active:bg-green-400/20 rounded-lg">
|
|
<Check size={18} />
|
|
</button>
|
|
<button onClick={() => handleDeclineRequest(req.friendshipId)} className="p-2 text-red-400 active:bg-red-400/20 rounded-lg">
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{filteredSent.length > 0 && (
|
|
<div>
|
|
<p className="text-xs text-gray-500 mb-2">Sent</p>
|
|
<div className="space-y-2">
|
|
{filteredSent.map((req) => (
|
|
<div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<Send size={14} className="text-gray-500" />
|
|
<span className="font-medium truncate">{req.username || 'Unknown'}</span>
|
|
</div>
|
|
<span className="text-xs text-yellow-500">Pending</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{pendingRequests.length === 0 && sentRequests.length === 0 && (
|
|
<p className="text-gray-400 text-center py-8 text-sm">No requests</p>
|
|
)}
|
|
|
|
{(pendingRequests.length > 0 || sentRequests.length > 0) &&
|
|
filteredPending.length === 0 && filteredSent.length === 0 && (
|
|
<p className="text-gray-400 text-center py-8 text-sm">No requests match "{requestsFilter}"</p>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
|
|
{/* Search/Add */}
|
|
{friendsSubTab === 'search' && (
|
|
<div className="space-y-3">
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={friendSearch}
|
|
onChange={(e) => setFriendSearch(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearchFriends()}
|
|
placeholder="Username..."
|
|
className="flex-1 px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
|
|
/>
|
|
<button
|
|
onClick={handleSearchFriends}
|
|
disabled={searchingFriends || friendSearch.trim().length < 2}
|
|
className="px-4 py-2.5 bg-blue-600 disabled:bg-gray-600 rounded-lg"
|
|
>
|
|
{searchingFriends ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
|
|
</button>
|
|
</div>
|
|
|
|
{friendSearchResults.length > 0 && (
|
|
<div className="space-y-2">
|
|
{friendSearchResults.map((result) => (
|
|
<div key={result.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
|
|
<span className="font-medium truncate">{result.username || 'Unknown'}</span>
|
|
{isAlreadyFriendOrPending(result.id) ? (
|
|
<span className="text-xs text-gray-500">Connected</span>
|
|
) : (
|
|
<button
|
|
onClick={() => handleSendRequest(result.id)}
|
|
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 rounded-lg text-sm"
|
|
>
|
|
<UserPlus size={14} />
|
|
Add
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ============ TRADES TAB ============ */}
|
|
{activeTab === 'trades' && (
|
|
<div className="space-y-3">
|
|
{/* Sub tabs */}
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => setTradesSubTab('pending')}
|
|
className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
|
|
tradesSubTab === 'pending' ? 'bg-blue-600' : 'bg-gray-800'
|
|
}`}
|
|
>
|
|
<Clock size={14} />
|
|
Pending ({pendingTrades.length})
|
|
</button>
|
|
<button
|
|
onClick={() => setTradesSubTab('history')}
|
|
className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
|
|
tradesSubTab === 'history' ? 'bg-blue-600' : 'bg-gray-800'
|
|
}`}
|
|
>
|
|
<History size={14} />
|
|
History
|
|
</button>
|
|
</div>
|
|
|
|
{/* Trades List */}
|
|
{(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).length === 0 ? (
|
|
<p className="text-gray-400 text-center py-8 text-sm">
|
|
{tradesSubTab === 'pending' ? 'No pending trades' : 'No history'}
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).map((trade) => {
|
|
const isUser1 = trade.user1_id === user?.id;
|
|
const myUserId = user?.id || '';
|
|
const otherUserId = isUser1 ? trade.user2_id : trade.user1_id;
|
|
const otherUser = isUser1 ? trade.user2 : trade.user1;
|
|
const statusColors: Record<string, string> = {
|
|
accepted: 'text-green-400',
|
|
declined: 'text-red-400',
|
|
cancelled: 'text-gray-400',
|
|
pending: 'text-yellow-400',
|
|
};
|
|
|
|
// Both users can view details for pending trades
|
|
const canViewDetails = trade.status === 'pending';
|
|
|
|
return (
|
|
<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">
|
|
<ArrowLeftRight size={16} className="text-blue-400 flex-shrink-0" />
|
|
<span className="text-sm truncate">
|
|
With: <strong>{otherUser?.username}</strong>
|
|
</span>
|
|
</div>
|
|
<span className={`text-xs capitalize ${statusColors[trade.status]}`}>
|
|
{trade.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Items */}
|
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
|
{renderTradeItems(trade.items, myUserId, 'You Give')}
|
|
{renderTradeItems(trade.items, otherUserId, 'You Get')}
|
|
</div>
|
|
|
|
{canViewDetails && (
|
|
<p className="text-xs text-blue-400 text-center pt-1">
|
|
Tap to view details
|
|
</p>
|
|
)}
|
|
|
|
{/* Actions - Allow any user to cancel pending trade */}
|
|
{tradesSubTab === 'pending' && (
|
|
<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}
|
|
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-gray-700 rounded-lg text-sm"
|
|
>
|
|
<X size={14} /> Cancel
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ============ PROFILE TAB ============ */}
|
|
{activeTab === 'profile' && (
|
|
<div className="space-y-4 max-w-md">
|
|
{/* Username */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1.5">Username</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
|
|
placeholder="Your username"
|
|
/>
|
|
</div>
|
|
|
|
{/* Visibility */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1.5">Collection Visibility</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{VISIBILITY_OPTIONS.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => setCollectionVisibility(option.value)}
|
|
className={`p-3 rounded-lg border-2 transition text-center ${
|
|
collectionVisibility === option.value
|
|
? 'border-blue-500 bg-blue-500/10'
|
|
: 'border-gray-700 bg-gray-800 active:border-gray-600'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-sm">{option.label}</div>
|
|
<div className="text-xs text-gray-400 mt-0.5">{option.description}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save */}
|
|
<button
|
|
onClick={handleSaveProfile}
|
|
disabled={savingProfile}
|
|
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 py-3 rounded-lg font-medium"
|
|
>
|
|
{savingProfile ? <Loader2 className="animate-spin" size={18} /> : <><Save size={18} /> Save</>}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Trade Detail Modal */}
|
|
{selectedTrade && (
|
|
<TradeDetail
|
|
trade={selectedTrade}
|
|
onClose={() => setSelectedTrade(null)}
|
|
onAccept={handleAcceptTrade}
|
|
onDecline={handleDeclineTrade}
|
|
onTradeUpdated={() => {
|
|
setSelectedTrade(null);
|
|
loadTradesData();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Confirm Modal */}
|
|
<ConfirmModal
|
|
isOpen={confirmModal.isOpen}
|
|
onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
|
|
onConfirm={confirmModal.onConfirm}
|
|
title={confirmModal.title}
|
|
message={confirmModal.message}
|
|
variant={confirmModal.variant}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|