Skip to content

Commit 182b8f7

Browse files
kkartunovkkartunov
authored
Merge pull request #6711 from topcoder-platform/feat/badges-box
GAME-205 Feat/badges box -> dev
2 parents ef882a1 + afe679d commit 182b8f7

File tree

13 files changed

+419
-8
lines changed

13 files changed

+419
-8
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ workflows:
363363
filters:
364364
branches:
365365
only:
366-
- feature/dice-setup
366+
- feat/badges-box
367367
# This is beta env for production soft releases
368368
- "build-prod-beta":
369369
context : org-global

‎src/shared/actions/page/profile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ async function getGamificationBadgesInit(handle) {
2121
* @param {String} handle Topcoder member handle.
2222
* @return {Action}
2323
*/
24-
async function getGamificationBadgesDone(handle) {
24+
async function getGamificationBadgesDone(handle, limit) {
2525
try {
2626
const memberInfo = await fetch(`${config.API.V5}/members/${handle}`)
2727
.then(response => response.json());
28-
const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}`)
28+
const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}&limit=${limit || 4}`)
2929
.then(response => response.json());
3030

3131
return {

‎src/shared/components/ProfileBadgesPage/index.jsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React, { useState } from 'react';
2+
import PT from 'prop-types';
3+
import { Link } from 'react-router-dom';
4+
import { get } from 'lodash';
5+
import { Modal } from 'topcoder-react-ui-kit';
6+
import IconClose from 'assets/images/tc-edu/icon-close-big.svg';
7+
import FallBackAwardIcon from 'assets/images/default-award.svg';
8+
import md from 'utils/markdown';
9+
import { format } from 'date-fns';
10+
import AwardModal from '../ProfilePage/Awards/AwardModal';
11+
12+
import style from './styles.scss';
13+
14+
const ProfileBadges = ({ badges, handleParam }) => {
15+
const [showModal, setShowModal] = useState(false);
16+
const [modalData, setModalData] = useState({});
17+
18+
return (
19+
<div styleName="outer-container">
20+
<Link
21+
to={`/members/${handleParam}`}
22+
styleName="memberPageBackLink"
23+
>
24+
<svg
25+
xmlns="http://www.w3.org/2000/svg"
26+
width="14"
27+
height="12"
28+
fill="none"
29+
viewBox="0 0 14 12"
30+
>
31+
<path
32+
fill="#137D60"
33+
fillRule="evenodd"
34+
d="M6.766 11.366a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 010-1.132l4.8-4.8a.8.8 0 111.132 1.132L3.33 5.2h9.27a.8.8 0 010 1.6H3.33l3.435 3.434a.8.8 0 010 1.132z"
35+
clipRule="evenodd"
36+
/>
37+
</svg>
38+
Return to Profile
39+
</Link>
40+
<div styleName="badgesWrap">
41+
<div styleName="seactionTitle">COMMUNITY AWARDS & HONORS</div>
42+
<div styleName="badgesGrid">
43+
{
44+
badges.rows.map((reward) => {
45+
const title = get(reward, 'org_badge.badge_name');
46+
const imageUrl = get(reward, 'org_badge.badge_image_url');
47+
let description = get(reward, 'org_badge.badge_description');
48+
if (description) {
49+
description = md(description);
50+
}
51+
let awardedAt = get(reward, 'awarded_at');
52+
if (awardedAt) {
53+
awardedAt = format(new Date(awardedAt), 'PPP');
54+
}
55+
56+
return (
57+
<div
58+
role="presentation"
59+
styleName="awardBadge"
60+
onClick={() => {
61+
setShowModal(true);
62+
setModalData({
63+
title,
64+
description,
65+
imageUrl,
66+
awardedAt,
67+
});
68+
}}
69+
>
70+
{
71+
imageUrl ? (
72+
<img src={imageUrl} alt="award-badge" styleName="image" />
73+
) : (
74+
<FallBackAwardIcon styleName="image" />
75+
)
76+
}
77+
<div styleName="title">
78+
<span>
79+
<div dangerouslySetInnerHTML={{ __html: title }} />
80+
</span>
81+
</div>
82+
</div>
83+
);
84+
})
85+
}
86+
</div>
87+
</div>
88+
{
89+
showModal && (
90+
<Modal onCancel={() => setShowModal(false)} theme={style}>
91+
<div styleName="award-modal">
92+
<div styleName="header">
93+
<h2 styleName="title">Community Awards & Honors</h2>
94+
<div styleName="icon" role="presentation" onClick={() => setShowModal(false)}>
95+
<IconClose />
96+
</div>
97+
</div>
98+
<hr />
99+
100+
<AwardModal
101+
modalData={modalData}
102+
/>
103+
</div>
104+
</Modal>
105+
)
106+
}
107+
</div>
108+
);
109+
};
110+
111+
ProfileBadges.defaultProps = {
112+
badges: {},
113+
};
114+
115+
ProfileBadges.propTypes = {
116+
badges: PT.shape(),
117+
handleParam: PT.string.isRequired,
118+
};
119+
120+
export default ProfileBadges;

‎src/shared/components/ProfileBadgesPage/styles.scss‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/* stylelint-disable no-descending-specificity */
2+
@import "~styles/mixins";
3+
4+
.outer-container {
5+
width: 100%;
6+
max-width: $screen-max;
7+
margin: 0 auto;
8+
display: flex;
9+
flex-direction: column;
10+
11+
@include xs-to-md {
12+
margin: 0 32px;
13+
}
14+
15+
.memberPageBackLink {
16+
text-transform: uppercase;
17+
color: $listing-checkbox-green;
18+
font-weight: 700;
19+
font-family: Roboto, sans-serif;
20+
margin: 32px 0;
21+
display: flex;
22+
align-items: center;
23+
24+
svg {
25+
margin-right: 6px;
26+
}
27+
}
28+
29+
.badgesWrap {
30+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
31+
border-radius: 8px;
32+
display: flex;
33+
flex-direction: column;
34+
padding: 32px;
35+
margin-bottom: 32px;
36+
37+
.seactionTitle {
38+
@include barlow-medium;
39+
40+
font-weight: 600;
41+
color: #2a2a2a;
42+
font-size: 22px;
43+
line-height: 26px;
44+
text-transform: uppercase;
45+
padding-bottom: 24px;
46+
border-bottom: 2px solid #e9e9e9;
47+
}
48+
49+
.badgesGrid {
50+
display: grid;
51+
grid-template-columns: repeat(6, 1fr);
52+
53+
@include xs-to-sm {
54+
grid-template-columns: repeat(2, 1fr);
55+
}
56+
57+
@include md {
58+
grid-template-columns: repeat(4, 1fr);
59+
}
60+
61+
.awardBadge {
62+
display: flex;
63+
flex-direction: column;
64+
align-items: center;
65+
justify-content: center;
66+
cursor: pointer;
67+
padding-top: 32px;
68+
69+
.image {
70+
width: 100px;
71+
height: 100px;
72+
}
73+
74+
.title {
75+
@include roboto-bold;
76+
$color: $tco-black;
77+
78+
font-size: 12px;
79+
font-weight: 700;
80+
line-height: 16px;
81+
display: flex;
82+
flex-direction: column;
83+
justify-content: center;
84+
text-align: center;
85+
align-items: center;
86+
max-width: 130px;
87+
margin-top: 17px;
88+
text-transform: uppercase;
89+
90+
@include xs-to-sm {
91+
max-width: unset;
92+
}
93+
}
94+
}
95+
}
96+
}
97+
}
98+
99+
.award-modal {
100+
padding-bottom: 10px;
101+
border-radius: 8px;
102+
margin: 25px 32px 32px;
103+
104+
.header {
105+
display: flex;
106+
justify-content: space-between;
107+
margin-bottom: 25px;
108+
109+
.title {
110+
@include barlow-medium;
111+
112+
font-weight: 600;
113+
color: #2a2a2a;
114+
font-size: 22px;
115+
line-height: 26px;
116+
text-transform: uppercase;
117+
}
118+
119+
.icon {
120+
cursor: pointer;
121+
margin-top: 5px;
122+
}
123+
}
124+
}
125+
126+
hr {
127+
opacity: 0.5;
128+
}
129+
130+
.container {
131+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
132+
border-radius: 8px;
133+
min-width: 600px;
134+
135+
@include xs-to-sm {
136+
width: 90%;
137+
min-width: unset;
138+
}
139+
}
140+
141+
.overlay {
142+
background-color: #0c0c0c;
143+
opacity: 0.85;
144+
}

‎src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
border-radius: 8px;
77
display: flex;
88
cursor: pointer;
9+
min-width: 316px;
910

1011
.image {
1112
width: 48px;

‎src/shared/components/ProfilePage/Awards/AwardModal/index.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const AwatarModal = ({
88
modalData,
99
}) => {
1010
const {
11-
title, description, imageUrl,
11+
title, description, imageUrl, awardedAt,
1212
} = modalData;
1313

1414
return (
@@ -25,6 +25,9 @@ const AwatarModal = ({
2525
<div styleName="title">
2626
<span>{title}</span>
2727
</div>
28+
{
29+
awardedAt && <div styleName="awardedAt">{`Awarded on ${awardedAt}`}</div>
30+
}
2831

2932
<div styleName="description">{description}</div>
3033

@@ -41,6 +44,7 @@ AwatarModal.propTypes = {
4144
modalData: PT.shape(
4245
{
4346
title: PT.string,
47+
awardedAt: PT.string,
4448
description: PT.string,
4549
imageUrl: PT.string,
4650
},

‎src/shared/components/ProfilePage/Awards/AwardModal/styles.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
justify-content: center;
2828
flex-direction: column;
2929

30+
@include xs-to-md {
31+
align-items: center;
32+
}
33+
3034
.title {
3135
@include roboto-bold;
3236

@@ -40,14 +44,24 @@
4044
}
4145
}
4246

47+
.awardedAt {
48+
@include roboto-bold;
49+
50+
color: $listing-placeholder-gray;
51+
font-size: 12px;
52+
line-height: 16px;
53+
text-transform: uppercase;
54+
margin-top: 8px;
55+
}
56+
4357
.description {
4458
@include brackets-content;
4559

4660
font-weight: 400;
4761
color: $tco-black;
4862
font-size: 16px;
4963
line-height: 24px;
50-
margin-top: 10px;
64+
margin-top: 16px;
5165
}
5266

5367
@include xs-to-md {

0 commit comments

Comments
 (0)