@@ -28,6 +28,8 @@ const tableDataCellClassName = cn(
2828const PlayersRankingPanel = ( { playersCount, ranking } ) => {
2929 const currentUserClanId = useSelector ( currentUserClanIdSelector ) ;
3030
31+ const rankingItems = ranking ?. entries || [ ] ;
32+
3133 return (
3234 < div className = "bg-white shadow-sm p-3 rounded-lg overflow-auto" >
3335 < div className = "my-2" >
@@ -37,85 +39,86 @@ const PlayersRankingPanel = ({ playersCount, ranking }) => {
3739 .
3840 </ p >
3941 ) : (
40- < div
41- className = { cn (
42- 'd-flex flex-column flex-grow-1 postion-relative py-2 mh-100 rounded-left' ,
43- ) }
44- >
45- < div className = "d-flex justify-content-between border-bottom border-dark pb-2 px-3" >
46- < span className = "font-weight-bold" > { i18next . t ( 'Ranking' ) } </ span >
47- </ div >
48- < div className = "d-flex cb-overflow-x-auto" >
49- < table className = "table table-striped cb-custom-event-table m-1" >
50- < thead >
51- < tr >
52- < th className = "p-1 pl-4 font-weight-light border-0" >
53- { i18next . t ( 'User' ) }
54- </ th >
55- < th className = "p-1 pl-4 font-weight-light border-0" >
56- { i18next . t ( 'Clan' ) }
57- </ th >
58- < th className = "p-1 pl-4 font-weight-light border-0" >
59- { i18next . t ( 'Score' ) }
60- </ th >
61- < th className = "p-1 pl-4 font-weight-light border-0" >
62- { i18next . t ( 'Place' ) }
63- </ th >
64- </ tr >
65- </ thead >
66- < tbody >
67- { ranking ?. entries ?. map ( item => (
68- < React . Fragment key = { item . id } >
69- { item . place > 3 ? (
70- < >
71- < tr className = "cb-custom-event-empty-space-tr" />
42+ rankingItems . length !== 0 && (
43+ < div
44+ className = { cn (
45+ 'd-flex flex-column flex-grow-1 postion-relative py-2 mh-100 rounded-left' ,
46+ ) }
47+ >
48+ < div className = "d-flex justify-content-between border-bottom border-dark pb-2 px-3" >
49+ < span className = "font-weight-bold" > { i18next . t ( 'Ranking' ) } </ span >
50+ </ div >
51+ < div className = "d-flex cb-overflow-x-auto" >
52+ < table className = "table table-striped cb-custom-event-table m-1" >
53+ < thead >
54+ < tr >
55+ < th className = "p-1 pl-4 font-weight-light border-0" >
56+ { i18next . t ( 'User' ) }
57+ </ th >
58+ < th className = "p-1 pl-4 font-weight-light border-0" >
59+ { i18next . t ( 'Clan' ) }
60+ </ th >
61+ < th className = "p-1 pl-4 font-weight-light border-0" >
62+ { i18next . t ( 'Score' ) }
63+ </ th >
64+ < th className = "p-1 pl-4 font-weight-light border-0" >
65+ { i18next . t ( 'Place' ) }
66+ </ th >
67+ </ tr >
68+ </ thead >
69+ < tbody >
70+ { rankingItems . map ( item => (
71+ < React . Fragment key = { item . id } >
72+ { item . place > 3 ? (
73+ < >
74+ < tr className = "cb-custom-event-empty-space-tr" />
75+ < tr className = "cb-custom-event-empty-space-tr" />
76+ < tr className = "cb-custom-event-dots-space-tr" />
77+ </ >
78+ ) : (
7279 < tr className = "cb-custom-event-empty-space-tr" />
73- < tr className = "cb-custom-event-dots-space-tr" />
74- </ >
75- ) : (
76- < tr className = "cb-custom-event-empty-space-tr" />
77- ) }
78- < tr className = { getCustomEventTrClassName ( item , currentUserClanId ) } >
79- < td
80- style = { { borderTopLeftRadius : '0.5rem' , borderBottomLeftRadius : '0.5rem' } }
81- className = { tableDataCellClassName }
82- >
83- < div
84- title = { item ?. name }
85- className = "cb-custom-event-name"
86- style = { {
87- textOverflow : 'ellipsis' , overflow : 'hidden' , whiteSpace : 'nowrap' , maxWidth : '13ch' ,
88- } }
80+ ) }
81+ < tr className = { getCustomEventTrClassName ( item , currentUserClanId ) } >
82+ < td
83+ style = { { borderTopLeftRadius : '0.5rem' , borderBottomLeftRadius : '0.5rem' } }
84+ className = { tableDataCellClassName }
8985 >
90- { item ?. name . slice ( 0 , 11 ) + ( item ?. name . length > 11 ? '...' : '' ) }
91- </ div >
92- </ td >
93- < td className = { tableDataCellClassName } >
94- < div
95- title = { item ?. clan }
96- className = "cb-custom-event-name"
97- style = { {
98- textOverflow : 'ellipsis' , overflow : 'hidden' , whiteSpace : 'nowrap' , maxWidth : '15ch' ,
99- } }
86+ < div
87+ title = { item ?. name }
88+ className = "cb-custom-event-name"
89+ style = { {
90+ textOverflow : 'ellipsis' , overflow : 'hidden' , whiteSpace : 'nowrap' , maxWidth : '13ch' ,
91+ } }
92+ >
93+ { item ?. name . slice ( 0 , 11 ) + ( item ?. name . length > 11 ? '...' : '' ) }
94+ </ div >
95+ </ td >
96+ < td className = { tableDataCellClassName } >
97+ < div
98+ title = { item ?. clan }
99+ className = "cb-custom-event-name"
100+ style = { {
101+ textOverflow : 'ellipsis' , overflow : 'hidden' , whiteSpace : 'nowrap' , maxWidth : '15ch' ,
102+ } }
103+ >
104+ { item ?. clan ?. slice ( 0 , 11 ) + ( item ?. clan ?. length > 11 ? '...' : '' ) }
105+ </ div >
106+ </ td >
107+ < td className = { tableDataCellClassName } > { item . score } </ td >
108+ < td
109+ style = { { borderTopRightRadius : '0.5rem' , borderBottomRightRadius : '0.5rem' } }
110+ className = { tableDataCellClassName }
100111 >
101- { item ?. clan ?. slice ( 0 , 11 ) + ( item ?. clan ?. length > 11 ? '...' : '' ) }
102- </ div >
103- </ td >
104- < td className = { tableDataCellClassName } > { item . score } </ td >
105- < td
106- style = { { borderTopRightRadius : '0.5rem' , borderBottomRightRadius : '0.5rem' } }
107- className = { tableDataCellClassName }
108- >
109- { item . place }
110- </ td >
111- </ tr >
112- </ React . Fragment >
113- ) ) }
114- </ tbody >
115- </ table >
112+ { item . place }
113+ </ td >
114+ </ tr >
115+ </ React . Fragment >
116+ ) ) }
117+ </ tbody >
118+ </ table >
119+ </ div >
116120 </ div >
117- </ div >
118- ) }
121+ ) ) }
119122 </ div >
120123 < div className = "d-flex align-items-center flex-wrap justify-content-start" >
121124 < h6 className = "mb-2 mr-5 text-nowrap" >
0 commit comments