11import { useVirtualizer } from '@tanstack/react-virtual'
22import i18n from 'i18next'
3- import { ChevronRight } from 'lucide-react'
43import { useRef , useState } from 'react'
54import { useTranslation } from 'react-i18next'
6- import { Link } from 'react-router'
5+ import { useNavigate } from 'react-router'
76import { CardLine } from '@/components/CardLine'
87import SearchInput from '@/components/filters/SearchInput'
98import { Button } from '@/components/ui/button'
109import { getCardByInternalId } from '@/lib/CardsDB'
1110import { getFilteredCards } from '@/lib/filters'
1211import { getCardNameByLang } from '@/lib/utils.ts'
13- import { useTradingPartners } from '@/services/trade/useTrade.ts'
1412import { tradableRarities } from '@/types'
1513
16- function TradeMatches ( ) {
14+ export default function TradeMatches ( ) {
1715 const { t } = useTranslation ( [ 'trade-matches' , 'common' ] )
16+ const navigate = useNavigate ( )
1817
1918 const scrollRef = useRef ( null )
2019 const [ search , setSearch ] = useState ( '' )
2120 const [ selectedCard , setSelectedCard ] = useState < number > ( )
22- const [ showResults , setShowResults ] = useState ( false )
2321 const cards = getFilteredCards ( { search, rarity : [ ...tradableRarities ] } , new Map ( ) )
2422 const card = selectedCard && getCardByInternalId ( selectedCard )
2523
26- const { data : tradingPartners , isLoading, isError } = useTradingPartners ( showResults , selectedCard )
27-
2824 const virtualizer = useVirtualizer ( {
2925 getScrollElement : ( ) => scrollRef . current ,
3026 count : cards . length ,
@@ -33,89 +29,38 @@ function TradeMatches() {
3329 } )
3430
3531 if ( selectedCard && ! card ) {
36- throw new Error ( 'Card selected was not found in the database!' )
37- }
38-
39- if ( ! showResults ) {
40- return (
41- < div className = "sm:w-sm mx-auto" >
42- < SearchInput setValue = { setSearch } />
43- < div ref = { scrollRef } className = "my-2 h-96 rounded border border-neutral-700 px-1 overflow-y-auto" >
44- < ul style = { { height : `${ virtualizer . getTotalSize ( ) } } } className = "relative" >
45- { virtualizer . getVirtualItems ( ) . map ( ( row ) => {
46- const c = cards [ row . index ]
47- return (
48- < button
49- type = "button"
50- key = { row . key }
51- className = "absolute top-0 left-0 w-full cursor-pointer"
52- style = { { height : `${ row . size } , transform : `translateY(${ row . start } } }
53- onClick = { ( ) => setSelectedCard ( ( prev ) => ( prev === c . internal_id ? undefined : c . internal_id ) ) }
54- >
55- < CardLine className = { `w-full ${ selectedCard === c . internal_id && 'bg-green-900' } } card_id = { c . card_id } />
56- </ button >
57- )
58- } ) }
59- </ ul >
60- </ div >
61- < div className = "flex gap-2" >
62- < Button
63- className = "w-1/2"
64- disabled = { ! selectedCard }
65- onClick = { ( ) => {
66- setShowResults ( true )
67- } }
68- >
69- { card ? t ( 'search.byCard' , { cardName : getCardNameByLang ( card , i18n . language ) } ) : t ( 'search.selectCard' ) }
70- </ Button >
71- < Button
72- className = "w-1/2"
73- onClick = { ( ) => {
74- setSelectedCard ( undefined )
75- setShowResults ( true )
76- } }
77- >
78- { t ( 'search.allCards' ) }
79- </ Button >
80- </ div >
81- </ div >
82- )
32+ throw new Error ( 'Selected card was not found in the database' )
8333 }
8434
85- if ( isLoading ) {
86- return (
87- < p className = "text-xl text-center py-8" >
88- { t ( 'common:loading' ) }
89- < br />
90- { t ( 'longOperation' ) }
91- </ p >
92- )
93- }
94-
95- if ( isError || ! tradingPartners ) {
96- return < p className = "text-xl text-center py-8" > { t ( 'common:error' ) } </ p >
97- }
98-
99- if ( tradingPartners . length === 0 ) {
100- return < p className = "text-xl text-center py-8" > { t ( 'noTradePartners' ) } </ p >
101- }
102-
103- const linkSuffix = selectedCard ? `?friend_card=${ selectedCard } : ''
10435 return (
105- < div className = "flex flex-col gap-4" >
106- { tradingPartners . map ( ( partner ) => (
107- < div key = { partner . friend_id } className = "max-w-md w-full flex justify-between items-center mx-auto px-4" >
108- < p className = "mr-2" > { partner . username } </ p >
109- < Link to = { `/trade/${ partner . friend_id } ${ linkSuffix } } >
110- < Button variant = "outline" className = "my-auto" >
111- { t ( 'viewTradePartner' , { tradeMatches : partner . trade_matches } ) }
112- < ChevronRight />
113- </ Button >
114- </ Link >
115- </ div >
116- ) ) }
36+ < div className = "sm:w-sm mx-auto" >
37+ < SearchInput setValue = { setSearch } />
38+ < div ref = { scrollRef } className = "my-2 h-96 rounded border border-neutral-700 px-1 overflow-y-auto" >
39+ < ul style = { { height : `${ virtualizer . getTotalSize ( ) } } } className = "relative" >
40+ { virtualizer . getVirtualItems ( ) . map ( ( row ) => {
41+ const c = cards [ row . index ]
42+ return (
43+ < button
44+ type = "button"
45+ key = { row . key }
46+ className = "absolute top-0 left-0 w-full cursor-pointer"
47+ style = { { height : `${ row . size } , transform : `translateY(${ row . start } } }
48+ onClick = { ( ) => setSelectedCard ( ( prev ) => ( prev === c . internal_id ? undefined : c . internal_id ) ) }
49+ >
50+ < CardLine className = { `w-full ${ selectedCard === c . internal_id && 'bg-green-900' } } card_id = { c . card_id } />
51+ </ button >
52+ )
53+ } ) }
54+ </ ul >
55+ </ div >
56+ < div className = "flex gap-2" >
57+ < Button className = "w-1/2" disabled = { ! selectedCard } onClick = { ( ) => navigate ( `/trade/matches/results?card_id=${ selectedCard } ) } >
58+ { card ? t ( 'search.byCard' , { cardName : getCardNameByLang ( card , i18n . language ) } ) : t ( 'search.selectCard' ) }
59+ </ Button >
60+ < Button className = "w-1/2" onClick = { ( ) => navigate ( '/trade/matches/results' ) } >
61+ { t ( 'search.allCards' ) }
62+ </ Button >
63+ </ div >
11764 </ div >
11865 )
11966}
120-
121- export default TradeMatches
0 commit comments