@@ -5,9 +5,16 @@ import LoadingIndicator from 'components/LoadingIndicator';
55import { config } from 'topcoder-react-utils' ;
66import cn from 'classnames' ;
77import _ from 'lodash' ;
8- import theme from './styles.scss' ;
98import PodiumSpot from '../PodiumSpot' ;
109
10+ import defaultTheme from './themes/styles.scss' ;
11+ import tco23Theme from './themes/tco23.scss' ;
12+
13+ const THEMES = {
14+ Default : defaultTheme ,
15+ TCO23 : tco23Theme ,
16+ } ;
17+
1118class ChallengeHistoryModal extends Component {
1219 constructor ( props ) {
1320 super ( props ) ;
@@ -34,31 +41,49 @@ class ChallengeHistoryModal extends Component {
3441 const challengesOrdered = _ . orderBy ( challenges , [ sortParam . field ] , [ sortParam . order ] ) ;
3542 const placeLabel = competitor [ 'member_profile_basic.handle' ] ? 'tco_leaderboard.placement' : 'place' ;
3643 const pointsLabel = competitor [ 'member_profile_basic.handle' ] ? 'tco_leaderboard.tco_points' : 'points' ;
44+ const styles = THEMES [ themeName ] || THEMES . Default ;
45+ /* eslint-disable no-confusing-arrow */
46+ const sortInner = ( ) => themeName === 'TCO23' ? (
47+ < svg width = "14" height = "12" viewBox = "0 0 14 12" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
48+ < path fillRule = "evenodd" clipRule = "evenodd" d = "M3.26721 0.267169C3.48786 0.046523 3.84559 0.046523 4.06624 0.267169L6.73291 2.93384C6.95355 3.15448 6.95355 3.51222 6.73291 3.73287C6.51226 3.95351 6.15452 3.95351 5.93388 3.73287L4.23173 2.03072V8.66668C4.23173 8.97873 3.97877 9.23168 3.66673 9.23168C3.35468 9.23168 3.10173 8.97873 3.10173 8.66668V2.03072L1.39957 3.73287C1.17893 3.95351 0.821189 3.95351 0.600543 3.73287C0.379897 3.51222 0.379897 3.15448 0.600543 2.93384L3.26721 0.267169ZM9.76839 3.33335C9.76839 3.02131 10.0214 2.76835 10.3334 2.76835C10.6454 2.76835 10.8984 3.02131 10.8984 3.33335V9.96932L12.6005 8.26717C12.8212 8.04652 13.1789 8.04652 13.3996 8.26717C13.6202 8.48781 13.6202 8.84555 13.3996 9.0662L10.7329 11.7329C10.5123 11.9535 10.1545 11.9535 9.93388 11.7329L7.26721 9.0662C7.04656 8.84555 7.04656 8.48781 7.26721 8.26717C7.48786 8.04652 7.84559 8.04652 8.06624 8.26717L9.76839 9.96932V3.33335Z" fill = "#767676" />
49+ </ svg >
50+ ) : (
51+ < div >
52+ < div className = { cn ( styles [ 'sort-up' ] , {
53+ active : sortParam . field === pointsLabel && sortParam . order === styles . asc ,
54+ } ) }
55+ />
56+ < div className = { cn ( styles [ 'sort-down' ] , {
57+ active : sortParam . field === pointsLabel && sortParam . order === styles . desc ,
58+ } ) }
59+ />
60+ </ div >
61+ ) ;
3762
3863 return (
39- < Modal onCancel = { onCancel } theme = { theme } >
64+ < Modal onCancel = { onCancel } theme = { THEMES [ themeName ] || THEMES . Default } >
4065 < h3 >
4166 Completed Challenges History
4267 </ h3 >
43- < div styleName = " podium-spot-wrapper" >
68+ < div className = { styles [ ' podium-spot-wrapper' ] } >
4469 < PodiumSpot
4570 competitor = { competitor }
4671 isCopilot = { isCopilot }
4772 isAlgo = { isAlgo }
4873 themeName = { themeName }
4974 />
5075 </ div >
51- < table styleName = " history-table" >
76+ < table className = { styles [ ' history-table' ] } >
5277 < thead >
5378 < tr >
5479 < th > Challenge Name</ th >
5580 {
5681 ! isCopilot ? (
5782 < th >
58- < div styleName = " header-table-content" >
83+ < div className = { styles [ ' header-table-content' ] } >
5984 < span > Placement</ span >
6085 < button
61- styleName = " sort-container"
86+ className = { styles [ ' sort-container' ] }
6287 onClick = { ( ) => {
6388 if ( ! sortParam . field || sortParam . field !== placeLabel ) {
6489 sortParam . field = placeLabel ;
@@ -70,24 +95,17 @@ class ChallengeHistoryModal extends Component {
7095 } }
7196 type = "button"
7297 >
73- < div styleName = { cn ( 'sort-up' , {
74- active : sortParam . field === placeLabel && sortParam . order === 'asc' ,
75- } ) }
76- />
77- < div styleName = { cn ( 'sort-down' , {
78- active : sortParam . field === placeLabel && sortParam . order === 'desc' ,
79- } ) }
80- />
98+ { sortInner ( ) }
8199 </ button >
82100 </ div >
83101 </ th >
84102 ) : null
85103 }
86104 < th >
87- < div styleName = " header-table-content" >
105+ < div className = { styles [ ' header-table-content' ] } >
88106 < span > Points</ span >
89107 < button
90- styleName = " sort-container"
108+ className = { styles [ ' sort-container' ] }
91109 onClick = { ( ) => {
92110 if ( ! sortParam . field || sortParam . field !== pointsLabel ) {
93111 sortParam . field = pointsLabel ;
@@ -99,14 +117,7 @@ class ChallengeHistoryModal extends Component {
99117 } }
100118 type = "button"
101119 >
102- < div styleName = { cn ( 'sort-up' , {
103- active : sortParam . field === pointsLabel && sortParam . order === 'asc' ,
104- } ) }
105- />
106- < div styleName = { cn ( 'sort-down' , {
107- active : sortParam . field === pointsLabel && sortParam . order === 'desc' ,
108- } ) }
109- />
120+ { sortInner ( ) }
110121 </ button >
111122 </ div >
112123 </ th >
@@ -115,19 +126,19 @@ class ChallengeHistoryModal extends Component {
115126 < tbody >
116127 {
117128 challengesOrdered . map ( challenge => (
118- < tr styleName = " row" key = { `${ challenge [ 'tco_leaderboard.challenge_id' ] || challenge [ 'challenge.challenge_id' ] || challenge . challenge_id } } >
119- < td styleName = " name" >
120- < a href = { `${ config . URL . BASE } ${ challenge [ 'tco_leaderboard.challenge_id' ] || challenge [ 'challenge.challenge_id' ] || challenge . challenge_id || challenge [ 'challenge.challenge_GUID' ] } } styleName = " link" target = "_blank" rel = "noopener noreferrer" >
129+ < tr className = { styles . row } key = { `${ challenge [ 'tco_leaderboard.challenge_id' ] || challenge [ 'challenge.challenge_id' ] || challenge . challenge_id } } >
130+ < td className = { styles . name } >
131+ < a href = { `${ config . URL . BASE } ${ challenge [ 'tco_leaderboard.challenge_id' ] || challenge [ 'challenge.challenge_id' ] || challenge . challenge_id || challenge [ 'challenge.challenge_GUID' ] } } className = { styles . link } target = "_blank" rel = "noopener noreferrer" >
121132 { challenge . challenge_name || challenge [ 'challenge.challenge_name' ] || challenge [ 'tco_leaderboard.challenge_id' ] || challenge . challenge_id }
122133 </ a >
123134 </ td >
124135 {
125136 ! isCopilot ? (
126- < td styleName = " placement" > { challenge [ 'tco_leaderboard.placement' ] || challenge . place } </ td >
137+ < td className = { styles . placement } > { challenge [ 'tco_leaderboard.placement' ] || challenge . place } < span > placement </ span > </ td >
127138 ) : null
128139 }
129- < td styleName = " points" >
130- { challenge [ 'tco_leaderboard.tco_points' ] || challenge . points }
140+ < td className = { styles . points } >
141+ { challenge [ 'tco_leaderboard.tco_points' ] || challenge . points } < span > points </ span >
131142 </ td >
132143 </ tr >
133144 ) )
@@ -142,8 +153,8 @@ class ChallengeHistoryModal extends Component {
142153 < center > < strong > No data available.</ strong > </ center >
143154 )
144155 }
145- < div styleName = " buttons" >
146- < button onClick = { onCancel } type = "button" styleName = " close-btn" >
156+ < div className = { styles . buttons } >
157+ < button onClick = { onCancel } type = "button" className = { styles [ ' close-btn' ] } >
147158 Return to page
148159 </ button >
149160 </ div >
0 commit comments