Skip to content

Commit 5f32b58

Browse files
dedywahyudidedywahyudi
committed
improvement(reskin): open review mobile f2f
1 parent 659acf2 commit 5f32b58

File tree

4 files changed

+95
-54
lines changed

4 files changed

+95
-54
lines changed

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

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ export default function Bucket({
7979
let filteredChallenges = sortedChallenges;
8080
filteredChallenges = sortedChallenges.filter((ch) => {
8181
if (ch.type === 'Task'
82-
&& ch.task
83-
&& ch.task.isTask
84-
&& ch.task.isAssigned
85-
&& Number(ch.task.memberId) !== Number(userId)) {
82+
&& ch.task
83+
&& ch.task.isTask
84+
&& ch.task.isAssigned
85+
&& Number(ch.task.memberId) !== Number(userId)) {
8686
return null;
8787
}
8888
return ch;
@@ -137,7 +137,7 @@ export default function Bucket({
137137
title={BUCKET_DATA[bucket].name}
138138
/>
139139
<h1 styleName="no-results">
140-
{ (filterState.recommended && activeBucket === 'openForRegistration') ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
140+
{(filterState.recommended && activeBucket === 'openForRegistration') ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`}
141141
</h1>
142142
</div>
143143
</div>
@@ -171,7 +171,7 @@ export default function Bucket({
171171

172172
const placeholders = [];
173173
if (loading) {
174-
// if ((loading || keepPlaceholders) && (!expandable || expanded)) {
174+
// if ((loading || keepPlaceholders) && (!expandable || expanded)) {
175175
for (let i = 0; i < 10; i += 1) {
176176
placeholders.push(<CardPlaceholder id={i} key={i} />);
177177
}
@@ -185,32 +185,42 @@ export default function Bucket({
185185
// // instead of waiting for scrolling to hit the react-waypoint to do the loadMore
186186
// loadMore();
187187
// }
188+
188189
const isRecommended = isRecommendedChallengeType(bucket, filterState);
190+
const sectionTile = 'OPEN FOR REGISTRATION';
189191
const isHighestPaying = isRecommended && _.sumBy(filteredChallenges, 'jaccard_index') === 0;
190192
return (
191193
// challenges.length !== 0
192194
// && (
193195
<div>
194196
<div styleName="bucket">
195197
{
196-
<SortingSelectBar
197-
onSelect={setSort}
198-
options={
199-
BUCKET_DATA[bucket].sorts.map(item => ({
200-
label: Sort[item].name,
201-
value: item,
202-
}))
203-
}
204-
title={BUCKET_DATA[bucket].name}
205-
value={{
206-
label: Sort[activeSort].name,
207-
value: activeSort,
208-
}}
209-
/>
198+
isRecommended
199+
? filteredChallenges.length > 0 && (
200+
<SortingSelectBar
201+
title={sectionTile}
202+
/>
203+
)
204+
: (
205+
<SortingSelectBar
206+
onSelect={setSort}
207+
options={
208+
BUCKET_DATA[bucket].sorts.map(item => ({
209+
label: Sort[item].name,
210+
value: item,
211+
}))
212+
}
213+
title={BUCKET_DATA[bucket].name}
214+
value={{
215+
label: Sort[activeSort].name,
216+
value: activeSort,
217+
}}
218+
/>
219+
)
210220
}
211221
{
212222
isHighestPaying && (!loading || filteredChallenges.length > 0)
213-
&& <NoRecommenderChallengeCard />
223+
&& <NoRecommenderChallengeCard />
214224
}
215225
{cards}
216226
{
@@ -220,24 +230,26 @@ export default function Bucket({
220230
}
221231
{placeholders}
222232
{
223-
// (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? (
224-
(expanding || expandable) && !loading && loadMore && (expandable ? expanded : !expanded) ? (
225-
<a
226-
// href={`${challengesUrl}?${bucketQuery}`}
227-
href={`${challengesUrl}`}
228-
onClick={(event) => {
229-
expand();
230-
// document.body.scrollTop = 0;
231-
// document.documentElement.scrollTop = 0;
232-
event.preventDefault();
233-
}}
234-
role="button"
235-
styleName="view-more"
236-
tabIndex={0}
237-
>
238-
View more challenges
239-
</a>
240-
) : null
233+
// eslint-disable-next-line max-len
234+
// (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? (
235+
// eslint-disable-next-line max-len
236+
(expanding || expandable) && !loading && loadMore && (expandable ? expanded : !expanded) ? (
237+
<a
238+
// href={`${challengesUrl}?${bucketQuery}`}
239+
href={`${challengesUrl}`}
240+
onClick={(event) => {
241+
expand();
242+
// document.body.scrollTop = 0;
243+
// document.documentElement.scrollTop = 0;
244+
event.preventDefault();
245+
}}
246+
role="button"
247+
styleName="view-more"
248+
tabIndex={0}
249+
>
250+
View more challenges
251+
</a>
252+
) : null
241253
}
242254
</div>
243255
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function ReviewOpportunityCard({
110110
</div>
111111
))}
112112
</div>
113-
)}
113+
)}
114114
>
115115
<div styleName="payment">
116116
<span>
@@ -131,7 +131,7 @@ function ReviewOpportunityCard({
131131
<div styleName="tooltip">
132132
{quantityText(opportunity.openPositions, 'open position')}
133133
</div>
134-
)}
134+
)}
135135
>
136136
<OpenPositionsIcon />
137137
<span styleName="number">
@@ -143,7 +143,7 @@ function ReviewOpportunityCard({
143143
<div styleName="tooltip">
144144
{quantityText(opportunity.submissions, 'submission')}
145145
</div>
146-
)}
146+
)}
147147
>
148148
<SubmissionsIcon />
149149
<span styleName="number">
@@ -160,7 +160,7 @@ function ReviewOpportunityCard({
160160
{ start.isAfter() ? formatDuration(start.diff()) : ` ${formatDuration(-start.diff())}` }
161161
</span>
162162
<span styleName="to-register">
163-
to apply
163+
to Apply
164164
</span>
165165
</Link>
166166
</div>

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ $status-radius-4: $corner-radius * 2;
116116
margin-right: $challenge-space-10;
117117
line-height: ($challenge-space-10) + 2;
118118
font-weight: normal;
119+
margin-top: 2px;
119120
}
120121

121122
.technology {
@@ -164,7 +165,9 @@ $status-radius-4: $corner-radius * 2;
164165
@include xs-to-sm {
165166
position: relative;
166167
display: block;
167-
margin-top: $challenge-space-20;
168+
margin-top: $challenge-space-30;
169+
margin-bottom: $challenge-space-45;
170+
margin-left: $challenge-space-15;
168171
top: 0;
169172
}
170173

@@ -210,6 +213,7 @@ $status-radius-4: $corner-radius * 2;
210213
line-height: 24px;
211214

212215
@include xs-to-sm {
216+
margin-top: 0;
213217
position: absolute;
214218
height: 42px;
215219
width: auto;
@@ -232,10 +236,15 @@ $status-radius-4: $corner-radius * 2;
232236
margin-top: -$challenge-space-10;
233237

234238
@include xs-to-sm {
239+
top: calc(50% - 5px);
235240
display: inline-block;
236241
position: relative;
237242
margin-top: 0;
238243
color: $tco-black;
244+
245+
br {
246+
display: none;
247+
}
239248
}
240249
}
241250

@@ -285,8 +294,12 @@ $status-radius-4: $corner-radius * 2;
285294
@include xs-to-sm {
286295
display: block;
287296
vertical-align: top;
288-
margin-bottom: $challenge-space-20;
297+
margin-top: $challenge-space-30;
298+
margin-bottom: $challenge-space-45;
289299
width: 66%;
300+
padding-top: 2px;
301+
padding-left: 0;
302+
text-align: center;
290303
}
291304
}
292305

@@ -298,8 +311,9 @@ $status-radius-4: $corner-radius * 2;
298311
margin-right: $challenge-space-90;
299312

300313
@include xs-to-sm {
301-
padding-bottom: $challenge-space-30 * 2;
302-
margin-right: 0;
314+
margin-top: $challenge-space-30;
315+
margin-bottom: $challenge-space-45;
316+
margin-right: 10px;
303317
}
304318

305319
// Tooltip component adds this div before its children

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

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class ListingContainer extends React.Component {
7272
}
7373

7474
if (!communitiesList.loadingUuid
75-
&& (Date.now() - communitiesList.timestamp > USER_GROUP_MAXAGE)) {
75+
&& (Date.now() - communitiesList.timestamp > USER_GROUP_MAXAGE)) {
7676
getCommunitiesList(auth);
7777
}
7878

@@ -84,7 +84,9 @@ export class ListingContainer extends React.Component {
8484

8585
if (mounted) {
8686
logger.error('Attempt to mount multiple instances of ChallengeListingPageContainer at the same time!');
87-
} else mounted = true;
87+
} else {
88+
mounted = true;
89+
}
8890

8991
// if (BUCKETS.PAST !== activeBucket) {
9092
// dropChallenges();
@@ -95,7 +97,11 @@ export class ListingContainer extends React.Component {
9597
const groups = selectedCommunity.groupIds && selectedCommunity.groupIds.length
9698
? [selectedCommunity.groupIds[0]] : [];
9799
// update the challenge listing filter for selected community
98-
setFilter({ ..._.clone(filter), groups, events: [] });
100+
setFilter({
101+
..._.clone(filter),
102+
groups,
103+
events: [],
104+
});
99105
}
100106
// }
101107
}
@@ -153,8 +159,16 @@ export class ListingContainer extends React.Component {
153159
const f = this.getBackendFilter();
154160

155161
const fA = {
156-
back: { ..._.clone(f.back), startDateEnd: null, endDateStart: null },
157-
front: { ..._.clone(f.front), startDateEnd: null, endDateStart: null },
162+
back: {
163+
..._.clone(f.back),
164+
startDateEnd: null,
165+
endDateStart: null,
166+
},
167+
front: {
168+
..._.clone(f.front),
169+
startDateEnd: null,
170+
endDateStart: null,
171+
},
158172
};
159173

160174
if (prevProps.filterState.recommended !== filterState.recommended && filterState.recommended) {
@@ -250,8 +264,9 @@ export class ListingContainer extends React.Component {
250264
}
251265

252266
componentWillUnmount() {
253-
if (mounted) mounted = false;
254-
else {
267+
if (mounted) {
268+
mounted = false;
269+
} else {
255270
logger.error('A mounted instance of ChallengeListingPageContainer is not tracked as mounted!');
256271
}
257272
if (this.autoRefreshTimerId) clearTimeout(this.autoRefreshTimerId);

0 commit comments

Comments
 (0)