Merge pull request #730 from topcoder-platform/MP-170_blank-profile-sections

MP-170 - add loading state & fix state for experience

Author: vas3a

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

@@ -28,4 +28,9 @@
         padding: $sp-15 2*$sp-15;
     }
 
+    @include ltemd {
+        &, &:global(.m-lg) {
+            padding: $sp-8 $sp-6;
+        }
+    }
 }

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

@@ -3,6 +3,7 @@
 .container {
     display: flex;
     flex-direction: column;
+    padding-bottom: $sp-8;
 
     .headerWrap {
         display: flex;
@@ -19,9 +20,15 @@
         }
     }
 
+    .emptyBlock {
+        display: none;
+    }
+
     .educationContentWrap {
         display: flex;
         flex-direction: column;
-        padding-bottom: $sp-8;
+        &:empty + .emptyBlock {
+            display: flex;
+        }
     }
 }

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

@@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'reac
 import { useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { EditMemberPropertyBtn, EmptySection } from '../../components'
@@ -27,10 +27,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberEducationTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
 
     const memberEducation: UserTrait[] | undefined
@@ -73,28 +70,33 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
             </div>
 
             <div className={styles.educationContentWrap}>
-                {(memberEducation?.length as number) > 0
-                    ? memberEducation?.map((education: UserTrait) => (
-                        <EducationCard
-                            key={`${education.schoolCollegeName}-${education.major}`}
-                            education={education}
-                        />
-                    ))
-                    : (
-                        <EmptySection
-                            selfMessage={`
-                                Including your education and certifications enhances the strength
-                                of your profile in comparison to others.
-                            `}
-                            isSelf={canEdit}
-                        >
-                            I&apos;m still building up my education and certifications here at Topcoder.
-                        </EmptySection>
-                    )}
+                {!loading && (
+                    (memberEducation?.length as number) > 0 && (
+                        memberEducation?.map((education: UserTrait) => (
+                            <EducationCard
+                                key={`${education.schoolCollegeName}-${education.major}`}
+                                education={education}
+                            />
+                        ))
+                    )
+                )}
             </div>
 
             <MemberTCAInfo profile={props.profile} />
 
+            {!loading && !memberEducation?.length && (
+                <EmptySection
+                    className={styles.emptyBlock}
+                    selfMessage={`
+                        Including your education and certifications enhances the strength
+                        of your profile in comparison to others.
+                    `}
+                    isSelf={canEdit}
+                >
+                    I&apos;m still building up my education and certifications here at Topcoder.
+                </EmptySection>
+            )}
+
             {
                 isEditMode && (
                     <ModifyEducationModal

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

@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { KeyedMutator } from 'swr'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
@@ -26,10 +25,7 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberWorkExpirenceTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberWorkExpirenceTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.work })
 
     const workExpirence: UserTrait[] | undefined
@@ -72,18 +68,20 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
             </div>
 
             <div className={styles.contentWrap}>
-                {(workExpirence?.length as number) > 0
-                    ? workExpirence?.map((work: UserTrait) => (
-                        <WorkExpirenceCard key={`${work.company}-${work.industry}-${work.position}`} work={work} />
-                    ))
-                    : (
-                        <EmptySection
-                            selfMessage='Adding experience enhances the professional appearance of your profile.'
-                            isSelf={canEdit}
-                        >
-                            I&apos;m still building up my experience here at Topcoder.
-                        </EmptySection>
-                    )}
+                {!loading && (
+                    (workExpirence?.length as number) > 0
+                        ? workExpirence?.map((work: UserTrait) => (
+                            <WorkExpirenceCard key={`${work.company}-${work.industry}-${work.position}`} work={work} />
+                        ))
+                        : (
+                            <EmptySection
+                                selfMessage='Adding experience enhances the professional appearance of your profile.'
+                                isSelf={canEdit}
+                            >
+                                I&apos;m still building up my experience here at Topcoder.
+                            </EmptySection>
+                        )
+                )}
             </div>
 
             {

src/libs/core/lib/profile/data-providers/useMemberTraits.ts

@@ -6,6 +6,7 @@ import { UserTraits } from '../user-traits.model'
 
 export interface MemberTraitsAPI {
     data: UserTraits[] | undefined
+    loading: boolean
     mutate: KeyedMutator<any>
 }
 
@@ -14,11 +15,12 @@ export interface MemberTraitsQuery {
 }
 
 export function useMemberTraits(handle?: string, query?: MemberTraitsQuery): MemberTraitsAPI {
-    const { data, mutate }: SWRResponse
+    const { data, mutate, isValidating, error }: SWRResponse
         = useSWR(handle ? `${getProfileUrl(handle)}/traits?${qs.stringify(query)}` : undefined)
 
     return {
         data,
+        loading: isValidating && !data && !error,
         mutate,
     }
 }