TAL-94 - move namesAndHandleAppearance to member root object

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

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { NamesAndHandleAppearance, useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -38,11 +38,6 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
         props.profile && !props.profile.description
     ), [props.profile])
 
-    const namesAndHandleAppearanceData: UserTrait | undefined
-        = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
-            (trait: UserTrait) => trait.namesAndHandleAppearance,
-        ), [memberPersonalizationTraits])
-
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.aboutMe) {
             setIsEditMode(true)
@@ -76,7 +71,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                 I&apos;m
                 {' '}
                 {
-                    namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
+                    props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly
                         ? props.profile?.handle
                         : props.profile?.firstName
                 }

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

@@ -1,27 +1,20 @@
 import { Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
-import { reject, trim } from 'lodash'
+import { trim } from 'lodash'
 import { toast } from 'react-toastify'
 
 import {
+    NamesAndHandleAppearance,
     updateMemberProfileAsync,
-    updateOrCreateMemberTraitsAsync,
     UserProfile,
-    UserTrait,
-    UserTraitCategoryNames,
-    UserTraitIds,
 } from '~/libs/core'
 import { BaseModal, Button, InputRadio, InputText } from '~/libs/ui'
 
-import { NamesAndHandleAppearance } from '../ProfileHeader'
-
 import styles from './ModifyMemberNameModal.module.scss'
 
 interface ModifyMemberNameModalProps {
     profile: UserProfile
     onClose: () => void
     onSave: () => void
-    memberPersonalizationTraitsData: UserTrait[] | undefined
-    namesAndHandleAppearance: NamesAndHandleAppearance | undefined
 }
 
 const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemberNameModalProps) => {
@@ -43,10 +36,8 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
     const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(props.profile.lastName)
 
-    const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [
-        NamesAndHandleAppearance | undefined, Dispatch<SetStateAction<NamesAndHandleAppearance | undefined>>
-    ]
-        = useState<NamesAndHandleAppearance | undefined>(props.namesAndHandleAppearance)
+    const [namesAndHandleAppearance, setNamesAndHandleAppearance]
+        = useState<NamesAndHandleAppearance | undefined>(props.profile.namesAndHandleAppearance)
 
     function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
         setCurrentFirstName(e.target.value)
@@ -88,21 +79,12 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
         Promise.all([
             updateMemberProfileAsync(
                 props.profile.handle,
-                { firstName: updatedFirstName, lastName: updatedLastName },
-            ),
-            updateOrCreateMemberTraitsAsync(props.profile.handle, [{
-                categoryName: UserTraitCategoryNames.personalization,
-                traitId: UserTraitIds.personalization,
-                traits: {
-                    data: [
-                        ...reject(
-                            props.memberPersonalizationTraitsData,
-                            (trait: any) => trait.namesAndHandleAppearance,
-                        ),
-                        { namesAndHandleAppearance },
-                    ],
+                {
+                    firstName: updatedFirstName,
+                    lastName: updatedLastName,
+                    namesAndHandleAppearance: namesAndHandleAppearance as NamesAndHandleAppearance,
                 },
-            }]),
+            ),
         ])
             .then(() => {
                 toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT })

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

@@ -1,15 +1,11 @@
 /* eslint-disable complexity */
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { Location, useLocation, useSearchParams } from 'react-router-dom'
-import { KeyedMutator } from 'swr'
 import moment from 'moment'
 
 import {
-    useMemberTraits,
+    NamesAndHandleAppearance,
     UserProfile,
-    UserTrait,
-    UserTraitIds,
-    UserTraits,
 } from '~/libs/core'
 import { ProfilePicture, useCheckIsMobile } from '~/libs/shared'
 import { Button } from '~/libs/ui'
@@ -30,8 +26,6 @@ interface ProfileHeaderProps {
     refreshProfile: (handle: string) => void
 }
 
-export type NamesAndHandleAppearance = 'namesOnly' | 'handleOnly' | 'namesAndHandle'
-
 const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const isMobile: boolean = useCheckIsMobile()
 
@@ -48,18 +42,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
-    const { data: memberPersonalizationTraits, mutate: mutateTraits, loading: traitsLoading }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-        loading: boolean,
-    }
-        = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
-
-    const namesAndHandleAppearanceData: UserTrait | undefined
-        = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
-            (trait: UserTrait) => trait.namesAndHandleAppearance,
-        ), [memberPersonalizationTraits])
-
     const [isHiringFormOpen, setIsHiringFormOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
@@ -95,7 +77,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         setTimeout(() => {
             setIsNameEditMode(false)
             props.refreshProfile(props.profile.handle)
-            mutateTraits()
         }, 1000)
     }
 
