Skip to content

Commit c53bd00

Browse files
vas3avas3a
committed
TSJR-217 - add principal skills to user profile
1 parent 7ffe3bc commit c53bd00

File tree

16 files changed

+213
-151
lines changed

16 files changed

+213
-151
lines changed

‎src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,28 @@
2727
.skillsWrap {
2828
padding-bottom: $sp-8;
2929

30+
31+
:global(.large-subtitle) {
32+
margin-bottom: $sp-4;
33+
}
34+
3035
@include ltemd {
3136
padding-bottom: $sp-4;
3237
}
3338
}
3439
}
40+
41+
.principalSkillsWrap {
42+
background: $black-5;
43+
border-radius: $sp-2;
44+
padding: $sp-6;
45+
+ .additionalSkillsWrap {
46+
margin-top: $sp-6;
47+
}
48+
}
49+
50+
.principalSkills {
51+
display: flex;
52+
flex-wrap: wrap;
53+
gap: $sp-2;
54+
}

‎src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
22
import { useSearchParams } from 'react-router-dom'
3-
import { orderBy } from 'lodash'
3+
import { filter, orderBy } from 'lodash'
44

5-
import { UserProfile, UserSkill } from '~/libs/core'
6-
import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified } from '~/libs/shared'
5+
import { UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core'
6+
import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill } from '~/libs/shared'
77
import { Button } from '~/libs/ui'
88

99
import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
@@ -33,11 +33,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
3333
['desc', 'asc'],
3434
) as UserSkill[], [props.profile.skills])
3535

36+
const principalSkills = useMemo(() => (
37+
filter(memberSkills, s => s.displayMode?.name === UserSkillDisplayModes.principal)
38+
), [memberSkills])
39+
40+
const additionalSkills = useMemo(() => (
41+
filter(memberSkills, s => s.displayMode?.name !== UserSkillDisplayModes.principal)
42+
), [memberSkills])
43+
3644
const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => {
3745
const grouped: { [key: string]: UserSkill[] } = {}
3846
const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {}
3947

40-
memberSkills.forEach((skill: UserSkill) => {
48+
additionalSkills.forEach((skill: UserSkill) => {
4149
if (grouped[skill.category.name]) {
4250
grouped[skill.category.name].push(skill)
4351
} else {
@@ -52,7 +60,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
5260
})
5361

5462
return sortedGroupedSkillsByCategory
55-
}, [memberSkills])
63+
}, [additionalSkills])
5664

5765
const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
5866
= useState<boolean>(false)
@@ -93,14 +101,6 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
93101

