Skip to content

Commit a47274f

Browse files
kkartunovkkartunov
authored
Merge pull request #819 from topcoder-platform/profiles-app
Profiles app -> dev
2 parents 187787a + 8259fb4 commit a47274f

File tree

14 files changed

+221
-66
lines changed

14 files changed

+221
-66
lines changed

‎src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch, FC, SetStateAction, useState } from 'react'
1+
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
22
import { toast } from 'react-toastify'
33
import { bind, trim } from 'lodash'
44
import classNames from 'classnames'
@@ -24,6 +24,12 @@ const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
2424
const countryLookup: CountryLookup[] | undefined
2525
= useCountryLookup()
2626

27+
const contries = useMemo(() => (countryLookup || []).map((cl: CountryLookup) => ({
28+
label: cl.country,
29+
value: cl.countryCode,
30+
}))
31+
.sort((a, b) => a.label.localeCompare(b.label)), [countryLookup])
32+
2733
const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
2834
country: props.profile.homeCountryCode || props.profile.competitionCountryCode,
2935
...props.profile.addresses ? props.profile.addresses[0] : {},
@@ -162,10 +168,7 @@ const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
162168
value={formValues.zip}
163169
/>
164170
<InputSelect
165-
options={(countryLookup || []).map((cl: CountryLookup) => ({
166-
label: cl.country,
167-
value: cl.countryCode,
168-
}))}
171+
options={contries}
169172
value={formValues.country}
170173
onChange={bind(handleFormValueChange, this, 'country')}
171174
name='country'

‎src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingCard.module.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,12 @@
3232
line-height: 18px;
3333
}
3434
}
35+
36+
.link {
37+
font-size: 14px;
38+
line-height: 14px;
39+
font-weight: $font-weight-medium;
40+
font-family: $font-roboto;
41+
}
3542
}
3643
}

‎src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingCard.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
2-
import { FC, useMemo } from 'react'
2+
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
33

44
import { useMemberStats, UserProfile, UserStats } from '~/libs/core'
55

6+
import { MemberRatingInfoModal } from './MemberRatingInfoModal'
67
import styles from './MemberRatingCard.module.scss'
78

