MP-172 update profile page when empty -> dev

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;
+    }
+}

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

src/apps/profiles/src/components/AddButton/index.ts

@@ -0,0 +1 @@
+export { default as AddButton } from './AddButton'

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx

@@ -1,18 +1,20 @@
 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
 }
 
 const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMemberPropertyBtnProps) => (
     <Button
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
-        className={styles.editMemberPropertyBtn}
+        className={classNames(styles.editMemberPropertyBtn, props.className)}
         size='lg'
     />
 )

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'

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;
+}

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>
 

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,
+    UserCompletedCertificationsResponse,
+    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,17 +29,28 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
+    const { data: memberTCA, loading: tcaDataLoading }: UserCompletedCertificationsResponse
+        = useUserCompletedCertifications(props.profile?.userId)
+
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
     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])
 
+    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 +78,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 +98,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 +113,13 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 </EmptySection>
             )}
 
+            {!loading && canEdit && !hasEducationData && (
+                <AddButton
+                    label='Add education & certifications'
+                    onClick={handleEditEducationClick}
+                />
+            )}
+
             {
                 isEditMode && (
                     <ModifyEducationModal

src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx

@@ -1,10 +1,9 @@
 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 { EditMemberPropertyBtn } from '../../components'
+import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
 
@@ -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,19 +54,24 @@ 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>
-                {
-                    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) => (