From ce44c8e0068f151f9b7360142f3d5ef4306643aa Mon Sep 17 00:00:00 2001 From: Vasilica Date: Mon, 10 Jul 2023 10:40:20 +0300 Subject: [PATCH 1/3] MP-170 - show "empty" block content for profile when viewed publicly --- .../EmptySection/EmptySection.module.scss | 24 +++++++++++++++++++ .../components/EmptySection/EmptySection.tsx | 20 ++++++++++++++++ .../src/components/EmptySection/index.ts | 1 + src/apps/profiles/src/components/index.ts | 1 + .../EducationAndCertifications.tsx | 12 ++++++---- .../skills/MemberSkillsInfo.tsx | 16 +++++++++---- .../work-expirence/WorkExpirence.module.scss | 1 + .../work-expirence/WorkExpirence.tsx | 12 ++++++---- .../WorkExpirenceCard.module.scss | 1 - 9 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 src/apps/profiles/src/components/EmptySection/EmptySection.module.scss create mode 100644 src/apps/profiles/src/components/EmptySection/EmptySection.tsx create mode 100644 src/apps/profiles/src/components/EmptySection/index.ts 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..09ac7bbe8 --- /dev/null +++ b/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; + } + +} 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..4bd9437b0 --- /dev/null +++ b/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 = props => ( +
+ {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/education-and-certifications/EducationAndCertifications.tsx b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx index 6abf0a63c..4932025b1 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,18 @@ 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/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx index 1bb9c5fcd..c9ab80605 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..496840be1 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-4; } } 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..27635c82e 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,15 @@ 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 { From 0f780409eba54ee7ffc6588c456e3b1f1a7c5386 Mon Sep 17 00:00:00 2001 From: Vasilica Date: Mon, 10 Jul 2023 11:08:33 +0300 Subject: [PATCH 2/3] MP-172 - empty profile messages for self view --- .../EmptySection/EmptySection.module.scss | 11 +++++- .../components/EmptySection/EmptySection.tsx | 37 +++++++++++++++---- .../about-me/AboutMe.module.scss | 5 ++- .../src/member-profile/about-me/AboutMe.tsx | 21 +++++++++-- .../EducationAndCertifications.module.scss | 1 + .../EducationAndCertifications.tsx | 8 +++- .../EducationCard/EducationCard.module.scss | 1 - .../skills/MemberSkillsInfo.tsx | 2 + .../work-expirence/WorkExpirence.module.scss | 2 +- .../work-expirence/WorkExpirence.tsx | 5 ++- 10 files changed, 76 insertions(+), 17 deletions(-) diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss index 09ac7bbe8..e123fd4d4 100644 --- a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss +++ b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss @@ -1,12 +1,19 @@ @import "@libs/ui/styles/includes"; .wrap { - background: $black-10; - border-radius: $sp-4; 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; diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.tsx b/src/apps/profiles/src/components/EmptySection/EmptySection.tsx index 4bd9437b0..59f6e1b0f 100644 --- a/src/apps/profiles/src/components/EmptySection/EmptySection.tsx +++ b/src/apps/profiles/src/components/EmptySection/EmptySection.tsx @@ -1,19 +1,42 @@ -import { FC, PropsWithChildren } from 'react' +import { FC, ReactNode } from 'react' import classNames from 'classnames' import styles from './EmptySection.module.scss' -interface EmptySectionProps extends PropsWithChildren { +interface EmptySectionProps { + children?: ReactNode + className?: string + isSelf?: boolean + selfMessage?: string title?: string wide?: boolean } const EmptySection: FC = props => ( -
- {props.title && ( -
{props.title}
- )} - {props.children} +
+ {props.isSelf + ? ( +
+ {props.selfMessage} +
+ ) + : ( + <> + {props.title && ( +
{props.title}
+ )} + {props.children} + + )}
) 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 4932025b1..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 @@ -79,7 +79,13 @@ const EducationAndCertifications: FC = (props: /> )) : ( - + 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 c9ab80605..09a217971 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx @@ -85,6 +85,8 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp 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 496840be1..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,6 +22,6 @@ .contentWrap { display: flex; flex-direction: column; - padding-bottom: $sp-4; + 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 27635c82e..253b30e66 100644 --- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx +++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx @@ -75,7 +75,10 @@ const WorkExpirence: FC = (props: WorkExpirenceProps) => { )) : ( - + I'm still building up my experience here at Topcoder. )} From 38a49899490df1d49ca242369846c5226581314e Mon Sep 17 00:00:00 2001 From: Vasilica Date: Mon, 10 Jul 2023 11:08:54 +0300 Subject: [PATCH 3/3] ProfileLandingPage: when redirecting, use the "rootRoute" --- .../src/profiles-landing-page/ProfilesLandingPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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])