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])