Skip to content

Commit 8658d57

Browse files
vas3avas3a
committed
TAL-94 - move namesAndHandleAppearance to member root object
1 parent f64e848 commit 8658d57

File tree

8 files changed

+74
-114
lines changed

8 files changed

+74
-114
lines changed

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'
33
import { KeyedMutator } from 'swr'
44
import classNames from 'classnames'
55

6-
import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
6+
import { NamesAndHandleAppearance, useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
77

88
import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
99
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -38,11 +38,6 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
3838
props.profile && !props.profile.description
3939
), [props.profile])
4040

41-
const namesAndHandleAppearanceData: UserTrait | undefined
42-
= useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
43-
(trait: UserTrait) => trait.namesAndHandleAppearance,
44-
), [memberPersonalizationTraits])
45-
4641
useEffect(() => {
4742
if (props.authProfile && editMode === profileEditModes.aboutMe) {
4843
setIsEditMode(true)
@@ -76,7 +71,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
7671
I&apos;m
7772
{' '}
7873
{
79-
namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
74+
props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly
8075
? props.profile?.handle
8176
: props.profile?.firstName
8277
}

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx‎

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
import { Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
2-
import { reject, trim } from 'lodash'
2+
import { trim } from 'lodash'
33
import { toast } from 'react-toastify'
44

55
import {
6+
NamesAndHandleAppearance,
67
updateMemberProfileAsync,
7-
updateOrCreateMemberTraitsAsync,
88
UserProfile,
9-
UserTrait,
10-
UserTraitCategoryNames,
11-
UserTraitIds,
129
} from '~/libs/core'
1310
import { BaseModal, Button, InputRadio, InputText } from '~/libs/ui'
1411

15-
import { NamesAndHandleAppearance } from '../ProfileHeader'
16-
1712
import styles from './ModifyMemberNameModal.module.scss'
1813

1914
interface ModifyMemberNameModalProps {
2015
profile: UserProfile
2116
onClose: () => void
2217
onSave: () => void
23-
memberPersonalizationTraitsData: UserTrait[] | undefined
24-
namesAndHandleAppearance: NamesAndHandleAppearance | undefined
2518
}
2619

2720
const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemberNameModalProps) => {
@@ -43,10 +36,8 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
4336
const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
4437
= useState<string>(props.profile.lastName)
4538

46-
const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [
47-
NamesAndHandleAppearance | undefined, Dispatch<SetStateAction<NamesAndHandleAppearance | undefined>>
48-
]
49-
= useState<NamesAndHandleAppearance | undefined>(props.namesAndHandleAppearance)
39+
const [namesAndHandleAppearance, setNamesAndHandleAppearance]
40+
= useState<NamesAndHandleAppearance | undefined>(props.profile.namesAndHandleAppearance)
5041

5142
function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
5243
setCurrentFirstName(e.target.value)
@@ -88,21 +79,12 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
8879
Promise.all([
8980
updateMemberProfileAsync(
9081
props.profile.handle,
91-
{ firstName: updatedFirstName, lastName: updatedLastName },
92-
),
93-
updateOrCreateMemberTraitsAsync(props.profile.handle, [{
94-
categoryName: UserTraitCategoryNames.personalization,
95-
traitId: UserTraitIds.personalization,
96-
traits: {
97-
data: [
98-
...reject(
99-
props.memberPersonalizationTraitsData,
100-
(trait: any) => trait.namesAndHandleAppearance,
101-
),
102-
{ namesAndHandleAppearance },
103-
],
82+
{
83+
firstName: updatedFirstName,
84+
lastName: updatedLastName,
85+
namesAndHandleAppearance: namesAndHandleAppearance as NamesAndHandleAppearance,
10486
},
105-
}]),
87+
),
10688
])
10789
.then(() => {
10890
toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT })

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx‎

Lines changed: 48 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
/* eslint-disable complexity */
22
import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
33
import { Location, useLocation, useSearchParams } from 'react-router-dom'
4-
import { KeyedMutator } from 'swr'
54
import moment from 'moment'
65

76
import {
8-
useMemberTraits,
7+
NamesAndHandleAppearance,
98
UserProfile,
10-
UserTrait,
11-
UserTraitIds,
12-
UserTraits,
139
} from '~/libs/core'
1410
import { ProfilePicture, useCheckIsMobile } from '~/libs/shared'
1511
import { Button } from '~/libs/ui'
@@ -30,8 +26,6 @@ interface ProfileHeaderProps {
3026
refreshProfile: (handle: string) => void
3127
}
3228

33-
export type NamesAndHandleAppearance = 'namesOnly' | 'handleOnly' | 'namesAndHandle'
34-
3529
const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
3630
const isMobile: boolean = useCheckIsMobile()
3731

@@ -48,18 +42,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
4842
const [queryParams]: [URLSearchParams, any] = useSearchParams()
4943
const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
5044

51-
const { data: memberPersonalizationTraits, mutate: mutateTraits, loading: traitsLoading }: {
52-
data: UserTraits[] | undefined,
53-
mutate: KeyedMutator<any>,
54-
loading: boolean,
55-
}
56-
= useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
57-
58-
const namesAndHandleAppearanceData: UserTrait | undefined
59-
= useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
60-
(trait: UserTrait) => trait.namesAndHandleAppearance,
61-
), [memberPersonalizationTraits])
62-
6345
const [isHiringFormOpen, setIsHiringFormOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
6446
= useState<boolean>(false)
6547

@@ -95,7 +77,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
9577
setTimeout(() => {
9678
setIsNameEditMode(false)
9779
props.refreshProfile(props.profile.handle)
98-
mutateTraits()
9980
}, 1000)
10081
}
10182

@@ -159,60 +140,58 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
159140
!isMobile ? renderMemberPhotoWrap() : undefined
160141
}
161142

162-
{!traitsLoading && (
163-
<div className={styles.profileHeaderWrap}>
164-
<div className={styles.profileInfo}>
165-
<div className={styles.nameWrap}>
166-
<p>
167-
{
168-
namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
169-
? props.profile.handle
170-
: `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}`
171-
}
172-
</p>
143+
<div className={styles.profileHeaderWrap}>
144+
<div className={styles.profileInfo}>
145+
<div className={styles.nameWrap}>
146+
<p>
173147
{
174-
canEdit && (
175-
<EditMemberPropertyBtn
176-
onClick={handleModifyNameClick}
177-
/>
178-
)
148+
props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly
149+
? props.profile.handle
150+
: `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}`
179151
}
180-
</div>
181-
182-
<p className={styles.memberSince}>
183-
{
184-
// If the user hasn't set a name and handle appareance, display both name and handle
185-
(namesAndHandleAppearanceData?.namesAndHandleAppearance === 'namesAndHandle'
186-
|| !namesAndHandleAppearanceData) ? (
187-
// eslint-disable-next-line react/jsx-indent
188-
<>
189-
<span>{props.profile.handle}</span>
190-
{' '}
191-
|
192-
{' '}
193-
</>
194-
) : undefined
195-
}
196-
Member Since
197-
{' '}
198-
{moment(props.profile.createdAt)
199-
.format('MMM YYYY')}
200152
</p>
201-
</div>
202-
{
203-
!canEdit && isTalentSearch ? (
204-
<div className={styles.hiringClickWrap}>
205-
<Button
206-
label='Hire Topcoder Talent'
207-
primary
208-
size='lg'
209-
onClick={handleStartHiringToggle}
153+
{
154+
canEdit && (
155+
<EditMemberPropertyBtn
156+
onClick={handleModifyNameClick}
210157
/>
211-
</div>
212-
) : undefined
213-
}
158+
)
159+
}
160+
</div>
161+
162+
<p className={styles.memberSince}>
163+
{
164+
// If the user hasn't set a name and handle appareance, display both name and handle
165+
(props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.both
166+
|| !props.profile.namesAndHandleAppearance) ? (
167+
// eslint-disable-next-line react/jsx-indent
168+
<>
169+
<span>{props.profile.handle}</span>
170+
{' '}
171+
|
172+
{' '}
173+
</>
174+
) : undefined
175+
}
176+
Member Since
177+
{' '}
178+
{moment(props.profile.createdAt)
179+
.format('MMM YYYY')}
180+
</p>
214181
</div>
215-
)}
182+
{
183+
!canEdit && isTalentSearch ? (
184+
<div className={styles.hiringClickWrap}>
185+
<Button
186+
label='Hire Topcoder Talent'
187+
primary
188+
size='lg'
189+
onClick={handleStartHiringToggle}
190+
/>
191+
</div>
192+
) : undefined
193+
}
194+
</div>
216195

217196
{
218197
// Showing only when they can edit until we have the talent search app
@@ -241,8 +220,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
241220
onClose={handleModifyNameModalClose}
242221
onSave={handleModifyNameModalSave}
243222
profile={props.profile}
244-
memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data}
245-
namesAndHandleAppearance={namesAndHandleAppearanceData?.namesAndHandleAppearance}
246223
/>
247224
)
248225
}

