Skip to content

Commit 2d26d40

Browse files
vas3avas3a
authored
Merge pull request #789 from topcoder-platform/MP-172_update-profile-page-when-empty
MP-172 update profile page when empty -> dev
2 parents 382813c + 25ab120 commit 2d26d40

File tree

19 files changed

+250
-112
lines changed

19 files changed

+250
-112
lines changed

‎src/apps/profiles/src/components/AddButton/AddButton.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.wrap {
4+
margin-top: $sp-2;
5+
6+
&:global(.mt0) {
7+
margin-top: 0;
8+
}
9+
}
10+
11+
.addButton {
12+
padding: 0 !important;
13+
color: $black-100;
14+
15+
svg {
16+
width: 20px;
17+
height: 20px;
18+
}
19+
}

‎src/apps/profiles/src/components/AddButton/AddButton.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { FC } from 'react'
2+
import classNames from 'classnames'
3+
4+
import { Button, IconOutline } from '~/libs/ui'
5+
6+
import styles from './AddButton.module.scss'
7+
8+
interface AddButtonProps {
9+
className?: string
10+
label?: string
11+
onClick: () => void
12+
variant?: 'mt0'
13+
}
14+
15+
const AddButton: FC<AddButtonProps> = props => (
16+
<div className={classNames(styles.wrap, props.variant, props.className)}>
17+
<Button
18+
icon={IconOutline.PlusIcon}
19+
onClick={props.onClick}
20+
className={styles.addButton}
21+
size='lg'
22+
label={props.label}
23+
link
24+
variant='linkblue'
25+
/>
26+
</div>
27+
)
28+
29+
export default AddButton

‎src/apps/profiles/src/components/AddButton/index.ts‎

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

‎src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { FC } from 'react'
2+
import classNames from 'classnames'
23

34
import { Button, IconOutline } from '~/libs/ui'
45

56
import styles from './EditMemberPropertyBtn.module.scss'
67

78
interface EditMemberPropertyBtnProps {
9+
className?: string
810
onClick: () => void
911
}
1012

1113
const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMemberPropertyBtnProps) => (
1214
<Button
1315
icon={IconOutline.PencilIcon}
1416
onClick={props.onClick}
15-
className={styles.editMemberPropertyBtn}
17+
className={classNames(styles.editMemberPropertyBtn, props.className)}
1618
size='lg'
1719
/>
1820
)

‎src/apps/profiles/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@ export * from './LogoDesignDetailsModal'
1515
export * from './WebDesignDetailsModal'
1616
export * from './DesignF2FDetailsModal'
1717
export * from './EditMemberPropertyBtn'
18+
export * from './AddButton'
1819
export * from './EmptySection'

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,14 @@
1616
display: flex;
1717
align-items: center;
1818
justify-content: center;
19-
margin-bottom: $sp-10;
19+
margin-bottom: $sp-4;
2020
&.emptyDesc {
2121
margin-bottom: 0;
2222
}
2323
}
2424
}
25+
26+
.empty {
27+
height: auto;
28+
margin-top: $sp-4;
29+
}

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

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { KeyedMutator } from 'swr'
44
import classNames from 'classnames'
55

66
import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
7+
import { Button } from '~/libs/ui'
78

8-
import { EditMemberPropertyBtn, EmptySection } from '../../components'
9+
import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
910
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
1011

1112
import { ModifyAboutMeModal } from './ModifyAboutMeModal'
@@ -77,23 +78,43 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
7778

7879
<div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
7980
<p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
80-
{
81-
canEdit && (
82-
<EditMemberPropertyBtn
83-
onClick={handleEditClick}
84-
/>
85-
)
86-
}
81+
{canEdit && !hasEmptyDescription && (
82+
<EditMemberPropertyBtn
83+
onClick={handleEditClick}
84+
/>
85+
)}
8786
</div>
8887
{hasEmptyDescription && (
89-
<EmptySection
90-
className={styles.empty}
91-
selfMessage={`
92-
Your bio is an opportunity to share your personality
93-
and interests with the community and customers.
94-
`}
95-
isSelf={canEdit}
96-
/>
88+
<>
89+
<EmptySection
90+
className={styles.empty}
91+
selfMessage={`
92+
Your bio is an opportunity to share your personality
93+
and interests with the community and customers.
94+
`}
95+
isSelf={canEdit}
96+
>
97+
I&apos;m a proud Topcoder member, working hard to solve some of the worlds biggest problems.
98+
<br />
99+
<br />
100+
I&apos;m excited to hear about your technology challenges and look forward to being
101+
on your next project.
102+
<br />
103+
<Button
104+
link
105+
variant='linkblue'
106+
size='lg'
107+
>
108+
Let&apos;s connect!
109+
</Button>
110+
</EmptySection>
111+
{canEdit && (
112+
<AddButton
113+
label='Add your bio'
114+
onClick={handleEditClick}
115+
/>
116+
)}
117+
</>
97118
)}
98119
<p>{props.profile?.description}</p>
99120

