Skip to content

Commit f9d6c05

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #5364 from nursoltan-s/nursoltan/final-fixes
Refactored duplicated code
2 parents 9dfa9f5 + 20bdecd commit f9d6c05

File tree

14 files changed

+135
-130
lines changed

14 files changed

+135
-130
lines changed

‎src/assets/images/icon-verified.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/shared/components/challenge-detail/Header/ChallengeTags.jsx

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@ import {
2323
} from 'topcoder-react-ui-kit';
2424

2525
import { COMPETITION_TRACKS } from 'utils/tc';
26-
import VerifiedIcon from 'assets/images/icon-verified.svg';
26+
import VerifiedTag from 'components/challenge-listing/VerifiedTag';
2727
import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
28-
import Tooltip from 'components/Tooltip';
2928
import { calculateScore } from '../../../utils/challenge-listing/helper';
3029
import './style.scss';
3130

@@ -71,12 +70,6 @@ export default function ChallengeTags(props) {
7170

7271
const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
7372

74-
const verifiedTagTooltip = item => (
75-
<div styleName="tctooltiptext">
76-
<p>{item} is verified based <br /> on past challenges you won</p>
77-
</div>
78-
);
79-
8073
return (
8174
<div>
8275
{
@@ -105,28 +98,17 @@ export default function ChallengeTags(props) {
10598
}
10699
{
107100
matchScore && (
108-
<MatchScore score={calculateScore(matchScore)} />
101+
<span styleName="matchScoreWrap">
102+
<MatchScore score={calculateScore(matchScore)} />
103+
</span>
109104
)
110105
}
111106
{
112107
matchSkills.map(item => (
113-
<div styleName="recommended-challenge-tooltip">
114-
<Tooltip
115-
id="recommended-tip"
116-
content={verifiedTagTooltip(item)}
117-
trigger={['hover', 'focus']}
118-
>
119-
<DevelopmentTrackEventTag
120-
key={item}
121-
role="button"
122-
to={(challengesUrl && item.indexOf('+') !== 0) ? `${challengesUrl}?filter[tags][0]=${
123-
encodeURIComponent(item)}` : null}
124-
>
125-
<VerifiedIcon styleName="verified-tag" />
126-
<span styleName="verified-tag-text">{item}</span>
127-
</DevelopmentTrackEventTag>
128-
</Tooltip>
129-
</div>
108+
<VerifiedTag
109+
item={item}
110+
challengesUrl={challengesUrl}
111+
/>
130112
))
131113
}
132114
{

‎src/shared/components/challenge-detail/Header/style.scss

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -357,37 +357,8 @@
357357
top: -5px;
358358
}
359359

360-
.verified-tag {
361-
position: absolute;
362-
}
363-
364-
.verified-tag-text {
365-
margin-left: 15px;
366-
}
367-
368-
.recommended-challenge-tooltip {
369-
display: inline-block;
370-
margin: 3px 0 0 0;
371-
}
372-
373-
.tctooltiptext {
374-
background: $tc-white;
375-
color: $tc-gray-90;
376-
border-radius: 3px;
377-
padding: 10px;
378-
}
379-
380-
.tctooltiptext::after {
381-
content: "";
382-
position: absolute;
383-
width: 0;
384-
height: 0;
385-
border-color: transparent;
386-
border-style: solid;
387-
bottom: 4px;
388-
margin-left: -5px;
389-
border-width: 5px 5px 0;
390-
left: 50%;
391-
border-top-color: $tc-white;
392-
z-index: 1000;
360+
.matchScoreWrap {
361+
width: 100%;
362+
margin-right: -2px;
363+
padding: 0;
393364
}

‎src/shared/components/challenge-listing/ChallengeCard/MatchScore/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "~styles/mixins";
22

33
.matchScoreTag {
4-
margin-right: 4px;
4+
margin-right: 0;
55
margin-bottom: 4px;
66
display: inline-block;
77
}

‎src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -661,6 +661,7 @@ export default function FiltersPanel({
661661
status: 'Active',
662662
reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
663663
customDate: false,
664+
recommended: false,
664665
});
665666
selectCommunity(defaultCommunityId);
666667
setSearchText('');

‎src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import "../../../../../styles/awesome.css";
21
@import '~styles/mixins';
32

43
.uppercase {

‎src/shared/components/challenge-listing/Listing/Bucket/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export default function Bucket({
121121
if (!loading && sortedChallenges.length === 0) {
122122
return (
123123
<div styleName="no-results">
124-
{ filterState.recommended ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
124+
{ (filterState.recommended && activeBucket === 'openForRegistration') ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
125125
</div>
126126
);
127127
}

‎src/shared/components/challenge-listing/Listing/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ function Listing({
255255
{
256256
loading
257257
? placeholders
258-
: !filterState.recommended && (
258+
: (!filterState.recommended || activeBucket !== 'openForRegistration') && (
259259
<div styleName="no-results">{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }</div>
260260
)
261261
}

‎src/shared/components/challenge-listing/Tags.jsx

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
import _ from 'lodash';
55
import React from 'react';
66
import PT from 'prop-types';
7-
import { Tag, DevelopmentTrackEventTag } from 'topcoder-react-ui-kit';
8-
import VerifiedIcon from 'assets/images/icon-verified.svg';
7+
import { Tag } from 'topcoder-react-ui-kit';
98
import Tooltip from 'components/Tooltip';
9+
import VerifiedTag from './VerifiedTag';
1010
import './style.scss';
11-
import cn from 'classnames';
1211

1312
// The number of tags to be shown without requiring expanding
1413
const VISIBLE_TAGS = 3;
@@ -28,12 +27,6 @@ export default function Tags({
2827
}
2928
};
3029

31-
const verifiedTagTooltip = item => (
32-
<div styleName="tctooltiptext">
33-
<p>{item} is verified based <br /> on past challenges you won</p>
34-
</div>
35-
);
36-
3730
const tagRedirectLink = (item) => {
3831
if (challengesUrl && item.indexOf('+') !== 0) {
3932
return `${challengesUrl}?filter[tags][0]=${
@@ -42,32 +35,19 @@ export default function Tags({
4235
return null;
4336
};
4437

45-
const renderVerifiedTag = item => (
46-
<div styleName="recommended-challenge-tooltip">
47-
<Tooltip
48-
id="recommended-tip"
49-
content={verifiedTagTooltip(item)}
50-
trigger={['hover', 'focus']}
51-
>
52-
<DevelopmentTrackEventTag
53-
onClick={() => onClick(item.trim())}
54-
key={item}
55-
role="button"
56-
to={tagRedirectLink(item)}
57-
>
58-
<VerifiedIcon styleName="verified-tag" />
59-
<span styleName={cn({ 'verified-tag-text': recommended })}>{item}</span>
60-
</DevelopmentTrackEventTag>
61-
</Tooltip>
62-
</div>
63-
);
64-
6538
const additionalTags = (items, verifiedTagIndex) => (
6639
<div styleName="additionalTagWrapper">
6740
{
6841
items.map((item, index) => {
6942
if (index < verifiedTagIndex) {
70-
return renderVerifiedTag(item);
43+
return (
44+
<VerifiedTag
45+
challengesUrl={challengesUrl}
46+
item={item}
47+
onClick={onClick}
48+
recommended={recommended}
49+
/>
50+
);
7151
}
7252
return (
7353
(
@@ -126,7 +106,14 @@ export default function Tags({
126106
</Tooltip>
127107
</div>
128108
)
129-
: renderVerifiedTag(item)
109+
: (
110+
<VerifiedTag
111+
challengesUrl={challengesUrl}
112+
item={item}
113+
onClick={onClick}
114+
recommended={recommended}
115+
/>
116+
)
130117
);
131118
}
132119

‎src/shared/components/challenge-listing/VerifiedTag/index.jsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { DevelopmentTrackEventTag } from 'topcoder-react-ui-kit';
3+
import VerifiedIcon from 'assets/images/icon-verified.svg';
4+
import Tooltip from 'components/Tooltip';
5+
import PT from 'prop-types';
6+
import './style.scss';
7+
import cn from 'classnames';
8+
9+
/**
10+
* Verified Tag Componenet
11+
*/
12+
export default function VerifiedTag({
13+
challengesUrl, item, onClick, recommended,
14+
}) {
15+
const verifiedTagTooltip = skill => (
16+
<div styleName="tctooltiptext">
17+
<p>{skill} is verified based <br /> on past challenges you won</p>
18+
</div>
19+
);
20+
21+
const tagRedirectLink = (skill) => {
22+
if (challengesUrl && skill.indexOf('+') !== 0) {
23+
return `${challengesUrl}?search=${
24+
encodeURIComponent(skill)}`;
25+
}
26+
return null;
27+
};
28+
29+
return (
30+
<div styleName="recommended-challenge-tooltip">
31+
<Tooltip
32+
id="recommended-tip"
33+
content={verifiedTagTooltip(item)}
34+
trigger={['hover', 'focus']}
35+
>
36+
<DevelopmentTrackEventTag
37+
onClick={() => onClick(item.trim())}
38+
key={item}
39+
role="button"
40+
to={tagRedirectLink(item)}
41+
>
42+
<VerifiedIcon styleName="verified-tag" />
43+
<span styleName={cn({ 'verified-tag-text': recommended })}>{item}</span>
44+
</DevelopmentTrackEventTag>
45+
</Tooltip>
46+
</div>
47+
);
48+
}
49+
50+
VerifiedTag.defaultProps = {
51+
challengesUrl: '',
52+
item: '',
53+
onClick: null,
54+
recommended: true,
55+
};
56+
57+
VerifiedTag.propTypes = {
58+
challengesUrl: PT.string,
59+
item: PT.string,
60+
onClick: PT.func,
61+
recommended: PT.bool,
62+
};

‎src/shared/components/challenge-listing/VerifiedTag/style.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import '~styles/mixins';
2+
3+
.recommended-challenge-tooltip {
4+
display: inline-block;
5+
margin: 3px 0 0 3px;
6+
}
7+
8+
.tctooltiptext {
9+
background: $tc-white;
10+
color: $tc-gray-90;
11+
border-radius: 3px;
12+
padding: 10px;
13+
}
14+
15+
.tctooltiptext::after {
16+
content: "";
17+
position: absolute;
18+
width: 0;
19+
height: 0;
20+
border-color: transparent;
21+
border-style: solid;
22+
bottom: 4px;
23+
margin-left: -5px;
24+
border-width: 5px 5px 0;
25+
left: 50%;
26+
border-top-color: $tc-white;
27+
z-index: 1000;
28+
}
29+
30+
.verified-tag {
31+
position: absolute;
32+
}
33+
34+
.verified-tag-text {
35+
margin-left: 15px;
36+
}

‎src/shared/components/challenge-listing/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export default function ChallengeListing(props) {
103103
{
104104
filterState.recommended
105105
&& !loadingOpenForRegistrationChallenges
106+
&& activeBucket === 'openForRegistration'
106107
&& !openForRegistrationChallenges.length && (
107108
<NoChallengeCard />
108109
)

‎src/shared/components/challenge-listing/style.scss

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -98,41 +98,6 @@ $challenge-radius-4: $corner-radius * 2;
9898
}
9999
}
100100

101-
.verified-tag {
102-
position: absolute;
103-
}
104-
105-
.verified-tag-text {
106-
margin-left: 15px;
107-
}
108-
109-
.recommended-challenge-tooltip {
110-
display: inline-block;
111-
margin: 3px 0 0 3px;
112-
}
113-
114-
.tctooltiptext {
115-
background: $tc-white;
116-
color: $tc-gray-90;
117-
border-radius: 3px;
118-
padding: 10px;
119-
}
120-
121-
.tctooltiptext::after {
122-
content: "";
123-
position: absolute;
124-
width: 0;
125-
height: 0;
126-
border-color: transparent;
127-
border-style: solid;
128-
bottom: 4px;
129-
margin-left: -5px;
130-
border-width: 5px 5px 0;
131-
left: 50%;
132-
border-top-color: $tc-white;
133-
z-index: 1000;
134-
}
135-
136101
.card-container {
137102
width: 70%;
138103

‎src/shared/utils/challenge-listing/buckets.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ export function isFilterEmpty(filter, tab, bucket) {
255255
},
256256
search: '',
257257
types: ['CH', 'F2F', 'TSK'],
258+
recommended: false,
258259
};
259260
}
260261

0 commit comments

Comments
 (0)