MP-170 - show "empty" block content for profile when viewed publicly

Author: vas3a

src/apps/profiles/src/components/EmptySection/EmptySection.module.scss

@@ -0,0 +1,24 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    background: $black-10;
+    border-radius: $sp-4;
+    flex: 1 1;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    text-align: center;
+
+    gap: $sp-8;
+    padding: $sp-15 $sp-11;
+
+    &:global(.m-lg) {
+        padding: $sp-15 2*$sp-15;
+    }
+
+}

src/apps/profiles/src/components/EmptySection/EmptySection.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+import styles from './EmptySection.module.scss'
+
+interface EmptySectionProps extends PropsWithChildren {
+    title?: string
+    wide?: boolean
+}
+
+const EmptySection: FC<EmptySectionProps> = props => (
+    <div className={classNames(styles.wrap, props.wide && 'm-lg')}>
+        {props.title && (
+            <div className='body-medium-bold'>{props.title}</div>
+        )}
+        {props.children}
+    </div>
+)
+
+export default EmptySection

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

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

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

@@ -15,3 +15,4 @@ export * from './LogoDesignDetailsModal'
 export * from './WebDesignDetailsModal'
 export * from './DesignF2FDetailsModal'
 export * from './EditMemberPropertyBtn'
+export * from './EmptySection'

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -5,7 +5,7 @@ import { KeyedMutator } from 'swr'
 import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { MemberTCAInfo } from '../tca-info'
 
 import { ModifyEducationModal } from './ModifyEducationModal'
@@ -71,14 +71,18 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
             </div>
 
             <div className={styles.educationContentWrap}>
-                {
-                    memberEducation?.map((education: UserTrait) => (
+                {(memberEducation?.length as number) > 0
+                    ? memberEducation?.map((education: UserTrait) => (
                         <EducationCard
                             key={`${education.schoolCollegeName}-${education.major}`}
                             education={education}
                         />
                     ))
-                }
+                    : (
+                        <EmptySection>
+                            I&apos;m still building up my education and certifications here at Topcoder.
+                        </EmptySection>
+                    )}
             </div>
 
             <MemberTCAInfo profile={props.profile} />

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 } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
@@ -68,8 +68,8 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             </div>
 
             <div className={styles.skillsWrap}>
-                {
-                    memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
+                {memberEMSISkills?.length > 0
+                    ? memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
                         <div
                             className={classNames(
                                 styles.skillItem,
@@ -81,7 +81,15 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                             {isVerifiedSkill(memberEMSISkill.skillSources) && <IconOutline.CheckCircleIcon />}
                         </div>
                     ))
-                }
+                    : (
+                        <EmptySection
+                            title='Topcoder verifies and tracks skills as our members complete projects and challenges.'
+                            wide
+                        >
+                            This member has not yet provided skills, but check back soon as their skills will grow as
+                            they complete project tasks.
+                        </EmptySection>
+                    )}
             </div>
 
             {

src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss

@@ -22,5 +22,6 @@
     .contentWrap {
         display: flex;
         flex-direction: column;
+        padding-bottom: $sp-4;
     }
 }

src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx

@@ -5,7 +5,7 @@ import { KeyedMutator } from 'swr'
 import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 
 import { ModifyWorkExpirenceModal } from './ModifyWorkExpirenceModal'
 import { WorkExpirenceCard } from './WorkExpirenceCard'
@@ -70,11 +70,15 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
             </div>
 
             <div className={styles.contentWrap}>
-                {
-                    workExpirence?.map((work: UserTrait) => (
+                {(workExpirence?.length as number) > 0
+                    ? workExpirence?.map((work: UserTrait) => (
                         <WorkExpirenceCard key={`${work.company}-${work.industry}-${work.position}`} work={work} />
                     ))
-                }
+                    : (
+                        <EmptySection>
+                            I&apos;m still building up my experience here at Topcoder.
+                        </EmptySection>
+                    )}
             </div>
 
             {

src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss

@@ -1,7 +1,6 @@
 @import '@libs/ui/styles/includes';
 
 .workExpirenceCard {
-    margin-bottom: $sp-4;
     flex: 1;
 
     .workExpirenceCardHeader {