diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss
new file mode 100644
index 000000000..e123fd4d4
--- /dev/null
+++ b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss
@@ -0,0 +1,31 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+ flex: 1 1;
+ width: 100%;
+ height: 100%;
+
+ .warning {
+ color: $red-100;
+ }
+}
+
+.publicContent {
+ background: $black-10;
+ border-radius: $sp-4;
+
+ 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;
+ }
+
+}
diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.tsx b/src/apps/profiles/src/components/EmptySection/EmptySection.tsx
new file mode 100644
index 000000000..59f6e1b0f
--- /dev/null
+++ b/src/apps/profiles/src/components/EmptySection/EmptySection.tsx
@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import styles from './EmptySection.module.scss'
+
+interface EmptySectionProps {
+ children?: ReactNode
+ className?: string
+ isSelf?: boolean
+ selfMessage?: string
+ title?: string
+ wide?: boolean
+}
+
+const EmptySection: FC = props => (
+
+ {props.isSelf
+ ? (
+
+ {props.selfMessage}
+
+ )
+ : (
+ <>
+ {props.title && (
+
{props.title}
+ )}
+ {props.children}
+ >
+ )}
+
+)
+
+export default EmptySection
diff --git a/src/apps/profiles/src/components/EmptySection/index.ts b/src/apps/profiles/src/components/EmptySection/index.ts
new file mode 100644
index 000000000..a8f327e0a
--- /dev/null
+++ b/src/apps/profiles/src/components/EmptySection/index.ts
@@ -0,0 +1 @@
+export { default as EmptySection } from './EmptySection'
diff --git a/src/apps/profiles/src/components/index.ts b/src/apps/profiles/src/components/index.ts
index a6abf5ebf..7b2432690 100644
--- a/src/apps/profiles/src/components/index.ts
+++ b/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'
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 e1f83c721..62db8440e 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
@@ -17,5 +17,8 @@
align-items: center;
justify-content: center;
margin-bottom: $sp-10;
+ &.emptyDesc {
+ margin-bottom: 0;
+ }
}
-}
\ No newline at end of file
+}
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 414f5b1f2..2bb8e5463 100644
--- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
+++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
@@ -1,10 +1,11 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { KeyedMutator } from 'swr'
+import classNames from 'classnames'
import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
import { ModifyAboutMeModal } from './ModifyAboutMeModal'
@@ -32,6 +33,10 @@ const AboutMe: FC = (props: AboutMeProps) => {
const memberTitleTrait: any
= memberPersonalizationTraits?.[0]?.traits?.data?.find((trait: any) => trait.profileSelfTitle)
+ const hasEmptyDescription = useMemo(() => (
+ props.profile && !props.profile.description
+ ), [props.profile])
+
useEffect(() => {
if (props.authProfile && editMode === profileEditModes.aboutMe) {
setIsEditMode(true)
@@ -66,7 +71,7 @@ const AboutMe: FC = (props: AboutMeProps) => {
{' '}
{props.profile?.firstName || props.profile?.handle}
-
+
{memberTitleTrait?.profileSelfTitle}
{
canEdit && (
@@ -76,6 +81,16 @@ const AboutMe: FC
= (props: AboutMeProps) => {
)
}
+ {hasEmptyDescription && (
+
+ )}
{props.profile?.description}
{
diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss
index 041d409e1..c8181b50e 100644
--- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss
+++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss
@@ -22,5 +22,6 @@
.educationContentWrap {
display: flex;
flex-direction: column;
+ padding-bottom: $sp-8;
}
}
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 6abf0a63c..39eba5016 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
@@ -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,24 @@ const EducationAndCertifications: FC
= (props:
- {
- memberEducation?.map((education: UserTrait) => (
+ {(memberEducation?.length as number) > 0
+ ? memberEducation?.map((education: UserTrait) => (
))
- }
+ : (
+
+ I'm still building up my education and certifications here at Topcoder.
+
+ )}
diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss b/src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss
index 21118d086..42b315067 100644
--- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss
+++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss
@@ -1,7 +1,6 @@
@import '@libs/ui/styles/includes';
.educationCard {
- margin-bottom: $sp-4;
flex: 1;
.educationCardHeader {
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
index 1bb9c5fcd..09a217971 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 } 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 = (props: MemberSkillsInfoProp
- {
- memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
+ {memberEMSISkills?.length > 0
+ ? memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
= (props: MemberSkillsInfoProp
{isVerifiedSkill(memberEMSISkill.skillSources) && }
))
- }
+ : (
+
+ This member has not yet provided skills, but check back soon as their skills will grow as
+ they complete project tasks.
+
+ )}
{
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
index d00d6fe02..feb7789b1 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
@@ -22,5 +22,6 @@
.contentWrap {
display: flex;
flex-direction: column;
+ padding-bottom: $sp-8;
}
}
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 a86041b4e..253b30e66 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 { 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,18 @@ const WorkExpirence: FC = (props: WorkExpirenceProps) => {
- {
- workExpirence?.map((work: UserTrait) => (
+ {(workExpirence?.length as number) > 0
+ ? workExpirence?.map((work: UserTrait) => (
))
- }
+ : (
+
+ I'm still building up my experience here at Topcoder.
+
+ )}
{
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
index c94f99e44..c5a7e7c3f 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
+++ b/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 {
diff --git a/src/apps/profiles/src/profiles-landing-page/ProfilesLandingPage.tsx b/src/apps/profiles/src/profiles-landing-page/ProfilesLandingPage.tsx
index 7d520eaec..0039ee3ec 100644
--- a/src/apps/profiles/src/profiles-landing-page/ProfilesLandingPage.tsx
+++ b/src/apps/profiles/src/profiles-landing-page/ProfilesLandingPage.tsx
@@ -3,6 +3,8 @@ import { NavigateFunction, useNavigate } from 'react-router-dom'
import { profileContext, ProfileContextData } from '~/libs/core'
+import { rootRoute } from '../profiles.routes'
+
const ProfilesLandingPage: FC = () => {
const navigate: NavigateFunction = useNavigate()
@@ -11,7 +13,7 @@ const ProfilesLandingPage: FC = () => {
// redirect to profile page if logged in
useEffect(() => {
if (authProfile) {
- navigate(`/${authProfile.handle}`)
+ navigate(`${rootRoute}/${authProfile.handle}`)
}
}, [authProfile, navigate])