89
interface MemberRatingCardProps {
@@ -12,6 +13,8 @@ interface MemberRatingCardProps {
1213
const MemberRatingCard: FC<MemberRatingCardProps> = (props: MemberRatingCardProps) => {
1314
const memberStats: UserStats | undefined = useMemberStats(props.profile.handle)
1415

16+
const [isInfoModalOpen, setIsInfoModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
17+
1518
const maxPercentile: number = useMemo(() => {
1619
let memberPercentile: number = 0
1720
if (memberStats?.DATA_SCIENCE) {
@@ -33,6 +36,14 @@ const MemberRatingCard: FC<MemberRatingCardProps> = (props: MemberRatingCardProp
3336
return memberPercentile
3437
}, [memberStats])
3538

39+
function handleInfoModalClose(): void {
40+
setIsInfoModalOpen(false)
41+
}
42+
43+
function handleInfoModalOpen(): void {
44+
setIsInfoModalOpen(true)
45+
}
46+
3647
return memberStats?.maxRating?.rating ? (
3748
<div className={styles.container}>
3849
<div className={styles.innerWrap}>
@@ -48,9 +59,17 @@ const MemberRatingCard: FC<MemberRatingCardProps> = (props: MemberRatingCardProp
4859
<p className={styles.name}>Percentile</p>
4960
</div>
5061
<div className='body-small-medium'>
51-
<a href='#' className={styles.link}>What is this?</a>
62+
<button type='button' className={styles.link} onClick={handleInfoModalOpen}>What is this?</button>
5263
</div>
5364
</div>
65+
66+
{
67+
isInfoModalOpen && (
68+
<MemberRatingInfoModal
69+
onClose={handleInfoModalClose}
70+
/>
71+
)
72+
}
5473
</div>
5574
) : <></>
5675
}

‎src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/MemberRatingInfoModal.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FC } from 'react'
2+
3+
import { BaseModal } from '~/libs/ui'
4+
5+
interface MemberRatingInfoModalProps {
6+
onClose: () => void
7+
}
8+
9+
const MemberRatingInfoModal: FC<MemberRatingInfoModalProps> = (props: MemberRatingInfoModalProps) => (
10+
<BaseModal
11+
onClose={props.onClose}
12+
open
13+
title='What are ratings and percentiles'
14+
>
15+
<p>
16+
Topcoder ratings and percentiles are numerical values that change
17+
depending on how well someone does in coding competitions,
18+
with higher ratings indicating better performance.
19+
</p>
20+
</BaseModal>
21+
)
22+
23+
export default MemberRatingInfoModal

‎src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as MemberRatingInfoModal } from './MemberRatingInfoModal'

‎src/apps/profiles/src/member-profile/links/MemberLinks.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
width: 24px;
2626
height: 24px;
2727

28-
path {
28+
path:not([stroke-linecap]) {
2929
fill: #333333;
3030
}
3131
}

‎src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,58 +27,88 @@
2727
align-items: center;
2828
justify-content: space-between;
2929

30-
& > div:nth-child(1) {
30+
&>div:nth-child(1) {
3131
margin-right: $sp-2;
32-
min-width: 100px;
32+
min-width: 150px;
3333
}
3434

35-
& > div:nth-child(2) {
35+
&>div:nth-child(2) {
3636
flex: 1;
3737
}
38+
}
3839

39-
.formCTAs {
40-
display: flex;
41-
align-items: center;
42-
margin-bottom: $sp-4;
43-
44-
svg {
45-
width: 32px;
46-
height: 32px;
47-
}
48-
}
40+
.formCTAs {
41+
margin-top: $sp-2;
4942
}
5043
}
5144

5245
.links {
53-
margin-bottom: $sp-15;
46+
margin-bottom: $sp-4;
47+
padding: $sp-4 0 $sp-2;
48+
border-bottom: 1px solid $black-20;
49+
50+
@include ltelg {
51+
display: flex;
52+
flex-direction: column;
53+
}
5454

5555
&.noLinks {
5656
margin-bottom: 0;
57+
padding: 0;
58+
border: none;
5759
}
5860

5961
.linkItemWrap {
6062
display: flex;
6163
align-items: center;
62-
justify-content: space-between;
64+
justify-content: flex-start;
6365
margin-bottom: $sp-2;
64-
border-radius: 8px;
65-
padding: $sp-2;
66-
border: 1px solid $black-10;
66+
67+
>svg {
68+
width: 24px;
69+
height: 24px;
70+
71+
path:not([stroke-linecap]) {
72+
fill: $black-100;
73+
}
74+
75+
}
6776

6877
.linkItem {
78+
border-radius: 4px;
79+
padding: $sp-2 $sp-4;
80+
border: 1px solid $black-40;
81+
flex: 1;
6982
display: flex;
7083
align-items: center;
84+
justify-content: space-between;
85+
margin-left: $sp-4;
7186

72-
p {
73-
@include ltelg {
87+
.linkLabelWrap {
88+
display: flex;
89+
flex-direction: column;
90+
align-items: flex-start;
91+
92+
small {
93+
font-size: 11px;
94+
line-height: 11px;
95+
font-weight: $font-weight-medium;
96+
color: $turq-160;
97+
margin-bottom: $sp-1;
98+
}
99+
100+
p {
74101
word-break: break-all;
75102
}
76103
}
77104

78-
svg {
79-
width: 16px;
80-
height: 16px;
81-
margin-right: $sp-2;
105+
button {
106+
padding-right: 0;
107+
108+
svg {
109+
width: 24px;
110+
height: 24px;
111+
}
82112
}
83113
}
84114
}

‎src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.tsx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
166166
onClose={props.onClose}
167167
open
168168
size='lg'
169-
title='My Links'
169+
title='Social Links'
170170
buttons={(
171171
<div className={styles.modalButtons}>
172172
<Button
@@ -184,18 +184,24 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
184184
)}
185185
>
186186
<div className={styles.container}>
187+
<p>Provide links to your social accounts.</p>
188+
187189
<div className={classNames(styles.links, currentMemberLinks?.length ? '' : styles.noLinks)}>
188190
{
189191
currentMemberLinks?.map((trait: UserTrait) => (
190192
<div className={styles.linkItemWrap} key={`member-link-${trait.name}`}>
193+
{renderLinkIcon(trait.name)}
191194
<div className={styles.linkItem}>
192-
{renderLinkIcon(trait.name)}
193-
<p>{trait.url}</p>
195+
<div className={styles.linkLabelWrap}>
196+
<small>{trait.name}</small>
197+
<p>{trait.url}</p>
198+
</div>
199+
<Button
200+
size='lg'
201+
icon={IconOutline.TrashIcon}
202+
onClick={bind(handleRemoveLink, this, trait)}
203+
/>
194204
</div>
195-
<Button
196-
icon={IconOutline.TrashIcon}
197-
onClick={bind(handleRemoveLink, this, trait)}
198-
/>
199205
</div>
200206
))
201207
}
@@ -211,15 +217,15 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
211217
value={selectedLinkType}
212218
onChange={handleSelectedLinkTypeChange}
213219
name='linkType'
214-
label='Type *'
220+
label='Type'
215221
error={formErrors.selectedLinkType}
216222
placeholder='Select a link type'
217223
dirty
218224
/>
219225

220226
<InputText
221227
name='url'
222-
label='URL *'
228+
label='URL'
223229
error={formErrors.url}
224230
placeholder='Enter a URL'
225231
dirty
@@ -228,14 +234,13 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
228234
onChange={handleURLChange}
229235
value={selectedLinkURL}
230236
/>
231-
232-
<div className={styles.formCTAs}>
233-
<Button
234-
icon={IconOutline.PlusCircleIcon}
235-
onClick={handleFormAction}
236-
size='xl'
237-
/>
238-
</div>
237+
</div>
238+
<div className={styles.formCTAs}>
239+
<Button
240+
onClick={handleFormAction}
241+
secondary
242+
label='+ Additional Link'
243+
/>
239244
</div>
240245
</form>
241246
</div>

‎src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch, FC, SetStateAction, useState } from 'react'
1+
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
22
import { bind, trim } from 'lodash'
33
import { toast } from 'react-toastify'
44

@@ -22,6 +22,12 @@ const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocation
2222
const countryLookup: CountryLookup[] | undefined
2323
= useCountryLookup()
2424

25+
const contries = useMemo(() => (countryLookup || []).map((cl: CountryLookup) => ({
26+
label: cl.country,
27+
value: cl.countryCode,
28+
}))
29+
.sort((a, b) => a.label.localeCompare(b.label)), [countryLookup])
30+
2531
const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
2632
country: props.profile.homeCountryCode || props.profile.competitionCountryCode,
2733
...props.profile.addresses ? props.profile.addresses[0] : {},
@@ -112,10 +118,7 @@ const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocation
112118
placeholder='Select your city name'
113119
/>
114120
<InputSelect
115-
options={(countryLookup || []).map((cl: CountryLookup) => ({
116-
label: cl.country,
117-
value: cl.countryCode,
118-
}))}
121+
options={contries}
119122
value={formValues.country}
120123
onChange={bind(handleFormValueChange, this, 'country')}
121124
name='country'

‎src/apps/profiles/src/member-profile/tc-achievements/MemberRolesInfoModal/MemberRolesInfoModal.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FC } from 'react'
2+
3+
import { BaseModal } from '~/libs/ui'
4+
5+
interface MemberRolesInfoModalProps {
6+
onClose: () => void
7+
}
8+
9+
const MemberRolesInfoModal: FC<MemberRolesInfoModalProps> = (props: MemberRolesInfoModalProps) => (
10+
<BaseModal
11+
onClose={props.onClose}
12+
open
13+
title='What are special roles'
14+
>
15+
<p>
16+
Topcoder copilots are skilled project managers and technical expert
17+
who lead project on the platform. Topcoder reviewers evaluate solutions
18+
submitted on the platform to ensure quality and fairness.
19+
</p>
20+
</BaseModal>
21+
)
22+
23+
export default MemberRolesInfoModal

0 commit comments

Comments
 (0)