Skip to content

Commit 456ac0c

Browse files
kkartunovkkartunov
committed
MP-73 select how to show names
1 parent 514e47b commit 456ac0c

File tree

4 files changed

+107
-33
lines changed

4 files changed

+107
-33
lines changed

‎src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
width: 100%;
77
}
88

9-
.modalBody {
9+
.nameToggle {
1010
display: flex;
1111
align-items: center;
12+
justify-content: space-between;
1213
}

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

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

5-
import { updateMemberProfileAsync, UserProfile } from '~/libs/core'
6-
import { BaseModal, Button, InputText } from '~/libs/ui'
5+
import {
6+
createMemberTraitsAsync,
7+
updateMemberProfileAsync,
8+
updateMemberTraitsAsync,
9+
UserProfile,
10+
UserTrait,
11+
UserTraitCategoryNames,
12+
UserTraitIds,
13+
} from '~/libs/core'
14+
import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui'
715

816
import styles from './ModifyMemberNameModal.module.scss'
917

1018
interface ModifyMemberNameModalProps {
1119
profile: UserProfile
1220
onClose: () => void
1321
onSave: () => void
22+
memberPersonalizationTraitsData: UserTrait[] | undefined
23+
hideMyNameInProfile: boolean
24+
}
25+
26+
const methodsMap: { [key: string]: any } = {
27+
create: createMemberTraitsAsync,
28+
update: updateMemberTraitsAsync,
1429
}
1530

1631
const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemberNameModalProps) => {
@@ -32,6 +47,9 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
3247
const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
3348
= useState<string>(props.profile.lastName)
3449

50+
const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch<SetStateAction<boolean>>]
51+
= useState<boolean>(props.hideMyNameInProfile)
52+
3553
function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
3654
setCurrentFirstName(e.target.value)
3755
setIsFormChanged(true)
@@ -42,6 +60,11 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
4260
setIsFormChanged(true)
4361
}
4462

63+
function handleShowMyNameInProfileToggle(): void {
64+
setHideMyNameInProfile(!hideMyNameInProfile)
65+
setIsFormChanged(true)
66+
}
67+
4568
function handleModifyNameSave(): void {
4669
setFormErrors({})
4770

@@ -64,10 +87,25 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
6487

6588
setIsSaving(true)
6689

67-
updateMemberProfileAsync(
68-
props.profile.handle,
69-
{ firstName: updatedFirstName, lastName: updatedLastName },
70-
)
90+
Promise.all([
91+
updateMemberProfileAsync(
92+
props.profile.handle,
93+
{ firstName: updatedFirstName, lastName: updatedLastName },
94+
),
95+
methodsMap[!!props.memberPersonalizationTraitsData ? 'update' : 'create'](props.profile.handle, [{
96+
categoryName: UserTraitCategoryNames.personalization,
97+
traitId: UserTraitIds.personalization,
98+
traits: {
99+
data: [
100+
...reject(
101+
props.memberPersonalizationTraitsData,
102+
(trait: any) => trait.hideNamesOnProfile,
103+
),
104+
{ hideNamesOnProfile: hideMyNameInProfile },
105+
],
106+
},
107+
}]),
108+
])
71109
.then(() => {
72110
toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT })
73111
props.onSave()
@@ -122,6 +160,14 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
122160
onChange={handleLastNameChange}
123161
value={currentLastName}
124162
/>
163+
<div className={styles.nameToggle}>
164+
<p>Hide my names on profile</p>
165+
<FormToggleSwitch
166+
name='hideMyNameInProfile'
167+
onChange={handleShowMyNameInProfileToggle}
168+
value={hideMyNameInProfile}
169+
/>
170+
</div>
125171
</div>
126172
</BaseModal>
127173
)

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-wrap: wrap;
66
align-items: flex-start;
7+
justify-content: space-between;
78
color: $tc-white;
89

910
.photoWrap {
@@ -64,6 +65,10 @@
6465
font-weight: $font-weight-bold;
6566
font-family: $font-barlow;
6667
}
68+
69+
button {
70+
color: $tc-white;
71+
}
6772
}
6873

6974
.memberSince {

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

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
/* eslint-disable complexity */
12
import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
23
import { useSearchParams } from 'react-router-dom'
4+
import { KeyedMutator } from 'swr'
35
import moment from 'moment'
46

57
import {
@@ -46,8 +48,10 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
4648
const [queryParams]: [URLSearchParams, any] = useSearchParams()
4749
const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
4850

49-
const { data: memberPersonalizationTraits }: {
51+
const { data: memberPersonalizationTraits, mutate: mutateTraits, loading: traitsLoading }: {
5052
data: UserTraits[] | undefined,
53+
mutate: KeyedMutator<any>,
54+
loading: boolean,
5155
}
5256
= useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
5357

@@ -56,6 +60,11 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
5660
(trait: UserTrait) => trait.availableForGigs,
5761
), [memberPersonalizationTraits])
5862

63+
const hideNamesOnProfile: UserTrait | undefined
64+
= useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
65+
(trait: UserTrait) => trait.hideNamesOnProfile,
66+
), [memberPersonalizationTraits])
67+
5968
useEffect(() => {
6069
if (props.authProfile && editMode === profileEditModes.names) {
6170
setIsNameEditMode(true)
@@ -92,6 +101,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
92101
setTimeout(() => {
93102
setIsNameEditMode(false)
94103
props.refreshProfile(props.profile.handle)
104+
mutateTraits()
95105
}, 1000)
96106
}
97107

@@ -130,33 +140,43 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
130140
}
131141
</div>
132142

133-
<div className={styles.profileInfo}>
134-
<div className={styles.nameWrap}>
135-
<p>
136-
{props.profile.firstName}
143+
{!traitsLoading && (
144+
<div className={styles.profileInfo}>
145+
<div className={styles.nameWrap}>
146+
<p>
147+
{
148+
hideNamesOnProfile
149+
? props.profile.handle
150+
: `${props.profile.firstName} ${props.profile.lastName}`
151+
}
152+
</p>
153+
{
154+
canEdit && (
155+
<EditMemberPropertyBtn
156+
onClick={handleModifyNameClick}
157+
/>
158+
)
159+
}
160+
</div>
161+
162+
<p className={styles.memberSince}>
163+
{
164+
!hideNamesOnProfile ? (
165+
<>
166+
<span>{props.profile.handle}</span>
167+
{' '}
168+
|
169+
{' '}
170+
</>
171+
) : undefined
172+
}
173+
Member Since
137174
{' '}
138-
{props.profile.lastName}
175+
{moment(props.profile.createdAt)
176+
.format('MMM YYYY')}
139177
</p>
140-
{
141-
canEdit && (
142-
<EditMemberPropertyBtn
143-
onClick={handleModifyNameClick}
144-
/>
145-
)
146-
}
147178
</div>
148-
149-
<p className={styles.memberSince}>
150-
<span>{props.profile.handle}</span>
151-
{' '}
152-
|
153-
{' '}
154-
Member Since
155-
{' '}
156-
{moment(props.profile.createdAt)
157-
.format('MMM YYYY')}
158-
</p>
159-
</div>
179+
)}
160180

161181
{
162182
openForWork || canEdit ? (
@@ -184,6 +204,8 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
184204
onClose={handleModifyNameModalClose}
185205
onSave={handleModifyNameModalSave}
186206
profile={props.profile}
207+
memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data}
208+
hideMyNameInProfile={hideNamesOnProfile?.hideNamesOnProfile || false}
187209
/>
188210
)
189211
}

0 commit comments

Comments
 (0)