@@ -159,60 +140,58 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                 !isMobile ? renderMemberPhotoWrap() : undefined
             }
 
-            {!traitsLoading && (
-                <div className={styles.profileHeaderWrap}>
-                    <div className={styles.profileInfo}>
-                        <div className={styles.nameWrap}>
-                            <p>
-                                {
-                                    namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
-                                        ? props.profile.handle
-                                        : `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}`
-                                }
-                            </p>
+            <div className={styles.profileHeaderWrap}>
+                <div className={styles.profileInfo}>
+                    <div className={styles.nameWrap}>
+                        <p>
                             {
-                                canEdit && (
-                                    <EditMemberPropertyBtn
-                                        onClick={handleModifyNameClick}
-                                    />
-                                )
+                                props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly
+                                    ? props.profile.handle
+                                    : `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}`
                             }
-                        </div>
-
-                        <p className={styles.memberSince}>
-                            {
-                                // If the user hasn't set a name and handle appareance, display both name and handle
-                                (namesAndHandleAppearanceData?.namesAndHandleAppearance === 'namesAndHandle'
-                                    || !namesAndHandleAppearanceData) ? (
-                                    // eslint-disable-next-line react/jsx-indent
-                                        <>
-                                            <span>{props.profile.handle}</span>
-                                            {' '}
-                                            |
-                                            {' '}
-                                        </>
-                                    ) : undefined
-                            }
-                            Member Since
-                            {' '}
-                            {moment(props.profile.createdAt)
-                                .format('MMM YYYY')}
                         </p>
-                    </div>
-                    {
-                        !canEdit && isTalentSearch ? (
-                            <div className={styles.hiringClickWrap}>
-                                <Button
-                                    label='Hire Topcoder Talent'
-                                    primary
-                                    size='lg'
-                                    onClick={handleStartHiringToggle}
+                        {
+                            canEdit && (
+                                <EditMemberPropertyBtn
+                                    onClick={handleModifyNameClick}
                                 />
-                            </div>
-                        ) : undefined
-                    }
+                            )
+                        }
+                    </div>
+
+                    <p className={styles.memberSince}>
+                        {
+                            // If the user hasn't set a name and handle appareance, display both name and handle
+                            (props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.both
+                                || !props.profile.namesAndHandleAppearance) ? (
+                                // eslint-disable-next-line react/jsx-indent
+                                    <>
+                                        <span>{props.profile.handle}</span>
+                                        {' '}
+                                        |
+                                        {' '}
+                                    </>
+                                ) : undefined
+                        }
+                        Member Since
+                        {' '}
+                        {moment(props.profile.createdAt)
+                            .format('MMM YYYY')}
+                    </p>
                 </div>
-            )}
+                {
+                    !canEdit && isTalentSearch ? (
+                        <div className={styles.hiringClickWrap}>
+                            <Button
+                                label='Hire Topcoder Talent'
+                                primary
+                                size='lg'
+                                onClick={handleStartHiringToggle}
+                            />
+                        </div>
+                    ) : undefined
+                }
+            </div>
 
             {
                 // Showing only when they can edit until we have the talent search app
@@ -241,8 +220,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                         onClose={handleModifyNameModalClose}
                         onSave={handleModifyNameModalSave}
                         profile={props.profile}
-                        memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data}
-                        namesAndHandleAppearance={namesAndHandleAppearanceData?.namesAndHandleAppearance}
                     />
                 )
             }

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

