TAL-37 - update completeness meter when user update their profiles

Author: vas3a

src/apps/profiles/src/member-profile/MemberProfilePage.tsx

@@ -31,7 +31,7 @@ const MemberProfilePage: FC<{}> = () => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
                 .then(userProfile => {
-                    setProfile(userProfile)
+                    setProfile({ ...userProfile } as UserProfile)
                     setProfileReady(true)
                 })
             // TODO: NOT FOUND PAGE redirect/dispaly
@@ -41,7 +41,7 @@ const MemberProfilePage: FC<{}> = () => {
     const refreshProfile = useCallback((handle: string) => (
         profileGetPublicAsync(handle)
             .then(userProfile => {
-                setProfile(userProfile)
+                setProfile({ ...userProfile } as UserProfile)
                 if (userProfile) {
                     notifyUniNavi(userProfile)
                     triggerSprigSurvey(userProfile)

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -27,7 +27,6 @@ interface ProfilePageLayoutProps {
 }
 
 const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
-
     <div className={styles.container}>
 
         <PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
@@ -81,7 +80,7 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
                 </div>
                 <div className={styles.profileInfoRight}>
                     {props.authProfile?.handle === props.profile.handle && (
-                        <ProfileCompleteness profile={props.authProfile} />
+                        <ProfileCompleteness profile={props.profile} authProfile={props.authProfile} />
                     )}
                     <div className={styles.sectionWrap}>
                         <div className={styles.skillsWrap}>

src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx

@@ -1,22 +1,26 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 
 import { useProfileCompleteness, UserProfile } from '~/libs/core'
 
 import styles from './ProfileCompleteness.module.scss'
 
 interface ProfileCompletenessProps {
     profile: UserProfile
+    authProfile: UserProfile
 }
 
 const ProfileCompleteness: FC<ProfileCompletenessProps> = props => {
-    const completed = useProfileCompleteness(props.profile.handle)
-    const isLoading = completed === undefined
+    const completeness = useProfileCompleteness(props.profile.handle)
+    const completed = completeness.percent
+    const isLoading = completeness.isLoading
     const isCompleted = completed === 100
 
-    const isCustomer = props.profile.roles.some(r => r.indexOf(' Customer') > -1)
+    const isCustomer = props.authProfile.roles.some(r => r.indexOf(' Customer') > -1)
 
     const hideCompletenessMeter = isLoading || isCompleted || isCustomer
 
+    useEffect(() => { completeness?.mutate() }, [props.profile])
+
     return hideCompletenessMeter ? <></> : (
         <div className={styles.wrap}>
             <strong>Profile: </strong>

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

@@ -1,12 +1,20 @@
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { KeyedMutator, SWRResponse } from 'swr'
 
 import { getProfileUrl } from '../profile-functions'
 
-export function useProfileCompleteness(memberHandle?: string): number | undefined {
-    const { data }: SWRResponse = useSWR(`${getProfileUrl(memberHandle ?? '')}/profileCompleteness`, {
+export function useProfileCompleteness(memberHandle?: string): {
+    isLoading: boolean,
+    mutate: KeyedMutator<any>,
+    percent: number | undefined,
+} {
+    const { data, mutate }: SWRResponse = useSWR(`${getProfileUrl(memberHandle ?? '')}/profileCompleteness`, {
         isPaused: () => !memberHandle,
     })
 
     const percentComplete = data?.data?.percentComplete
-    return percentComplete === undefined ? percentComplete : (percentComplete ?? 0) * 100
+    return {
+        isLoading: percentComplete === undefined,
+        mutate,
+        percent: (percentComplete ?? 0) * 100,
+    }
 }