Skip to content

Commit 58122bb

Browse files
jmgasperjmgasper
authored
Merge pull request #6877 from topcoder-platform/develop
PROD -- Add link to gigs on challenge listings page on CA
2 parents bb7e06b + c5d9e84 commit 58122bb

File tree

12 files changed

+184
-70
lines changed

12 files changed

+184
-70
lines changed

‎__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,9 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
55
className="src-shared-components-challenge-listing-___style__ChallengeFiltersExample___3IjeI"
66
id="challengeFilterContainer"
77
>
8-
<h1
9-
className="src-shared-components-challenge-listing-___style__tc-title____Rpik"
10-
>
11-
CHALLENGES
12-
</h1>
13-
<hr
14-
className="src-shared-components-challenge-listing-___style__tc-seperator___2AnJv"
15-
/>
168
<ChallengeTab
179
activeBucket="abc"
10+
location={Object {}}
1811
previousBucketOfActiveTab={null}
1912
previousBucketOfPastChallengesTab={null}
2013
selectBucket={[MockFunction]}
@@ -75,16 +68,9 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
7568
className="src-shared-components-challenge-listing-___style__ChallengeFiltersExample___3IjeI"
7669
id="challengeFilterContainer"
7770
>
78-
<h1
79-
className="src-shared-components-challenge-listing-___style__tc-title____Rpik"
80-
>
81-
CHALLENGES
82-
</h1>
83-
<hr
84-
className="src-shared-components-challenge-listing-___style__tc-seperator___2AnJv"
85-
/>
8671
<ChallengeTab
8772
activeBucket="abc"
73+
location={Object {}}
8874
previousBucketOfActiveTab={null}
8975
previousBucketOfPastChallengesTab={null}
9076
selectBucket={[MockFunction]}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@ const mockData1 = {
2121
setSort,
2222
sorts: {},
2323
auth: {},
24+
location: {},
2425
};
2526

2627
const mockData2 = _.extend({}, mockData1, {
2728
communityFilter: {},
2829
loadingChallenges: true,
30+
location: {},
2931
});
3032

