Skip to content

Commit c748985

Browse files
kkartunovcagdas001
kkartunov
authored and
cagdas001
committed
Gig work fixes topcoder-platform#4826 
1 parent 0666c1c commit c748985

File tree

17 files changed

+112
-57
lines changed

17 files changed

+112
-57
lines changed

‎src/assets/images/icon-skills-blue.png

912 Bytes
Loading

‎src/assets/images/icon-skills.png

479 Bytes
Loading

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

-31
This file was deleted.

‎src/assets/images/l1.png

1.81 KB
Loading

‎src/assets/images/l2.png

1.99 KB
Loading

‎src/assets/images/l3.png

2.1 KB
Loading

‎src/assets/images/l4.png

1.86 KB
Loading

‎src/server/services/recruitCRM.js

+16-9
Original file line numberDiff line numberDiff line change
@@ -114,20 +114,27 @@ export default class RecruitCRMService {
114114
const data = await response.json();
115115
if (data.current_page < data.last_page) {
116116
const pages = _.range(2, data.last_page + 1);
117-
// eslint-disable-next-line no-restricted-syntax
118-
for (const page of pages) {
119-
// eslint-disable-next-line no-await-in-loop
120-
const pageDataRsp = await fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, {
117+
return Promise.all(
118+
pages.map(page => fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, {
121119
method: 'GET',
122120
headers: {
123121
'Content-Type': req.headers['content-type'],
124122
Authorization: this.private.authorization,
125123
},
126-
});
127-
// eslint-disable-next-line no-await-in-loop
128-
const pageData = await pageDataRsp.json();
129-
data.data = _.flatten(data.data.concat(pageData.data));
130-
}
124+
})),
125+
)
126+
.then(async (allPages) => {
127+
// eslint-disable-next-line no-restricted-syntax
128+
for (const pageDataRsp of allPages) {
129+
// eslint-disable-next-line no-await-in-loop
130+
const pageData = await pageDataRsp.json();
131+
data.data = _.flatten(data.data.concat(pageData.data));
132+
}
133+
return res.send(data.data);
134+
})
135+
.catch(e => res.send({
136+
error: e,
137+
}));
131138
}
132139
return res.send(data.data);
133140
} catch (err) {

‎src/shared/components/GUIKit/JobListCard/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import './style.scss';
1010
import IconBlackDuration from 'assets/images/icon-black-duration.svg';
1111
import IconBlackLocation from 'assets/images/icon-black-location.svg';
1212
import IconBlackPayment from 'assets/images/icon-black-payment.svg';
13-
import IconBlackSkills from 'assets/images/icon-skills.svg';
13+
import iconBlackSkills from 'assets/images/icon-skills.png';
1414

1515
export default function JobListCard({
1616
job,
@@ -30,7 +30,7 @@ export default function JobListCard({
3030
<Link to={`${config.GIGS_PAGES_PATH}/${job.slug}`} styleName="gig-name">{job.name}</Link>
3131
<div styleName="job-infos">
3232
<div styleName="icon-val">
33-
<IconBlackSkills /> {skills}
33+
<img src={iconBlackSkills} alt="skills-icon" /> {skills}
3434
</div>
3535
<div styleName="icon-val">
3636
<IconBlackLocation /> {job.country}

‎src/shared/components/GUIKit/JobListCard/style.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
width: 141px;
7070
}
7171

72-
svg {
72+
svg,
73+
img {
7374
margin-right: 7px;
7475
}
7576
}

‎src/shared/components/GUIKit/SearchCombo/index.jsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,19 @@ function SearchCombo({
1717
setVal('');
1818
onSearch('');
1919
};
20+
const onKeyDown = (e) => {
21+
if (e.which === 13) {
22+
onSearch(inputVal);
23+
}
24+
};
2025

2126
return (
2227
<div styleName="container">
2328
<div styleName="input-wrap">
2429
{
2530
!inputVal ? <span styleName="search-placeholder">{placeholder}</span> : null
2631
}
27-
<input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} />
32+
<input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} onKeyDown={onKeyDown} />
2833
{
2934
inputVal ? <IconClearSearch onClick={clearSearch} styleName="clear-search" /> : null
3035
}

‎src/shared/components/GUIKit/SearchCombo/style.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
width: 100%;
1010
position: relative;
1111
margin-right: 10px;
12-
z-index: 1;
1312

1413
input.input {
1514
background: transparent;
1615
border: 1px solid #aaa;
1716
border-radius: 6px;
1817
height: 39px;
1918
margin: 0;
19+
position: relative;
20+
z-index: 1;
2021
}
2122

2223
.search-placeholder {
@@ -29,13 +30,20 @@
2930
z-index: 0;
3031
top: 8px;
3132
left: 15px;
33+
34+
@include xs-to-sm {
35+
max-width: 250px;
36+
overflow: hidden;
37+
white-space: nowrap;
38+
}
3239
}
3340

3441
.clear-search {
3542
position: absolute;
3643
top: calc(50% - 5px);
3744
right: 15px;
3845
cursor: pointer;
46+
z-index: 2;
3947
}
4048
}
4149

‎src/shared/components/Gigs/GigDetails.jsx

+26-8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import IconMoney from 'assets/images/icon-payment.svg';
1717
import IconDuration from 'assets/images/icon-calendar-gig.svg';
1818
import IconHours from 'assets/images/icon-duration.svg';
1919
import IconTimezone from 'assets/images/icon-timezone.svg';
20+
import iconSkills from 'assets/images/icon-skills-blue.png';
21+
import iconLabel1 from 'assets/images/l1.png';
22+
import iconLabel2 from 'assets/images/l2.png';
23+
import iconLabel3 from 'assets/images/l3.png';
24+
import iconLabel4 from 'assets/images/l4.png';
2025

2126
// Cleanup HTML from style tags
2227
// so it won't affect other parts of the UI
@@ -41,11 +46,11 @@ export default function GigDetails(props) {
4146
return (
4247
<div styleName="container">
4348
{
44-
job.error ? (
49+
job.error || job.enable_job_application_form !== 1 ? (
4550
<div styleName="error">
4651
<h3>Gig does not exist.</h3>
4752
<div styleName="cta-buttons">
48-
<Link to={config.GIGS_PAGES_PATH}>VIEW OTHER JOBS</Link>
53+
<Link to={config.GIGS_PAGES_PATH}>VIEW OTHER GIGS</Link>
4954
</div>
5055
</div>
5156
) : (
@@ -90,8 +95,8 @@ export default function GigDetails(props) {
9095
</div>
9196
<div styleName="content">
9297
<div styleName="left">
93-
<h4>Required Tech Skills</h4>
94-
<p>{skills}</p>
98+
<h4>Skills</h4>
99+
<p styleName="skills"><img src={iconSkills} alt="skills-icon" /> {skills}</p>
95100
<h4>Description</h4>
96101
<p>{ReactHtmlParser(job.job_description_text, ReactHtmlParserOptions)}
97102
</p>
@@ -126,12 +131,25 @@ export default function GigDetails(props) {
126131
<p>Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/thrive/tracks?track=Topcoder&amp;tax=Gig%20Work">here</a>.</p>
127132
<p>At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:</p>
128133
<ul>
129-
<li>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate. Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</li>
130-
<li>Make sure your <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/settings/profile">Topcoder profile</a> says it all. Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig</li>
131-
<li>Let us know you’re here! Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team</li>
132-
<li>Subscribe to our Gig notifications email. We’ll send you a weekly update on gigs available so you don’t miss a beat. <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Find the button at the top of this page.</a></li>
134+
<li>
135+
<img src={iconLabel1} alt="label 1" />
136+
<div><strong>Make sure your <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/settings/profile">Topcoder profile</a> says it all.</strong> Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig.</div>
137+
</li>
138+
<li>
139+
<img src={iconLabel2} alt="label 2" />
140+
<div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email.</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
141+
</li>
142+
<li>
143+
<img src={iconLabel3} alt="label 3" />
144+
<div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
145+
</li>
146+
<li>
147+
<img src={iconLabel4} alt="label 4" />
148+
<div><strong>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate.</strong> Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</div>
149+
</li>
133150
</ul>
134151
</div>
152+
<div styleName="support">If you have any questions or doubts, don’t hesitate to email <a href="mailto:[email protected]">[email protected]</a>.</div>
135153
</div>
136154
</div>
137155
</div>

‎src/shared/components/Gigs/style.scss

+37-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
height: 80vh;
2424
}
2525

26+
.wrap .content .right .support a {
27+
font-weight: 600;
28+
text-decoration: none;
29+
}
30+
2631
.wrap {
2732
h2 {
2833
color: #26b3c5;
@@ -118,15 +123,26 @@
118123
li {
119124
font-size: 14px;
120125
line-height: 26px;
121-
}
122126

127+
strong {
128+
font-weight: bold;
129+
}
130+
}
123131
/* stylelint-enable */
124132

125133
ul {
126134
margin-bottom: 0;
135+
list-style: none;
136+
padding: 0;
127137

128138
li {
129139
margin-bottom: 15px;
140+
display: flex;
141+
align-items: flex-start;
142+
143+
img {
144+
margin-right: 16px;
145+
}
130146

131147
&:last-child {
132148
margin-bottom: 0;
@@ -138,6 +154,16 @@
138154
.gig-skills {
139155
display: flex;
140156
}
157+
158+
.support {
159+
background-color: #eaf6fd;
160+
border-radius: 10px;
161+
padding: 20px;
162+
text-transform: uppercase;
163+
font-weight: 600;
164+
font-family: Barlow, sans-serif;
165+
margin-top: 20px;
166+
}
141167
}
142168

143169
.left {
@@ -159,6 +185,16 @@
159185
margin-top: 0;
160186
}
161187
}
188+
189+
.skills {
190+
display: flex;
191+
align-items: center;
192+
/* stylelint-disable */
193+
img {
194+
margin-right: 8px;
195+
}
196+
/* stylelint-enable */
197+
}
162198
}
163199
}
164200
}

‎src/shared/containers/Gigs/RecruitCRMJobs.jsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,15 @@ class RecruitCRMJobsContainer extends React.Component {
118118
</div>
119119
<div styleName="jobs-list-container">
120120
{
121-
jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
121+
jobsToDisplay.length
122+
? jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
123+
: <span styleName="no-results">No Results</span>
122124
}
123125
</div>
124-
<Paginate onChange={this.onPaginate} pages={pages} page={page} />
126+
{
127+
jobsToDisplay.length
128+
? <Paginate onChange={this.onPaginate} pages={pages} page={page} /> : null
129+
}
125130
</div>
126131
);
127132
}

‎src/shared/containers/Gigs/jobLisingStyles.scss

+5
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,10 @@
1616
display: flex;
1717
flex-direction: column;
1818
margin: 20px 0 50px 0;
19+
20+
.no-results {
21+
display: flex;
22+
justify-content: center;
23+
}
1924
}
2025
}

‎src/shared/containers/GigsPages.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import PT from 'prop-types';
66
import Header from 'containers/TopcoderHeader';
77
import Footer from 'components/TopcoderFooter';
88
import Viewport from 'components/Contentful/Viewport';
9-
import { config } from 'topcoder-react-utils';
9+
import { config, MetaTags } from 'topcoder-react-utils';
1010
import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
1111

1212

@@ -15,6 +15,7 @@ export default function GigsPagesContainer(props) {
1515
const { id } = match.params;
1616
return (
1717
<div>
18+
<MetaTags title="Topcoder - Gig Work Opportunities" />
1819
<Header />
1920
{
2021
id ? (

0 commit comments

Comments
 (0)