Skip to content

Commit 0b67972

Browse files
vas3avas3a
committed
MP-172 - Update profile page when empty
1 parent cb0e5d5 commit 0b67972

File tree

17 files changed

+234
-92
lines changed

17 files changed

+234
-92
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'
@@ -73,23 +74,43 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
7374
</p>
7475
<div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
7576
<p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
76-
{
77-
canEdit && (
78-
<EditMemberPropertyBtn
79-
onClick={handleEditClick}
80-
/>
81-
)
82-
}
77+
{canEdit && !hasEmptyDescription && (
78+
<EditMemberPropertyBtn
79+
onClick={handleEditClick}
80+
/>
81+
)}
8382
</div>
8483
{hasEmptyDescription && (
85-
<EmptySection
86-
className={styles.empty}
87-
selfMessage={`
88-
Your bio is an opportunity to share your personality
89-
and interests with the community and customers.
90-
`}
91-
isSelf={canEdit}
92-
/>
84+
<>
85+
<EmptySection
86+
className={styles.empty}
87+
selfMessage={`
88+
Your bio is an opportunity to share your personality
89+
and interests with the community and customers.
90+
`}
91+
isSelf={canEdit}
92+
>
93+
I&apos;m a proud Topcoder member, working hard to solve some of the worlds biggest problems.
94+
<br />
95+
<br />
96+
I&apos;m excited to hear about your technology challenges and look forward to being
97+
on your next project.
98+
<br />
99+
<Button
100+
link
101+
variant='linkblue'
102+
size='lg'
103+
>
104+
Let&apos;s connect!
105+
</Button>
106+
</EmptySection>
107+
{canEdit && (
108+
<AddButton
109+
label='Add your bio'
110+
onClick={handleEditClick}
111+
/>
112+
)}
113+
</>
93114
)}
94115
<p>{props.profile?.description}</p>
95116

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

Lines changed: 33 additions & 11 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+
UserCompletedCertificationsData,
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,6 +29,9 @@ 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 }: { data: UserCompletedCertificationsData | undefined }
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>>]
@@ -32,6 +43,12 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
3243
const memberEducation: UserTrait[] | undefined
3344
= useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
3445

46+
const hasEducationData = useMemo(() => !!(
47+
memberTCA?.courses?.length
48+
|| memberTCA?.enrollments?.length
49+
|| memberEducation?.length
50+
), [memberEducation?.length, memberTCA?.courses?.length, memberTCA?.enrollments?.length])
51+
3552
useEffect(() => {
3653
if (props.authProfile && editMode === profileEditModes.education) {
3754
setIsEditMode(true)
@@ -59,13 +76,11 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
5976
<div className={styles.container}>
6077
<div className={styles.headerWrap}>
6178
<h3>Education and Certifications</h3>
62-
{
63-
canEdit && (
64-
<EditMemberPropertyBtn
65-
onClick={handleEditEducationClick}
66-
/>
67-
)
68-
}
79+
{canEdit && hasEducationData && (
80+
<EditMemberPropertyBtn
81+
onClick={handleEditEducationClick}
82+
/>
83+
)}
6984
</div>
7085

7186
<div className={styles.educationContentWrap}>
@@ -81,9 +96,9 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
8196
)}
8297
</div>
8398

84-
<MemberTCAInfo profile={props.profile} />
99+
<MemberTCAInfo memberTcaData={memberTCA} profile={props.profile} />
85100

86-
{!loading && !memberEducation?.length && (
101+
{!loading && !hasEducationData && (
87102
<EmptySection
88103
className={styles.emptyBlock}
89104
selfMessage={`
@@ -96,6 +111,13 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
96111
</EmptySection>
97112
)}
98113

114+
{canEdit && !hasEducationData && (
115+
<AddButton
116+
label='Add education & certifications'
117+
onClick={handleEditEducationClick}
118+
/>
119+
)}
120+
99121
{
100122
isEditMode && (
101123
<ModifyEducationModal

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
44

55
import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
66

7-
import { EditMemberPropertyBtn } from '../../components'
7+
import { AddButton, EditMemberPropertyBtn } from '../../components'
88
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
99
import { notifyUniNavi } from '../../lib'
1010

@@ -61,16 +61,21 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
6161
return canEdit || memberLanguages ? (
6262
<div className={styles.container}>
6363
<div className={styles.titleWrap}>
64-
<p className='body-main-bold'>Languages:</p>
65-
{
66-
canEdit && (
67-
<EditMemberPropertyBtn
68-
onClick={handleEditLangaguesClick}
69-
/>
70-
)
71-
}
64+
<p className='body-main-bold'>Languages</p>
65+
{canEdit && !!memberLanguages?.length && (
66+
<EditMemberPropertyBtn
67+
onClick={handleEditLangaguesClick}
68+
/>
69+
)}
7270
</div>
7371

72+
{canEdit && !memberLanguages?.length && (
73+
<AddButton
74+
variant='mt0'
75+
label='Add your languages'
76+
onClick={handleEditLangaguesClick}
77+
/>
78+
)}
7479
<div className={styles.languages}>
7580
{
7681
memberLanguages?.map((trait: UserTrait) => (

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
SocialIconYoutube,
1111
} from '~/libs/ui'
1212

13-
import { EditMemberPropertyBtn } from '../../components'
13+
import { AddButton, EditMemberPropertyBtn } from '../../components'
1414
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
1515
import { notifyUniNavi } from '../../lib'
1616

@@ -71,7 +71,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
7171
// eslint-disable-next-line react-hooks/exhaustive-deps
7272
}, [props.authProfile])
7373

74-
function handleEditLangaguesClick(): void {
74+
function handleEditClick(): void {
7575
setIsEditMode(true)
7676
}
7777

@@ -90,14 +90,12 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
9090
return canEdit || memberLinks?.links ? (
9191
<div className={styles.container}>
9292
<div className={styles.titleWrap}>
93-
<p className='body-main-bold'>Links:</p>
94-
{
95-
canEdit && (
96-
<EditMemberPropertyBtn
97-
onClick={handleEditLangaguesClick}
98-
/>
99-
)
100-
}
93+
<p className='body-main-bold'>Links</p>
94+
{canEdit && !!memberLinks?.links.length && (
95+
<EditMemberPropertyBtn
96+
onClick={handleEditClick}
97+
/>
98+
)}
10199
</div>
102100

103101
<div className={styles.links}>
@@ -115,6 +113,14 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
115113
}
116114
</div>
117115

116+
{canEdit && !memberLinks?.links.length && (
117+
<AddButton
118+
variant='mt0'
119+
label='Add your social links'
120+
onClick={handleEditClick}
121+
/>
122+
)}
123+
118124
{
119125
isEditMode && (
120126
<ModifyMemberLinksModal

0 commit comments

Comments
 (0)