From 8658d57e15e1bbff049673bba677d8fc17a5fc4b Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 28 Nov 2023 10:04:16 +0200 Subject: [PATCH] TAL-94 - move namesAndHandleAppearance to member root object --- .../src/member-profile/about-me/AboutMe.tsx | 9 +- .../ModifyMemberNameModal.tsx | 36 ++---- .../profile-header/ProfileHeader.tsx | 119 +++++++----------- .../src/components/talent-card/TalentCard.tsx | 8 +- .../talent-search/src/lib/models/Member.ts | 5 +- .../talent-search/src/lib/models/index.ts | 1 - .../lib/profile/modify-user-profile.model.ts | 3 +- .../core/lib/profile/user-profile.model.ts | 7 ++ 8 files changed, 74 insertions(+), 114 deletions(-) diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx index 69be73a23..64161ce38 100644 --- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx +++ b/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 = (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 = (props: AboutMeProps) => { I'm {' '} { - namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly' + props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly ? props.profile?.handle : props.profile?.firstName } diff --git a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx index 9ec406888..acb19d051 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx +++ b/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 = (props: ModifyMemberNameModalProps) => { @@ -43,10 +36,8 @@ const ModifyMemberNameModal: FC = (props: ModifyMemb const [currentLastName, setCurrentLastName]: [string, Dispatch>] = useState(props.profile.lastName) - const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [ - NamesAndHandleAppearance | undefined, Dispatch> - ] - = useState(props.namesAndHandleAppearance) + const [namesAndHandleAppearance, setNamesAndHandleAppearance] + = useState(props.profile.namesAndHandleAppearance) function handleFirstNameChange(e: React.ChangeEvent): void { setCurrentFirstName(e.target.value) @@ -88,21 +79,12 @@ const ModifyMemberNameModal: FC = (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 }) diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx index aae2aa896..da8c873b5 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx +++ b/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 = (props: ProfileHeaderProps) => { const isMobile: boolean = useCheckIsMobile() @@ -48,18 +42,6 @@ const ProfileHeader: FC = (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, - 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>] = useState(false) @@ -95,7 +77,6 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { setTimeout(() => { setIsNameEditMode(false) props.refreshProfile(props.profile.handle) - mutateTraits() }, 1000) } @@ -159,60 +140,58 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { !isMobile ? renderMemberPhotoWrap() : undefined } - {!traitsLoading && ( -
-
-
-

- { - namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly' - ? props.profile.handle - : `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}` - } -

+
+
+
+

{ - canEdit && ( - - ) + props.profile.namesAndHandleAppearance === NamesAndHandleAppearance.handleOnly + ? props.profile.handle + : `${props.profile.firstName} ${props.profile.lastName?.slice(0, 1) ?? ''}` } -

- -

- { - // 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 - <> - {props.profile.handle} - {' '} - | - {' '} - - ) : undefined - } - Member Since - {' '} - {moment(props.profile.createdAt) - .format('MMM YYYY')}

-
- { - !canEdit && isTalentSearch ? ( -
-
- ) : undefined - } + ) + } +
+ +

+ { + // 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 + <> + {props.profile.handle} + {' '} + | + {' '} + + ) : undefined + } + Member Since + {' '} + {moment(props.profile.createdAt) + .format('MMM YYYY')} +

- )} + { + !canEdit && isTalentSearch ? ( +
+
+ ) : undefined + } +
{ // Showing only when they can edit until we have the talent search app @@ -241,8 +220,6 @@ const ProfileHeader: FC = (props: ProfileHeaderProps) => { onClose={handleModifyNameModalClose} onSave={handleModifyNameModalSave} profile={props.profile} - memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data} - namesAndHandleAppearance={namesAndHandleAppearanceData?.namesAndHandleAppearance} /> ) } diff --git a/src/apps/talent-search/src/components/talent-card/TalentCard.tsx b/src/apps/talent-search/src/components/talent-card/TalentCard.tsx index bf0df7e12..d1ccb3067 100644 --- a/src/apps/talent-search/src/components/talent-card/TalentCard.tsx +++ b/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 = props => {
- {props.member.namesAndHandleAppearance !== MemberDisplayName.handleOnly && ( + {props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.handleOnly && (
{props.member.firstName} {' '} {props.member.lastName?.slice(0, 1) || ''}
)} - {props.member.namesAndHandleAppearance !== MemberDisplayName.nameOnly && ( + {props.member.namesAndHandleAppearance !== NamesAndHandleAppearance.nameOnly && (
{props.member.handle} diff --git a/src/apps/talent-search/src/lib/models/Member.ts b/src/apps/talent-search/src/lib/models/Member.ts index f1aab22d8..b29e61658 100644 --- a/src/apps/talent-search/src/lib/models/Member.ts +++ b/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; diff --git a/src/apps/talent-search/src/lib/models/index.ts b/src/apps/talent-search/src/lib/models/index.ts index 4179a1aca..7ac93e125 100644 --- a/src/apps/talent-search/src/lib/models/index.ts +++ b/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' diff --git a/src/libs/core/lib/profile/modify-user-profile.model.ts b/src/libs/core/lib/profile/modify-user-profile.model.ts index ac85292d8..3316e085b 100644 --- a/src/libs/core/lib/profile/modify-user-profile.model.ts +++ b/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 { diff --git a/src/libs/core/lib/profile/user-profile.model.ts b/src/libs/core/lib/profile/user-profile.model.ts index 788b7e114..03d863bfd 100644 --- a/src/libs/core/lib/profile/user-profile.model.ts +++ b/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 updatedAt: number userId: number + namesAndHandleAppearance: NamesAndHandleAppearance }