From cb0e5d5e3a810577bcd1d2101d09bc10624e1450 Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Mon, 17 Jul 2023 10:00:54 +0300
Subject: [PATCH 1/3] use await to pass unhandled errors up in the stack

---
 .../components/member-skill-editor/use-member-skill-editor.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
index 1a7972cc8..5ff00a6d6 100644
--- a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
+++ b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
@@ -53,7 +53,7 @@ export const useMemberSkillEditor = ({
             return
         }
 
-        updateMemberEmsiSkills(profile.userId, emsiSkills)
+        await updateMemberEmsiSkills(profile.userId, emsiSkills)
     }, [isEmsiInitialized, profile?.userId, skills])
 
     // Handle user changes

From 0b67972d4c830382ad821ee3511b5c70e23146b2 Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Mon, 17 Jul 2023 11:22:48 +0300
Subject: [PATCH 2/3] MP-172 - Update profile page when empty

---
 .../AddButton/AddButton.module.scss           | 19 +++++++
 .../src/components/AddButton/AddButton.tsx    | 29 ++++++++++
 .../src/components/AddButton/index.ts         |  1 +
 .../EditMemberPropertyBtn.tsx                 |  4 +-
 src/apps/profiles/src/components/index.ts     |  1 +
 .../about-me/AboutMe.module.scss              |  7 ++-
 .../src/member-profile/about-me/AboutMe.tsx   | 53 +++++++++++++------
 .../EducationAndCertifications.tsx            | 44 +++++++++++----
 .../languages/MemberLanguages.tsx             | 23 ++++----
 .../src/member-profile/links/MemberLinks.tsx  | 26 +++++----
 .../profile-header/ProfileHeader.module.scss  |  9 +++-
 .../profile-header/ProfileHeader.tsx          | 23 +++++---
 .../skills/MemberSkillsInfo.module.scss       |  4 +-
 .../skills/MemberSkillsInfo.tsx               | 12 +++--
 .../member-profile/tca-info/MemberTCAInfo.tsx | 13 +++--
 .../work-expirence/WorkExpirence.tsx          | 52 +++++++++++-------
 .../emsi-skills/emsi-skills.service.ts        |  6 ++-
 17 files changed, 234 insertions(+), 92 deletions(-)
 create mode 100644 src/apps/profiles/src/components/AddButton/AddButton.module.scss
 create mode 100644 src/apps/profiles/src/components/AddButton/AddButton.tsx
 create mode 100644 src/apps/profiles/src/components/AddButton/index.ts

diff --git a/src/apps/profiles/src/components/AddButton/AddButton.module.scss b/src/apps/profiles/src/components/AddButton/AddButton.module.scss
new file mode 100644
index 000000000..b4317caa5
--- /dev/null
+++ b/src/apps/profiles/src/components/AddButton/AddButton.module.scss
@@ -0,0 +1,19 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    margin-top: $sp-2;
+
+    &:global(.mt0) {
+        margin-top: 0;
+    }
+}
+
+.addButton {
+    padding: 0 !important;
+    color: $black-100;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
diff --git a/src/apps/profiles/src/components/AddButton/AddButton.tsx b/src/apps/profiles/src/components/AddButton/AddButton.tsx
new file mode 100644
index 000000000..df940acc2
--- /dev/null
+++ b/src/apps/profiles/src/components/AddButton/AddButton.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline } from '~/libs/ui'
+
+import styles from './AddButton.module.scss'
+
+interface AddButtonProps {
+    className?: string
+    label?: string
+    onClick: () => void
+    variant?: 'mt0'
+}
+
+const AddButton: FC<AddButtonProps> = props => (
+    <div className={classNames(styles.wrap, props.variant, props.className)}>
+        <Button
+            icon={IconOutline.PlusIcon}
+            onClick={props.onClick}
+            className={styles.addButton}
+            size='lg'
+            label={props.label}
+            link
+            variant='linkblue'
+        />
+    </div>
+)
+
+export default AddButton
diff --git a/src/apps/profiles/src/components/AddButton/index.ts b/src/apps/profiles/src/components/AddButton/index.ts
new file mode 100644
index 000000000..f0733c522
--- /dev/null
+++ b/src/apps/profiles/src/components/AddButton/index.ts
@@ -0,0 +1 @@
+export { default as AddButton } from './AddButton'
diff --git a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx
index 23268d405..4d702a862 100644
--- a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx
+++ b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx
@@ -1,10 +1,12 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 
 import { Button, IconOutline } from '~/libs/ui'
 
 import styles from './EditMemberPropertyBtn.module.scss'
 
 interface EditMemberPropertyBtnProps {
+    className?: string
     onClick: () => void
 }
 