3133
describe('Matches shallow shapshot 1', () => {

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

Lines changed: 85 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useState, useMemo } from 'react';
22
import { BUCKETS, isPastBucket } from 'utils/challenge-listing/buckets';
33
import cn from 'classnames';
44
import { useMediaQuery } from 'react-responsive';
55
import ArrowIcon from 'assets/images/ico-arrow-down.svg';
6+
import { config } from 'topcoder-react-utils';
67
import PT from 'prop-types';
78

89
import './style.scss';
10+
import { getUpdateQuery } from 'utils/url';
911

1012
const ChallengeTab = ({
1113
activeBucket,
@@ -14,41 +16,75 @@ const ChallengeTab = ({
1416
previousBucketOfPastChallengesTab,
1517
previousBucketOfActiveTab,
1618
selectBucket,
19+
location,
20+
history,
1721
}) => {
1822
const past = isPastBucket(activeBucket);
1923
const [currentSelected, setCurrentSelected] = useState(past);
2024
const [isTabClosed, setIsTabClosed] = useState(true);
25+
const currentTabName = useMemo(() => {
26+
if (location.pathname && location.pathname.indexOf(config.GIGS_PAGES_PATH) >= 0) {
27+
return 'GIGS';
28+
}
29+
return currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES';
30+
}, [location, currentSelected]);
31+
const pageTitle = useMemo(() => {
32+
if (location.pathname && location.pathname.indexOf(config.GIGS_PAGES_PATH) >= 0) {
33+
return 'GIG WORK OPPORTUNITIES';
34+
}
35+
return 'CHALLENGES';
36+
}, [location]);
2137

2238
useEffect(() => {
2339
setCurrentSelected(isPastBucket(activeBucket));
2440
}, [activeBucket]);
2541

42+
const moveToChallengesPage = (selectedBucket) => {
43+
if (currentTabName === 'GIGS') {
44+
const queryParams = getUpdateQuery({ bucket: selectedBucket });
45+
history.push(`/challenges${queryParams || ''}`);
46+
}
47+
};
48+
2649
const onActiveClick = () => {
27-
if (!past) {
50+
if (!past && currentTabName !== 'GIGS') {
2851
return;
2952
}
3053
setPreviousBucketOfPastChallengesTab(activeBucket);
3154
setCurrentSelected(0);
3255
setIsTabClosed(true);
56+
let selectedBucket = '';
3357
if (previousBucketOfActiveTab) {
34-
selectBucket(previousBucketOfActiveTab);
58+
selectedBucket = previousBucketOfActiveTab;
3559
} else {
36-
selectBucket(BUCKETS.OPEN_FOR_REGISTRATION);
60+
selectedBucket = BUCKETS.OPEN_FOR_REGISTRATION;
3761
}
62+
moveToChallengesPage(selectedBucket);
63+
selectBucket(selectedBucket);
3864
};
3965

4066
const onPastChallengesClick = () => {
41-
if (past) {
67+
if (past && currentTabName !== 'GIGS') {
4268
return;
4369
}
4470
setPreviousBucketOfActiveTab(activeBucket);
4571
setCurrentSelected(1);
4672
setIsTabClosed(true);
73+
let selectedBucket = '';
4774
if (previousBucketOfPastChallengesTab) {
48-
selectBucket(previousBucketOfPastChallengesTab);
75+
selectedBucket = previousBucketOfPastChallengesTab;
4976
} else {
50-
selectBucket(BUCKETS.ALL_PAST);
77+
selectedBucket = BUCKETS.ALL_PAST;
5178
}
79+
moveToChallengesPage(selectedBucket);
80+
selectBucket(selectedBucket);
81+
};
82+
83+
const onGigsClick = () => {
84+
if (typeof window === 'undefined') {
85+
return;
86+
}
87+
history.push(config.GIGS_PAGES_PATH);
5288
};
5389

5490
const desktop = useMediaQuery({ minWidth: 1024 });
@@ -57,7 +93,7 @@ const ChallengeTab = ({
5793
<ul styleName="challenge-tab">
5894
<li
5995
key="tab-item-active"
60-
styleName={cn('item', { active: !currentSelected })}
96+
styleName={cn('item', { active: currentTabName === 'ACTIVE CHALLENGES' })}
6197
onClick={onActiveClick}
6298
onKeyDown={(e) => {
6399
if (e.key !== 'Enter') {
@@ -71,7 +107,7 @@ const ChallengeTab = ({
71107
</li>
72108
<li
73109
key="tab-item-past"
74-
styleName={cn('item', { active: currentSelected })}
110+
styleName={cn('item', { active: currentTabName === 'PAST CHALLENGES' })}
75111
onClick={onPastChallengesClick}
76112
onKeyDown={(e) => {
77113
if (e.key !== 'Enter') {
@@ -83,6 +119,20 @@ const ChallengeTab = ({
83119
>
84120
PAST CHALLENGES
85121
</li>
122+
<li
123+
key="tab-item-gigs"
124+
styleName={cn('item', { active: currentTabName === 'GIGS' })}
125+
onClick={onGigsClick}
126+
onKeyDown={(e) => {
127+
if (e.key !== 'Enter') {
128+
return;
129+
}
130+
onGigsClick();
131+
}}
132+
role="presentation"
133+
>
134+
GIGS
135+
</li>
86136
</ul>
87137
);
88138

@@ -93,7 +143,7 @@ const ChallengeTab = ({
93143
role="presentation"
94144
onClick={() => setIsTabClosed(!isTabClosed)}
95145
>
96-
<p styleName="title">{currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES'}</p>
146+
<p styleName="title">{currentTabName}</p>
97147
<div
98148
role="presentation"
99149
styleName={cn('icon', { down: !isTabClosed })}
@@ -108,39 +158,59 @@ const ChallengeTab = ({
108158
<div
109159
role="presentation"
110160
onClick={onActiveClick}
111-
styleName={cn('item', { active: !currentSelected })}
161+
styleName={cn('item', { active: currentTabName === 'ACTIVE CHALLENGES' })}
112162
>
113163
<p>ACTIVE CHALLENGES</p>
114164
</div>
115165
<div
116166
role="presentation"
117-
styleName={cn('item', { active: currentSelected })}
167+
styleName={cn('item', { active: currentTabName === 'PAST CHALLENGES' })}
118168
onClick={onPastChallengesClick}
119169
>
120170
<p>PAST CHALLENGES</p>
121171
</div>
172+
<div
173+
role="presentation"
174+
styleName={cn('item', { active: currentTabName === 'GIGS' })}
175+
onClick={onGigsClick}
176+
>
177+
<p>GIGS</p>
178+
</div>
122179
</div>
123180
)
124181
}
125182
</React.Fragment>
126183
);
127184

128-
return desktop ? desktopTab : mobileTab;
185+
return (
186+
<React.Fragment>
187+
<h1 styleName="tc-title">{pageTitle}</h1>
188+
<hr styleName="tc-seperator" />
189+
{desktop ? desktopTab : mobileTab}
190+
</React.Fragment>
191+
);
129192
};
130193

131194
ChallengeTab.defaultProps = {
195+
activeBucket: null,
196+
selectBucket: () => {},
132197
setPreviousBucketOfActiveTab: () => {},
133198
setPreviousBucketOfPastChallengesTab: () => {},
134199
previousBucketOfActiveTab: null,
135200
previousBucketOfPastChallengesTab: null,
136201
};
137202

138203
ChallengeTab.propTypes = {
139-
activeBucket: PT.string.isRequired,
204+
location: PT.shape({
205+
search: PT.string,
206+
pathname: PT.string,
207+
}).isRequired,
208+
history: PT.shape().isRequired,
209+
activeBucket: PT.string,
140210
setPreviousBucketOfActiveTab: PT.func,
141211
setPreviousBucketOfPastChallengesTab: PT.func,
142212
previousBucketOfActiveTab: PT.string,
143-
selectBucket: PT.func.isRequired,
213+
selectBucket: PT.func,
144214
previousBucketOfPastChallengesTab: PT.string,
145215
};
146216

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
.active {
6060
color: $tc-black;
6161
font-weight: 700;
62+
position: relative;
6263

6364
&::after {
6465
content: "";
@@ -70,7 +71,7 @@
7071
z-index: 100;
7172
display: block;
7273
position: absolute;
73-
top: 145px;
74+
top: 31px;
7475
}
7576
}
7677
}
@@ -117,3 +118,29 @@
117118
margin: 0 16px;
118119
}
119120
}
121+
122+
.tc-title {
123+
@include barlow-condensed;
124+
125+
color: $tco-black;
126+
font-size: 32px;
127+
margin: 32px 0 24px 0;
128+
line-height: 32px;
129+
font-weight: 600;
130+
text-transform: uppercase;
131+
132+
@include xs-to-md {
133+
margin: 16px;
134+
}
135+
}
136+
137+
.tc-seperator {
138+
background-color: $listing-gray;
139+
height: 2px;
140+
opacity: 0.5;
141+
margin: 0;
142+
143+
@include xs-to-md {
144+
margin: 0 16px;
145+
}
146+
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ export default function ChallengeListing(props) {
5454
setPreviousBucketOfPastChallengesTab,
5555
previousBucketOfPastChallengesTab,
5656
previousBucketOfActiveTab,
57+
location,
58+
history,
5759
} = props;
5860

5961
// const { challenges } = props;
@@ -157,17 +159,15 @@ export default function ChallengeListing(props) {
157159

158160
return (
159161
<div styleName="ChallengeFiltersExample" id="challengeFilterContainer">
160-
161-
<h1 styleName="tc-title">CHALLENGES</h1>
162-
<hr styleName="tc-seperator" />
163-
164162
<ChallengeTab
165163
activeBucket={activeBucket}
164+
history={history}
166165
setPreviousBucketOfActiveTab={setPreviousBucketOfActiveTab}
167166
setPreviousBucketOfPastChallengesTab={setPreviousBucketOfPastChallengesTab}
168167
previousBucketOfPastChallengesTab={previousBucketOfPastChallengesTab}
169168
previousBucketOfActiveTab={previousBucketOfActiveTab}
170169
selectBucket={selectBucket}
170+
location={location}
171171
/>
172172

173173
<div styleName="tc-content-wrapper">
@@ -221,6 +221,10 @@ ChallengeListing.defaultProps = {
221221
};
222222

223223
ChallengeListing.propTypes = {
224+
location: PT.shape({
225+
search: PT.string,
226+
}).isRequired,
227+
history: PT.shape().isRequired,
224228
activeBucket: PT.string.isRequired,
225229
expanding: PT.bool,
226230
challenges: PT.arrayOf(PT.shape()).isRequired,

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,6 @@ $challenge-radius-4: $corner-radius * 2;
2222
flex: 1;
2323
margin: 0;
2424

25-
.tc-title {
26-
@include barlow-condensed;
27-
28-
color: $tco-black;
29-
font-size: 32px;
30-
margin: 32px 0 24px 0;
31-
line-height: 32px;
32-
font-weight: 600;
33-
text-transform: uppercase;
34-
35-
@include xs-to-md {
36-
margin: 16px;
37-
}
38-
}
39-
40-
.tc-seperator {
41-
background-color: $listing-gray;
42-
height: 2px;
43-
opacity: 0.5;
44-
margin: 0;
45-
46-
@include xs-to-md {
47-
margin: 0 16px;
48-
}
49-
}
50-
5125
.tc-content-wrapper {
5226
display: flex;
5327
padding: 0;

0 commit comments

Comments
 (0)