@@ -6,10 +6,10 @@ import codes from 'country-calling-code'
 
 import { IconSolid } from '~/libs/ui'
 import { isSkillVerified, ProfilePicture, SkillPill } from '~/libs/shared'
-import { UserSkill } from '~/libs/core'
+import { NamesAndHandleAppearance, UserSkill } from '~/libs/core'
 
 import { ProfileMatch } from '../profile-match'
-import { Member, MemberDisplayName } from '../../lib/models'
+import { Member } from '../../lib/models'
 import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
 import { useIsMatchingSkill } from '../../lib/utils'
 
@@ -94,14 +94,14 @@ const TalentCard: FC<TalentCardProps> = props => {
                 <ProfilePicture member={props.member} className={styles.profilePic} />
                 <div className={styles.detailsContainer}>
                     <div className={styles.talentInfo}>
-                        {props.member.namesAndHandleAppearance !== MemberDisplayName.handleOnly && (
+                        {props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.handleOnly && (
                             <div className={styles.talentInfoName}>
                                 {props.member.firstName}
                                 {' '}
                                 {props.member.lastName?.slice(0, 1) || ''}
                             </div>
                         )}
-                        {props.member.namesAndHandleAppearance !== MemberDisplayName.nameOnly && (
+                        {props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.nameOnly && (
                             <div className={styles.talentInfoHandle}>
                                 <span className='body-medium-normal'>
                                     {props.member.handle}

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

@@ -1,6 +1,5 @@
-import { UserSkill } from '~/libs/core'
+import { NamesAndHandleAppearance, UserSkill } from '~/libs/core'
 
-import { MemberDisplayName } from './MemberDisplayName'
 import MemberAddress from './MemberAddress'
 import MemberMaxRating from './MemberMaxRating'
 import MemberStats from './MemberStats'
@@ -18,7 +17,7 @@ export default interface Member {
     handle: string;
     homeCountryCode: string;
     lastName: string;
-    namesAndHandleAppearance: MemberDisplayName
+    namesAndHandleAppearance: NamesAndHandleAppearance
     maxRating: MemberMaxRating;
     numberOfChallengesPlaced: number;
     numberOfChallengesWon: number;

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

@@ -1,4 +1,3 @@
 export type { default as Member } from './Member'
 export type { default as MemberMaxRating } from './MemberMaxRating'
 export type { default as MemberStats } from './MemberStats'
-export { MemberDisplayName } from './MemberDisplayName'

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

@@ -1,4 +1,4 @@
-import { TC_TRACKS } from './user-profile.model'
+import { NamesAndHandleAppearance, TC_TRACKS } from './user-profile.model'
 
 export interface UpdateProfileRequest {
     addresses?: Array<{
@@ -15,6 +15,7 @@ export interface UpdateProfileRequest {
     lastName?: string
     tracks?: TC_TRACKS[],
     description?: string
+    namesAndHandleAppearance?: NamesAndHandleAppearance
 }
 
 export interface UserPhotoUpdateResponse {

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

@@ -2,6 +2,12 @@ import { UserSkill } from './user-skill.model'
 
 export type TC_TRACKS = 'DEVELOP' | 'DESIGN' | 'DATA_SCIENCE'
 
+export enum NamesAndHandleAppearance {
+    both = 'namesAndHandle',
+    handleOnly = 'handleOnly',
+    nameOnly = 'namesOnly',
+}
+
 export interface UserProfile {
     addresses?: Array<{
         city?: string
@@ -34,4 +40,5 @@ export interface UserProfile {
     tracks?: Array<TC_TRACKS>
     updatedAt: number
     userId: number
+    namesAndHandleAppearance: NamesAndHandleAppearance
 }