@@ -12,7 +14,7 @@ const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMember
     <Button
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
-        className={styles.editMemberPropertyBtn}
+        className={classNames(styles.editMemberPropertyBtn, props.className)}
         size='lg'
     />
 )
diff --git a/src/apps/profiles/src/components/index.ts b/src/apps/profiles/src/components/index.ts
index 7b2432690..2b9cf8c4c 100644
--- a/src/apps/profiles/src/components/index.ts
+++ b/src/apps/profiles/src/components/index.ts
@@ -15,4 +15,5 @@ export * from './LogoDesignDetailsModal'
 export * from './WebDesignDetailsModal'
 export * from './DesignF2FDetailsModal'
 export * from './EditMemberPropertyBtn'
+export * from './AddButton'
 export * from './EmptySection'
diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
index 62db8440e..669c78ec9 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
@@ -16,9 +16,14 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: $sp-10;
+        margin-bottom: $sp-4;
         &.emptyDesc {
             margin-bottom: 0;
         }
     }
 }
+
+.empty {
+    height: auto;
+    margin-top: $sp-4;
+}
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 2bb8e5463..0220970ba 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
@@ -4,8 +4,9 @@ import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
 import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
+import { Button } from '~/libs/ui'
 
-import { EditMemberPropertyBtn, EmptySection } from '../../components'
+import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifyAboutMeModal } from './ModifyAboutMeModal'
@@ -73,23 +74,43 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
             </p>
             <div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
                 <p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditClick}
-                        />
-                    )
-                }
+                {canEdit && !hasEmptyDescription && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditClick}
+                    />
+                )}
             </div>
             {hasEmptyDescription && (
-                <EmptySection
-                    className={styles.empty}
-                    selfMessage={`
-                        Your bio is an opportunity to share your personality
-                        and interests with the community and customers.
-                    `}
-                    isSelf={canEdit}
-                />
+                <>
+                    <EmptySection
+                        className={styles.empty}
+                        selfMessage={`
+                            Your bio is an opportunity to share your personality
+                            and interests with the community and customers.
+                        `}
+                        isSelf={canEdit}
+                    >
+                        I&apos;m a proud Topcoder member, working hard to solve some of the worlds biggest problems.
+                        <br />
+                        <br />
+                        I&apos;m excited to hear about your technology challenges and look forward to being
+                        on your next project.
+                        <br />
+                        <Button
+                            link
+                            variant='linkblue'
+                            size='lg'
+                        >
+                            Let&apos;s connect!
+                        </Button>
+                    </EmptySection>
+                    {canEdit && (
+                        <AddButton
+                            label='Add your bio'
+                            onClick={handleEditClick}
+                        />
+                    )}
+                </>
             )}
             <p>{props.profile?.description}</p>
 
diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
index 125d2b22f..9213ec142 100644
--- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
+++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
@@ -1,10 +1,18 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
-import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
+import {
+    MemberTraitsAPI,
+    useMemberTraits,
+    UserCompletedCertificationsData,
+    UserProfile,
+    UserTrait,
+    UserTraitIds,
+    useUserCompletedCertifications,
+} from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { EditMemberPropertyBtn, EmptySection } from '../../components'
+import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { MemberTCAInfo } from '../tca-info'
 import { notifyUniNavi } from '../../lib'
 
@@ -21,6 +29,9 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
+    const { data: memberTCA }: { data: UserCompletedCertificationsData | undefined }
+        = useUserCompletedCertifications(props.profile?.userId)
+
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
@@ -32,6 +43,12 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const memberEducation: UserTrait[] | undefined
         = useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
 