‎src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
22
import { useSearchParams } from 'react-router-dom'
33

4-
import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
4+
import {
5+
MemberTraitsAPI,
6+
useMemberTraits,
7+
UserCompletedCertificationsResponse,
8+
UserProfile,
9+
UserTrait,
10+
UserTraitIds,
11+
useUserCompletedCertifications,
12+
} from '~/libs/core'
513

614
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
7-
import { EditMemberPropertyBtn, EmptySection } from '../../components'
15+
import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
816
import { MemberTCAInfo } from '../tca-info'
917
import { notifyUniNavi } from '../../lib'
1018

@@ -21,17 +29,28 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
2129
const [queryParams]: [URLSearchParams, any] = useSearchParams()
2230
const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
2331

32+
const { data: memberTCA, loading: tcaDataLoading }: UserCompletedCertificationsResponse
33+
= useUserCompletedCertifications(props.profile?.userId)
34+
2435
const canEdit: boolean = props.authProfile?.handle === props.profile.handle
2536

2637
const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
2738
= useState<boolean>(false)
2839

29-
const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
40+
const { data: memberEducationTraits, mutate: mutateTraits, loading: traitsLoading }: MemberTraitsAPI
3041
= useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
3142

43+
const loading = tcaDataLoading || traitsLoading
44+
3245
const memberEducation: UserTrait[] | undefined
3346
= useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
3447

48+
const hasEducationData = useMemo(() => !!(
49+
memberTCA?.courses?.length
50+
|| memberTCA?.enrollments?.length
51+
|| memberEducation?.length
52+
), [memberEducation?.length, memberTCA?.courses?.length, memberTCA?.enrollments?.length])
53+
3554
useEffect(() => {
3655
if (props.authProfile && editMode === profileEditModes.education) {
3756
setIsEditMode(true)
@@ -59,13 +78,11 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
5978
<div className={styles.container}>
6079
<div className={styles.headerWrap}>
6180
<h3>Education and Certifications</h3>
62-
{
63-
canEdit && (
64-
<EditMemberPropertyBtn
65-
onClick={handleEditEducationClick}
66-
/>
67-
)
68-
}
81+
{canEdit && hasEducationData && (
82+
<EditMemberPropertyBtn
83+
onClick={handleEditEducationClick}
84+
/>
85+
)}
6986
</div>
7087

7188
<div className={styles.educationContentWrap}>
@@ -81,9 +98,9 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
8198
)}
8299
</div>
83100

84-
<MemberTCAInfo profile={props.profile} />
101+
<MemberTCAInfo memberTcaData={memberTCA} profile={props.profile} />
85102

86-
{!loading && !memberEducation?.length && (
103+
{!loading && !hasEducationData && (
87104
<EmptySection
88105
className={styles.emptyBlock}
89106
selfMessage={`
@@ -96,6 +113,13 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
96113
</EmptySection>
97114
)}
98115

116+
{!loading && canEdit && !hasEducationData && (
117+
<AddButton
118+
label='Add education & certifications'
119+
onClick={handleEditEducationClick}
120+
/>
121+
)}
122+
99123
{
100124
isEditMode && (
101125
<ModifyEducationModal

‎src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
2-
import { KeyedMutator } from 'swr'
32
import { useSearchParams } from 'react-router-dom'
43

5-
import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
4+
import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
65

7-
import { EditMemberPropertyBtn } from '../../components'
6+
import { AddButton, EditMemberPropertyBtn } from '../../components'
87
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
98
import { notifyUniNavi } from '../../lib'
109

@@ -26,10 +25,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
2625
const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
2726
= useState<boolean>(false)
2827

29-
const { data: memberLanguageTraits, mutate: mutateTraits }: {
30-
data: UserTraits[] | undefined,
31-
mutate: KeyedMutator<any>,
32-
}
28+
const { data: memberLanguageTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
3329
= useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.languages })
3430

3531
const memberLanguages: UserTrait[] | undefined
@@ -58,19 +54,24 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
5854
}, 1000)
5955
}
6056

61-
return canEdit || memberLanguages ? (
57+
return !loading && (canEdit || memberLanguages) ? (
6258
<div className={styles.container}>
6359
<div className={styles.titleWrap}>
64-
<p className='body-main-bold'>Languages:</p>
65-
{
66-
canEdit && (
67-
<EditMemberPropertyBtn
68-
onClick={handleEditLangaguesClick}
69-
/>
70-
)
71-
}
60+
<p className='body-main-bold'>Languages</p>
61+
{canEdit && !!memberLanguages?.length && (
62+
<EditMemberPropertyBtn
63+
onClick={handleEditLangaguesClick}
64+
/>
65+
)}
7266
</div>
7367

68+
{canEdit && !memberLanguages?.length && (
69+
<AddButton
70+
variant='mt0'
71+
label='Add your languages'
72+
onClick={handleEditLangaguesClick}
73+
/>
74+
)}
7475
<div className={styles.languages}>
7576
{
7677
memberLanguages?.map((trait: UserTrait) => (

0 commit comments

Comments
 (0)