Merge pull request #782 from topcoder-platform/issue-776

Onboarding - profile pic issues

Author: jmgasper

src/apps/onboarding/src/components/FieldAvatar/index.tsx

@@ -108,9 +108,10 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
                 >
                     {imgUrl ? (
                         <img className={styles.img} src={imgUrl} alt='avatar' />
-                    ) : (
+                    ) : undefined}
+                    {!imgUrl ? (
                         <img className={styles.imgPlaceholder} src={AvatarPlaceholder} alt='avatar' />
-                    )}
+                    ) : undefined}
                 </div>
                 <div className='d-flex flex-column align-items-start'>
                     <span className='color-black-60'>

src/apps/onboarding/src/components/modal-upload-photo/index.tsx

@@ -53,8 +53,8 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
 
             setIsSaving(true)
             try {
-                await updateMemberPhotoAsync(props.memberInfo.handle, formData)
-                props.setMemberPhotoUrl(URL.createObjectURL(myFiles[0]))
+                const result = await updateMemberPhotoAsync(props.memberInfo.handle, formData)
+                props.setMemberPhotoUrl(result?.photoURL || URL.createObjectURL(myFiles[0]))
                 setMyFiles([])
                 props.onClose?.()
             } catch (error) {

src/apps/onboarding/src/pages/onboarding/index.tsx

@@ -14,33 +14,23 @@ import '../../styles/global/_index.scss'
 
 import styles from './styles.module.scss'
 
-const OnboardingContent: FC<{
+const OnboardingFooterContent: FC<{
     fetchMemberInfo: () => void
     fetchMemberTraits: () => void
     reduxMemberInfo: Member | undefined
 }> = props => {
-    const { getChildRoutes }: RouterContextData = useContext(routerContext)
     useEffect(() => {
         props.fetchMemberInfo()
         props.fetchMemberTraits()
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [])
 
     return (
-        <>
-            <div className={classNames('d-flex flex-column', styles.container)}>
-                <Outlet />
-                <Routes>
-                    {getChildRoutes(onboardRouteId)}
-                </Routes>
-                <div id='calendar-portal' />
-            </div>
-            <span className={styles.textFooter}>
-                I will complete this onboarding later,
-                <a href={`${EnvironmentConfig.USER_PROFILE_URL}/${props.reduxMemberInfo?.handle}`}> skip for now</a>
-                .
-            </span>
-        </>
+        <span className={styles.textFooter}>
+            I will complete this onboarding later,
+            <a href={`${EnvironmentConfig.USER_PROFILE_URL}/${props.reduxMemberInfo?.handle}`}> skip for now</a>
+            .
+        </span>
     )
 }
 
@@ -58,12 +48,30 @@ const mapDispatchToProps: any = {
     fetchMemberInfo,
     fetchMemberTraits,
 }
-const Onboarding: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingContent)
+const OnboardingFooter: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingFooterContent)
+
+const OnboardingContent: FC<{
+}> = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <>
+            <div className={classNames('d-flex flex-column', styles.container)}>
+                <Outlet />
+                <Routes>
+                    {getChildRoutes(onboardRouteId)}
+                </Routes>
+                <div id='calendar-portal' />
+            </div>
+            <OnboardingFooter />
+        </>
+    )
+}
 
 export const OnboardingWrapper: FC<{}> = () => (
     <div className={classNames(styles.blockWrapper, 'd-flex flex-column align-items-center')}>
         <Provider store={store}>
-            <Onboarding />
+            <OnboardingContent />
         </Provider>
     </div>
 )

src/apps/onboarding/src/redux/reducers/member.ts

@@ -1,5 +1,7 @@
 import _ from 'lodash'
 
+import { notifyUniNavi } from '~/apps/profiles/src/lib'
+
 import { ACTIONS } from '../../config'
 import ConnectInfo from '../../models/ConnectInfo'
 import EducationInfo from '../../models/EducationInfo'
@@ -89,6 +91,9 @@ const memberReducer: any = (
 
             const newMemberInfo = _.cloneDeep(state.memberInfo)
             newMemberInfo.photoURL = action.payload
+            if (newMemberInfo) {
+                notifyUniNavi(newMemberInfo as any)
+            }
 
             return {
                 ...state,