+    const hasEducationData = useMemo(() => !!(
+        memberTCA?.courses?.length
+        || memberTCA?.enrollments?.length
+        || memberEducation?.length
+    ), [memberEducation?.length, memberTCA?.courses?.length, memberTCA?.enrollments?.length])
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.education) {
             setIsEditMode(true)
@@ -59,13 +76,11 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
         <div className={styles.container}>
             <div className={styles.headerWrap}>
                 <h3>Education and Certifications</h3>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditEducationClick}
-                        />
-                    )
-                }
+                {canEdit && hasEducationData && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditEducationClick}
+                    />
+                )}
             </div>
 
             <div className={styles.educationContentWrap}>
@@ -81,9 +96,9 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 )}
             </div>
 
-            <MemberTCAInfo profile={props.profile} />
+            <MemberTCAInfo memberTcaData={memberTCA} profile={props.profile} />
 
-            {!loading && !memberEducation?.length && (
+            {!loading && !hasEducationData && (
                 <EmptySection
                     className={styles.emptyBlock}
                     selfMessage={`
@@ -96,6 +111,13 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 </EmptySection>
             )}
 
+            {canEdit && !hasEducationData && (
+                <AddButton
+                    label='Add education & certifications'
+                    onClick={handleEditEducationClick}
+                />
+            )}
+
             {
                 isEditMode && (
                     <ModifyEducationModal
diff --git a/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx b/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
index 348adb41d..9ab646dc6 100644
--- a/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
+++ b/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
 
 import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
-import { EditMemberPropertyBtn } from '../../components'
+import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
 
@@ -61,16 +61,21 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
     return canEdit || memberLanguages ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
-                <p className='body-main-bold'>Languages:</p>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditLangaguesClick}
-                        />
-                    )
-                }
+                <p className='body-main-bold'>Languages</p>
+                {canEdit && !!memberLanguages?.length && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditLangaguesClick}
+                    />
+                )}
             </div>
 
+            {canEdit && !memberLanguages?.length && (
+                <AddButton
+                    variant='mt0'
+                    label='Add your languages'
+                    onClick={handleEditLangaguesClick}
+                />
+            )}
             <div className={styles.languages}>
                 {
                     memberLanguages?.map((trait: UserTrait) => (
diff --git a/src/apps/profiles/src/member-profile/links/MemberLinks.tsx b/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
index 3d172ec57..c08520126 100644
--- a/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
+++ b/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
@@ -10,7 +10,7 @@ import {
     SocialIconYoutube,
 } from '~/libs/ui'
 
-import { EditMemberPropertyBtn } from '../../components'
+import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
 
@@ -71,7 +71,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.authProfile])
 
-    function handleEditLangaguesClick(): void {
+    function handleEditClick(): void {
         setIsEditMode(true)
     }
 
@@ -90,14 +90,12 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
     return canEdit || memberLinks?.links ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
-                <p className='body-main-bold'>Links:</p>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditLangaguesClick}
-                        />
-                    )
-                }
+                <p className='body-main-bold'>Links</p>
+                {canEdit && !!memberLinks?.links.length && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditClick}
+                    />
+                )}
             </div>
 
             <div className={styles.links}>
@@ -115,6 +113,14 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
                 }
             </div>
 
+            {canEdit && !memberLinks?.links.length && (
+                <AddButton
+                    variant='mt0'
+                    label='Add your social links'
+                    onClick={handleEditClick}
+                />
+            )}
+
             {
                 isEditMode && (
                     <ModifyMemberLinksModal
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
index 7aad93ec5..7a464efa8 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
@@ -19,7 +19,12 @@
             background-color: $tc-white;
         }
 
-        button {
+        .addButton {
+            display: flex;
+            justify-content: center;
+        }
+
+        .button {
             position: absolute;
             bottom: -10px;
             left: calc(50% - 20px);
@@ -78,4 +83,4 @@
             margin-left: $sp-2;
         }
     }
-}
\ No newline at end of file
+}
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 cdb97e6f7..0d25f81f3 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -13,7 +13,7 @@ import {
 } from '~/libs/core'
 import { Button } from '~/libs/ui'
 
-import { EditMemberPropertyBtn } from '../../components'
+import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { OpenForGigs } from './OpenForGigs'
@@ -32,6 +32,7 @@ const DEFAULT_MEMBER_AVATAR: string
 
 const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const photoURL: string = props.profile.photoURL || DEFAULT_MEMBER_AVATAR
+    const hasProfilePicture = !!props.profile.photoURL
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
@@ -111,13 +112,19 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         <div className={styles.container}>
             <div className={styles.photoWrap}>
                 <img src={photoURL} alt='Topcoder - Member Profile Avatar' className={styles.profilePhoto} />
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleModifyPhotoClick}
-                        />
-                    )
-                }
+                {canEdit && hasProfilePicture && (
+                    <EditMemberPropertyBtn
+                        className={styles.button}
+                        onClick={handleModifyPhotoClick}
+                    />
+                )}
+                {canEdit && !hasProfilePicture && (
+                    <AddButton
+                        className={styles.addButton}
+                        label='Add a profile picture'
+                        onClick={handleModifyPhotoClick}
+                    />
+                )}
             </div>
 
             {!traitsLoading && (
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
index d6586f5bf..3a2bccf43 100644
--- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
+++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
@@ -12,7 +12,6 @@
     .headerWrap {
         display: flex;
         align-items: center;
-        margin-bottom: $sp-4;
 
         h3 {
             font-family: $font-barlow;
@@ -35,7 +34,6 @@
         flex-wrap: wrap;
         column-gap: $sp-1;
         row-gap: $sp-2;
-        margin-top: $sp-2;
 
         .skillItem {
             border: 1px solid $black-20;
@@ -68,4 +66,4 @@
             text-decoration: underline;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
index 1c29239ca..a59e624cb 100644
--- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
+++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { isVerifiedSkill, UserEMSISkill, UserProfile } from '~/libs/core'
 import { IconOutline } from '~/libs/ui'
 
-import { EditMemberPropertyBtn, EmptySection } from '../../components'
+import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
@@ -61,7 +61,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                 <div className={styles.headerWrap}>
                     <h3>Skills</h3>
                     {
-                        canEdit && (
+                        canEdit && memberEMSISkills?.length > 0 && (
                             <EditMemberPropertyBtn
                                 onClick={handleEditSkillsClick}
                             />
@@ -94,7 +94,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         <EmptySection
                             title='Topcoder verifies and tracks skills as our members complete projects and challenges.'
                             wide
-                            selfMessage='Adding at least five skills will increase your visibility with customers.'
+                            selfMessage='Adding at least three skills will increase your visibility with customers.'
                             isSelf={canEdit}
                         >
                             This member has not yet provided skills, but check back soon as their skills will grow as
@@ -102,6 +102,12 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         </EmptySection>
                     )}
             </div>
+            {canEdit && !memberEMSISkills?.length && (
+                <AddButton
+                    label='Add skills'
+                    onClick={handleEditSkillsClick}
+                />
+            )}
 
             {
                 isEditMode && (
diff --git a/src/apps/profiles/src/member-profile/tca-info/MemberTCAInfo.tsx b/src/apps/profiles/src/member-profile/tca-info/MemberTCAInfo.tsx
index 62436d15c..041600ae6 100644
--- a/src/apps/profiles/src/member-profile/tca-info/MemberTCAInfo.tsx
+++ b/src/apps/profiles/src/member-profile/tca-info/MemberTCAInfo.tsx
@@ -8,18 +8,17 @@ import {
     LearnUserCertificationProgress,
     TCACertificationEnrollmentBase,
 } from '~/apps/learn/src/lib'
-import { UserCompletedCertificationsData, UserProfile, useUserCompletedCertifications } from '~/libs/core'
+import { UserCompletedCertificationsData, UserProfile } from '~/libs/core'
 import { BaseModal, TCALogo } from '~/libs/ui'
 
 import styles from './MemberTCAInfo.module.scss'
 
 interface MemberTCAInfoProps {
+    memberTcaData?: UserCompletedCertificationsData
     profile: UserProfile | undefined
 }
 
 const MemberTCAInfo: React.FC<MemberTCAInfoProps> = (props: MemberTCAInfoProps) => {
-    const { data: memberTCA }: { data: UserCompletedCertificationsData | undefined }
-        = useUserCompletedCertifications(props.profile?.userId)
 
     const [certPreviewModalIsOpen, setCertPreviewModalIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -72,7 +71,7 @@ const MemberTCAInfo: React.FC<MemberTCAInfoProps> = (props: MemberTCAInfoProps)
         window.open(url, '_blank')
     }
 
-    return memberTCA && (memberTCA.courses.length || memberTCA.enrollments.length) ? (
+    return props.memberTcaData && (props.memberTcaData.courses.length || props.memberTcaData.enrollments.length) ? (
         <div className={styles.container}>
             <div className={styles.title}>
                 <TCALogo />
@@ -80,12 +79,12 @@ const MemberTCAInfo: React.FC<MemberTCAInfoProps> = (props: MemberTCAInfoProps)
             </div>
 
             {
-                memberTCA.enrollments.length ? (
+                props.memberTcaData.enrollments.length ? (
                     <>
                         <h4>CERTIFICATIONS</h4>
                         <div className={styles.certifications}>
                             {
-                                memberTCA.enrollments.map(enrollment => (
+                                props.memberTcaData.enrollments.map(enrollment => (
                                     <div
                                         className={styles.certificationCard}
                                         onClick={bind(onCertClick, this, enrollment)}
@@ -111,7 +110,7 @@ const MemberTCAInfo: React.FC<MemberTCAInfoProps> = (props: MemberTCAInfoProps)
             <h4>COURSES</h4>
             <div className={styles.certifications}>
                 {
-                    memberTCA.courses.map(course => (
+                    props.memberTcaData.courses.map(course => (
                         <div
                             className={styles.certificationCard}
                             onClick={bind(onCourseClick, this, course)}
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx
index ba15b7be5..ae678940d 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx
@@ -5,7 +5,7 @@ import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
-import { EditMemberPropertyBtn, EmptySection } from '../../components'
+import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 
 import { ModifyWorkExpirenceModal } from './ModifyWorkExpirenceModal'
 import { WorkExpirenceCard } from './WorkExpirenceCard'
@@ -58,29 +58,41 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
         <div className={styles.container}>
             <div className={styles.headerWrap}>
                 <h3>Experience</h3>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditWorkExpirenceClick}
-                        />
-                    )
-                }
+                {canEdit && !!workExpirence?.length && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditWorkExpirenceClick}
+                    />
+                )}
             </div>
 
             <div className={styles.contentWrap}>
                 {!loading && (
-                    (workExpirence?.length as number) > 0
-                        ? workExpirence?.map((work: UserTrait) => (
-                            <WorkExpirenceCard key={`${work.company}-${work.industry}-${work.position}`} work={work} />
-                        ))
-                        : (
-                            <EmptySection
-                                selfMessage='Adding experience enhances the professional appearance of your profile.'
-                                isSelf={canEdit}
-                            >
-                                I&apos;m still building up my experience here at Topcoder.
-                            </EmptySection>
-                        )
+                    <>
+                        {(workExpirence?.length as number) > 0
+                            ? workExpirence?.map((work: UserTrait) => (
+                                <WorkExpirenceCard
+                                    key={`${work.company}-${work.industry}-${work.position}`}
+                                    work={work}
+                                />
+                            ))
+                            : (
+                                <EmptySection
+                                    selfMessage={
+                                        'Adding experience enhances the professional '
+                                        + 'appearance of your profile.'
+                                    }
+                                    isSelf={canEdit}
+                                >
+                                    I&apos;m still building up my experience here at Topcoder.
+                                </EmptySection>
+                            )}
+                        {canEdit && !workExpirence?.length && (
+                            <AddButton
+                                label='Add experience'
+                                onClick={handleEditWorkExpirenceClick}
+                            />
+                        )}
+                    </>
                 )}
             </div>
 
diff --git a/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts b/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts
index 835fcd9a3..954390907 100644
--- a/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts
+++ b/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts
@@ -1,5 +1,5 @@
 import { EnvironmentConfig } from '~/config'
-import { xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core'
+import { xhrDeleteAsync, xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core'
 
 import { EmsiSkill, Skill } from './skill.model'
 
@@ -23,3 +23,7 @@ export async function updateMemberEmsiSkills(userId: string | number, skills: Sk
         emsiSkills: skills,
     })
 }
+
+export async function deleteMemberEmsiSkills(userId: string | number): Promise<void> {
+    return xhrDeleteAsync(`${EnvironmentConfig.API.V5}/emsi-skills/member-emsi-skills/${userId}`)
+}

From 25ab120a2bb7324e45469221c5e68b25b5ced69a Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Mon, 17 Jul 2023 11:53:01 +0300
Subject: [PATCH 3/3] MP-172 - prevent data flicker

---
 .../EducationAndCertifications.tsx                     | 10 ++++++----
 .../src/member-profile/languages/MemberLanguages.tsx   | 10 +++-------
 .../profiles/src/member-profile/links/MemberLinks.tsx  | 10 +++-------
 .../data-providers/useUserCompletedCertifications.ts   | 10 ++++++----
 4 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
index 9213ec142..fac21ca00 100644
--- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
+++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx
@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
 import {
     MemberTraitsAPI,
     useMemberTraits,
-    UserCompletedCertificationsData,
+    UserCompletedCertificationsResponse,
     UserProfile,
     UserTrait,
     UserTraitIds,
@@ -29,7 +29,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
-    const { data: memberTCA }: { data: UserCompletedCertificationsData | undefined }
+    const { data: memberTCA, loading: tcaDataLoading }: UserCompletedCertificationsResponse
         = useUserCompletedCertifications(props.profile?.userId)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
@@ -37,9 +37,11 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
+    const { data: memberEducationTraits, mutate: mutateTraits, loading: traitsLoading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
 
+    const loading = tcaDataLoading || traitsLoading
+
     const memberEducation: UserTrait[] | undefined
         = useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
 
@@ -111,7 +113,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 </EmptySection>
             )}
 
-            {canEdit && !hasEducationData && (
+            {!loading && canEdit && !hasEducationData && (
                 <AddButton
                     label='Add education & certifications'
                     onClick={handleEditEducationClick}
diff --git a/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx b/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
index 9ab646dc6..99a909784 100644
--- a/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
+++ b/src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx
@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { KeyedMutator } from 'swr'
 import { useSearchParams } from 'react-router-dom'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 
 import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -26,10 +25,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberLanguageTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberLanguageTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.languages })
 
     const memberLanguages: UserTrait[] | undefined
@@ -58,7 +54,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
         }, 1000)
     }
 
-    return canEdit || memberLanguages ? (
+    return !loading && (canEdit || memberLanguages) ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
                 <p className='body-main-bold'>Languages</p>
diff --git a/src/apps/profiles/src/member-profile/links/MemberLinks.tsx b/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
index c08520126..2dfd226e8 100644
--- a/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
+++ b/src/apps/profiles/src/member-profile/links/MemberLinks.tsx
@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { KeyedMutator } from 'swr'
 import { useSearchParams } from 'react-router-dom'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 import {
     IconOutline,
     SocialIconFacebook,
@@ -53,10 +52,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberPersonalizationTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberPersonalizationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
 
     const memberLinks: UserTrait | undefined
@@ -87,7 +83,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
         }, 1000)
     }
 
-    return canEdit || memberLinks?.links ? (
+    return !loading && (canEdit || memberLinks?.links) ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
                 <p className='body-main-bold'>Links</p>
diff --git a/src/libs/core/lib/profile/data-providers/useUserCompletedCertifications.ts b/src/libs/core/lib/profile/data-providers/useUserCompletedCertifications.ts
index 005e85e32..5238bd176 100644
--- a/src/libs/core/lib/profile/data-providers/useUserCompletedCertifications.ts
+++ b/src/libs/core/lib/profile/data-providers/useUserCompletedCertifications.ts
@@ -14,13 +14,15 @@ export interface UserCompletedCertificationsData {
     courses: ReadonlyArray<LearnUserCertificationProgress>
 }
 
-export function useUserCompletedCertifications(
-    userId: number | undefined,
-): {
+export interface UserCompletedCertificationsResponse {
     data: UserCompletedCertificationsData | undefined
     loading: boolean
     ready: boolean
-} {
+}
+
+export function useUserCompletedCertifications(
+    userId: number | undefined,
+): UserCompletedCertificationsResponse {
 
     const url: string = `${learnBaseURL()}/completed-certifications/${userId}`