‎src/apps/talent-search/src/components/talent-card/TalentCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import codes from 'country-calling-code'
66

77
import { IconSolid } from '~/libs/ui'
88
import { isSkillVerified, ProfilePicture, SkillPill } from '~/libs/shared'
9-
import { UserSkill } from '~/libs/core'
9+
import { NamesAndHandleAppearance, UserSkill } from '~/libs/core'
1010

1111
import { ProfileMatch } from '../profile-match'
12-
import { Member, MemberDisplayName } from '../../lib/models'
12+
import { Member } from '../../lib/models'
1313
import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
1414
import { useIsMatchingSkill } from '../../lib/utils'
1515

@@ -94,14 +94,14 @@ const TalentCard: FC<TalentCardProps> = props => {
9494
<ProfilePicture member={props.member} className={styles.profilePic} />
9595
<div className={styles.detailsContainer}>
9696
<div className={styles.talentInfo}>
97-
{props.member.namesAndHandleAppearance !== MemberDisplayName.handleOnly && (
97+
{props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.handleOnly && (
9898
<div className={styles.talentInfoName}>
9999
{props.member.firstName}
100100
{' '}
101101
{props.member.lastName?.slice(0, 1) || ''}
102102
</div>
103103
)}
104-
{props.member.namesAndHandleAppearance !== MemberDisplayName.nameOnly && (
104+
{props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.nameOnly && (
105105
<div className={styles.talentInfoHandle}>
106106
<span className='body-medium-normal'>
107107
{props.member.handle}

‎src/apps/talent-search/src/lib/models/Member.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { UserSkill } from '~/libs/core'
1+
import { NamesAndHandleAppearance, UserSkill } from '~/libs/core'
22

3-
import { MemberDisplayName } from './MemberDisplayName'
43
import MemberAddress from './MemberAddress'
54
import MemberMaxRating from './MemberMaxRating'
65
import MemberStats from './MemberStats'
@@ -18,7 +17,7 @@ export default interface Member {
1817
handle: string;
1918
homeCountryCode: string;
2019
lastName: string;
21-
namesAndHandleAppearance: MemberDisplayName
20+
namesAndHandleAppearance: NamesAndHandleAppearance
2221
maxRating: MemberMaxRating;
2322
numberOfChallengesPlaced: number;
2423
numberOfChallengesWon: number;

‎src/apps/talent-search/src/lib/models/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export type { default as Member } from './Member'
22
export type { default as MemberMaxRating } from './MemberMaxRating'
33
export type { default as MemberStats } from './MemberStats'
4-
export { MemberDisplayName } from './MemberDisplayName'

‎src/libs/core/lib/profile/modify-user-profile.model.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TC_TRACKS } from './user-profile.model'
1+
import { NamesAndHandleAppearance, TC_TRACKS } from './user-profile.model'
22

33
export interface UpdateProfileRequest {
44
addresses?: Array<{
@@ -15,6 +15,7 @@ export interface UpdateProfileRequest {
1515
lastName?: string
1616
tracks?: TC_TRACKS[],
1717
description?: string
18+
namesAndHandleAppearance?: NamesAndHandleAppearance
1819
}
1920

2021
export interface UserPhotoUpdateResponse {

‎src/libs/core/lib/profile/user-profile.model.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import { UserSkill } from './user-skill.model'
22

33
export type TC_TRACKS = 'DEVELOP' | 'DESIGN' | 'DATA_SCIENCE'
44

5+
export enum NamesAndHandleAppearance {
6+
both = 'namesAndHandle',
7+
handleOnly = 'handleOnly',
8+
nameOnly = 'namesOnly',
9+
}
10+
511
export interface UserProfile {
612
addresses?: Array<{
713
city?: string
@@ -34,4 +40,5 @@ export interface UserProfile {
3440
tracks?: Array<TC_TRACKS>
3541
updatedAt: number
3642
userId: number
43+
namesAndHandleAppearance: NamesAndHandleAppearance
3744
}

0 commit comments

Comments
 (0)