94102
return (
95103
<div className={styles.container}>
96-
{
97-
skillsRenderer && memberSkills.length > 0 && (
98-
<div className={styles.skillsWrap}>
99-
{skillsRenderer(memberSkills)}
100-
</div>
101-
)
102-
}
103-
104104
<div className={styles.titleWrap}>
105105
<div className={styles.headerWrap}>
106106
<h3>Skills</h3>
@@ -122,11 +122,42 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
122122
</div>
123123
</div>
124124

125+
{
126+
skillsRenderer && memberSkills.length > 0 && (
127+
<div className={styles.skillsWrap}>
128+
{skillsRenderer(memberSkills)}
129+
</div>
130+
)
131+
}
132+
125133
<div className={styles.skillsWrap}>
126-
{memberSkills.length > 0 && (
127-
<GroupedSkillsUI
128-
groupedSkillsByCategory={groupedSkillsByCategory}
129-
/>
134+
{principalSkills.length > 0 && (
135+
<div className={styles.principalSkillsWrap}>
136+
<div className='large-subtitle'>
137+
Principal Skills
138+
</div>
139+
<div className={styles.principalSkills}>
140+
{principalSkills.map((skill: UserSkill) => (
141+
<SkillPill
142+
skill={skill}
143+
key={skill.id}
144+
theme={isSkillVerified(skill) ? 'verified' : 'dark'}
145+
/>
146+
))}
147+
</div>
148+
</div>
149+
)}
150+
{additionalSkills.length > 0 && (
151+
<div className={styles.additionalSkillsWrap}>
152+
{principalSkills.length > 0 && (
153+
<div className='large-subtitle'>
154+
Additional Skills
155+
</div>
156+
)}
157+
<GroupedSkillsUI
158+
groupedSkillsByCategory={groupedSkillsByCategory}
159+
/>
160+
</div>
130161
)}
131162
{!memberSkills.length && (
132163
<EmptySection

‎src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
@import '@libs/ui/styles/includes';
22

3+
.skillsModalHeader {
4+
:global(.body-main-normal) {
5+
margin-top: $sp-2;
6+
}
7+
}
8+
39
.container {
410
display: flex;
511
flex-direction: column;
612

7-
:global(.body-main-bold) {
8-
font-size: 20px;
9-
margin-bottom: $sp-2;
10-
}
11-
1213
.skillPicker {
1314
margin-top: $sp-4;
1415
}
16+
17+
:global(.input-wrapper) {
18+
margin-top: $sp-2;
19+
}
1520
}
1621

1722
.modalButtons {

‎src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,14 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
4040
onClose={props.onClose}
4141
open
4242
size='lg'
43-
title='My Skills'
43+
title={(
44+
<div className={styles.skillsModalHeader}>
45+
<h3>Your skills</h3>
46+
<p className='body-main-normal'>
47+
We use your skills to connect you to the right opportunities.
48+
</p>
49+
</div>
50+
)}
4451
buttons={(
4552
<div className={styles.modalButtons}>
4653
<Button
@@ -58,10 +65,6 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
5865
)}
5966
>
6067
<div className={styles.container}>
61-
<p className='body-main-bold'>What are your skills?</p>
62-
<p>
63-
Understanding your skills will allow us to connect you to the right opportunities.
64-
</p>
6568
<div className={styles.skillPicker}>
6669
{editor.formInput}
6770
</div>

‎src/apps/talent-search/src/components/popular-skills/PopularSkills.tsx‎

Lines changed: 7 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useCallback } from 'react'
22

33
import { SkillPill } from '~/libs/shared'
4-
import { UserSkill } from '~/libs/core'
4+
import { SearchUserSkill } from '~/libs/core'
55

66
import { SKILL_SEARCH_LIMIT } from '../../config'
77

@@ -10,162 +10,82 @@ import styles from './PopularSkills.module.scss'
1010
// TODO: Make this configurable, or read from a service. We need to discuss
1111
// how we want to handle this.
1212
// TODO: update this with the real list of popular skills
13-
const popularSkills: UserSkill[] = [
13+
const popularSkills: SearchUserSkill[] = [
1414
{
15-
category: {
16-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
17-
name: 'Programming and Development',
18-
},
1915
id: '63bb7cfc-b0d4-4584-820a-18c503b4b0fe',
20-
levels: [],
2116
name: 'Java',
2217
},
2318
{
24-
category: {
25-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
26-
name: 'Programming and Development',
27-
},
2819
id: '0d86f8cb-e509-4ca8-b9f8-e65d909cc6eb',
29-
levels: [],
3020
name: 'MySQL',
3121
},
3222
{
33-
category: {
34-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
35-
name: 'Programming and Development',
36-
},
3723
id: '32899253-5989-4c33-9948-cad29c9e0ab0',
38-
levels: [],
3924
name: 'Node.js',
4025
},
4126
{
42-
category: {
43-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
44-
name: 'Programming and Development',
45-
},
4627
id: '9c42c728-47ff-4b20-916c-560739bad1ee',
47-
levels: [],
4828
name: 'Cascading Style Sheets (CSS)',
4929
},
5030
{
51-
category: {
52-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
53-
name: 'Programming and Development',
54-
},
5531
id: '16ee1403-8e73-497d-a766-623eefd3c806',
56-
levels: [],
5732
name: 'JavaScript',
5833
},
5934
{
60-
category: {
61-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
62-
name: 'Programming and Development',
63-
},
6435
id: '99e5fc45-5fc0-4794-a578-f42dfabcbf74',
65-
levels: [],
6636
name: 'Machine Learning',
6737
},
6838
{
69-
category: {
70-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
71-
name: 'Programming and Development',
72-
},
7339
id: 'a0da6acf-2cf8-48f0-ba4a-30d18bc75052',
74-
levels: [],
7540
name: 'Unit Testing',
7641
},
7742
{
78-
category: {
79-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
80-
name: 'Programming and Development',
81-
},
8243
id: '7e8641e5-e5c1-4ab6-a8f4-1fd6a8686dbe',
83-
levels: [],
8444
name: 'Angular',
8545
},
8646
{
87-
category: {
88-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
89-
name: 'Programming and Development',
90-
},
9147
id: 'f0597e53-9a6d-40d6-8639-4d5a9ead190f',
92-
levels: [],
9348
name: '.NET Framework',
9449
},
9550
{
96-
category: {
97-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
98-
name: 'Programming and Development',
99-
},
10051
id: 'fcbac194-35ab-4a31-aa7c-a2867fff9c4b',
101-
levels: [],
10252
name: 'Python',
10353
},
10454
{
105-
category: {
106-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
107-
name: 'Programming and Development',
108-
},
10955
id: 'adf9d7b9-d639-4a73-8772-673b3d4f41b0',
110-
levels: [],
11156
name: 'Android',
11257
},
11358
{
114-
category: {
115-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
116-
name: 'Programming and Development',
117-
},
11859
id: '130323ce-7d88-4141-9e2b-904994f026a1',
119-
levels: [],
12060
name: 'Figma (Design Software)',
12161
},
12262
{
123-
category: {
124-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
125-
name: 'Programming and Development',
126-
},
12763
id: '9eaf6049-402a-481c-ac82-87a0826128c7',
128-
levels: [],
12964
name: 'Microsoft Azure',
13065
},
13166
{
132-
category: {
133-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
134-
name: 'Programming and Development',
135-
},
13667
id: 'ced0b36c-6057-48e1-a263-2588fb91296b',
137-
levels: [],
13868
name: 'Adobe Illustrator',
13969
},
14070
{
141-
category: {
142-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
143-
name: 'Programming and Development',
144-
},
14571
id: 'be85b096-b841-45b4-a5cb-1d3ee7ce1126',
146-
levels: [],
14772
name: 'Docker',
14873
},
14974
{
150-
category: {
151-
id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
152-
name: 'Programming and Development',
153-
},
15475
id: '4458454c-9a97-4332-a545-6546e240dab6',
155-
levels: [],
15676
name: 'React.js',
15777
},
15878
]
15979

16080
interface PopularSkillsProps {
161-
onChange: (skills: UserSkill[]) => void
162-
selectedSkills: UserSkill[]
81+
onChange: (skills: SearchUserSkill[]) => void
82+
selectedSkills: SearchUserSkill[]
16383
}
16484

16585
const PopularSkills: FC<PopularSkillsProps> = props => {
16686

167-
const toggleSkill = useCallback((skill: UserSkill) => {
168-
let newFilter: Array<UserSkill> = []
87+
const toggleSkill = useCallback((skill: SearchUserSkill) => {
88+
let newFilter: Array<SearchUserSkill> = []
16989
let deleted: boolean = false
17090

17191
// Either delete the value from the list, if we're toggling one that's already in the list
@@ -188,7 +108,7 @@ const PopularSkills: FC<PopularSkillsProps> = props => {
188108
props.onChange.call(undefined, newFilter)
189109
}, [props.onChange, props.selectedSkills])
190110

191-
function isSelected(skill: UserSkill): boolean {
111+
function isSelected(skill: SearchUserSkill): boolean {
192112
return !!props.selectedSkills.find(s => s.id === skill.id)
193113
}
194114

0 commit comments

Comments
 (0)