Merge pull request #742 from topcoder-platform/issue-738

jmgasper · web-flow · commit 471e36fbf0aa · 2023-07-11T10:52:32.000-05:00
Onboarding - Use different field for bio + Next on last screen
diff --git a/src/apps/onboarding/src/config/index.ts b/src/apps/onboarding/src/config/index.ts
@@ -7,6 +7,7 @@ export const ACTIONS: {
         SET_PERSONALIZATION: string;
         SET_ADDRESS: string;
         SET_CONNECT_INFO: string;
+        SET_DESCRIPTION: string;
         SET_LOADING_MEMBER_TRAITS: string;
         SET_LOADING_MEMBER_INFO: string;
     };
@@ -15,6 +16,7 @@ export const ACTIONS: {
         GET_MEMBER: 'GET_MEMBER',
         SET_ADDRESS: 'SET_ADDRESS',
         SET_CONNECT_INFO: 'SET_CONNECT_INFO',
+        SET_DESCRIPTION: 'SET_DESCRIPTION',
         SET_EDUCATIONS: 'SET_EDUCATIONS',
         SET_LOADING_MEMBER_INFO: 'SET_LOADING_MEMBER_INFO',
         SET_LOADING_MEMBER_TRAITS: 'SET_LOADING_MEMBER_TRAITS',
diff --git a/src/apps/onboarding/src/hooks/useAutoSaveMemberDescription.ts b/src/apps/onboarding/src/hooks/useAutoSaveMemberDescription.ts
@@ -0,0 +1,71 @@
+import { Dispatch, MutableRefObject, SetStateAction, useEffect, useState } from 'react'
+import _ from 'lodash'
+
+import MemberInfo from '../models/MemberInfo'
+
+export interface useAutoSaveMemberDescriptionType {
+    description: string | undefined
+    loading: boolean
+    setDescription: Dispatch<SetStateAction<string | undefined>>
+}
+
+type useAutoSaveMemberDescriptionFunctionType = (
+    memberInfo: MemberInfo | undefined,
+    updateMemberDescription: (description: string) => void,
+    shouldSavingData: MutableRefObject<boolean>,
+) => useAutoSaveMemberDescriptionType
+
+export const useAutoSaveMemberDescription: useAutoSaveMemberDescriptionFunctionType = (
+    memberInfo: MemberInfo | undefined,
+    updateMemberDescription: (description: string) => void,
+    shouldSavingData: MutableRefObject<boolean>,
+) => {
+    const [loading, setLoading] = useState<boolean>(false)
+    const [description, setDescription] = useState<string | undefined>(undefined)
+
+    const saveData: any = async () => {
+        if (description === undefined) {
+            return
+        }
+
+        setLoading(true)
+        await updateMemberDescription(description)
+
+        setLoading(false)
+    }
+
+    useEffect(() => {
+        if (description !== undefined && !_.isEqual(memberInfo?.description, description)) {
+            if (loading) {
+                shouldSavingData.current = true
+                return
+            }
+
+            saveData()
+                .then(_.noop)
+        }
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [description])
+
+    useEffect(() => {
+        if (description === undefined && memberInfo && memberInfo.description !== undefined) {
+            setDescription(memberInfo.description)
+        }
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [memberInfo])
+
+    useEffect(() => {
+        if (!loading && shouldSavingData.current) {
+            shouldSavingData.current = false
+            saveData()
+                .then(_.noop)
+        }
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [loading])
+
+    return {
+        description,
+        loading,
+        setDescription,
+    }
+}
diff --git a/src/apps/onboarding/src/models/MemberInfo.ts b/src/apps/onboarding/src/models/MemberInfo.ts
@@ -19,4 +19,5 @@ export default interface MemberInfo {
     country: string
     photoURL: string
     createdAt: number
+    description: string
 }
diff --git a/src/apps/onboarding/src/pages/personalization/index.tsx b/src/apps/onboarding/src/pages/personalization/index.tsx
@@ -6,11 +6,19 @@ import classNames from 'classnames'
 import { Button, IconOutline, PageDivider } from '~/libs/ui'
 import { EnvironmentConfig } from '~/config'
 
-import { useAutoSavePersonalization, useAutoSavePersonalizationType } from '../../hooks/useAutoSavePersonalization'
 import { ProgressBar } from '../../components/progress-bar'
+import {
+    useAutoSaveMemberDescription,
+    useAutoSaveMemberDescriptionType,
+} from '../../hooks/useAutoSaveMemberDescription'
+import {
+    useAutoSavePersonalization,
+    useAutoSavePersonalizationType,
+} from '../../hooks/useAutoSavePersonalization'
 import {
     createMemberPersonalizations,
     setMemberPhotoUrl,
+    updateMemberDescription,
     updateMemberPersonalizations,
     updateMemberPhotoUrl,
 } from '../../redux/actions/member'
@@ -31,11 +39,14 @@ const PagePersonalizationContent: FC<{
     createMemberPersonalizations: (infos: PersonalizationInfo[]) => void
     setMemberPhotoUrl: (photoUrl: string) => void
     updateMemberPhotoUrl: (photoUrl: string) => void
+    updateMemberDescription: (photoUrl: string) => void
     loadingMemberTraits: boolean
+    loadingMemberInfo: boolean
 }> = props => {
     const navigate: any = useNavigate()
 
     const shouldSavingData: MutableRefObject<boolean> = useRef<boolean>(false)
+    const shouldSavingMemberData: MutableRefObject<boolean> = useRef<boolean>(false)
     const shouldNavigateTo: MutableRefObject<string> = useRef<string>('')
 
     const {
@@ -49,16 +60,42 @@ const PagePersonalizationContent: FC<{
         shouldSavingData,
     )
 
+    const {
+        loading: loadingMemberInfo,
+        description,
+        setDescription,
+    }: useAutoSaveMemberDescriptionType = useAutoSaveMemberDescription(
+        props.memberInfo,
+        props.updateMemberDescription,
+        shouldSavingMemberData,
+    )
+
     useEffect(() => {
-        if (!loading && !shouldSavingData.current && !!shouldNavigateTo.current) {
+        if (
+            !loading
+            && !loadingMemberInfo
+            && !shouldSavingData.current
+            && !shouldSavingMemberData.current
+            && !!shouldNavigateTo.current
+        ) {
             if (shouldNavigateTo.current.startsWith('../')) {
                 navigate(shouldNavigateTo.current)
             } else {
                 window.location.href = shouldNavigateTo.current
             }
         }
         /* eslint-disable react-hooks/exhaustive-deps */
-    }, [loading])
+    }, [loading, loadingMemberInfo])
+
+    function nextPage(pageUrl: string): void {
+        if (loading || loadingMemberInfo) {
+            shouldNavigateTo.current = pageUrl
+        } else if (pageUrl.startsWith('../')) {
+            navigate(pageUrl)
+        } else {
+            window.location.href = pageUrl
+        }
+    }
 
     return (
         <div className={classNames('d-flex flex-column', styles.container)}>
@@ -93,16 +130,13 @@ const PagePersonalizationContent: FC<{
                     <InputTextareaAutoSave
                         name='shortBio'
                         label='Bio'
-                        value={personalizationInfo?.shortBio || ''}
+                        value={description || ''}
                         onChange={function onChange(value: string | undefined) {
-                            setPersonalizationInfo({
-                                ...(personalizationInfo || blankPersonalizationInfo),
-                                shortBio: value || '',
-                            })
+                            setDescription(value || '')
                         }}
                         placeholder='Share something that makes you, you.'
                         tabIndex={0}
-                        disabled={props.loadingMemberTraits}
+                        disabled={props.loadingMemberInfo}
                     />
                 </div>
             </div>
@@ -119,26 +153,21 @@ const PagePersonalizationContent: FC<{
                     secondary
                     iconToLeft
                     icon={IconOutline.ChevronLeftIcon}
+                    disabled={!!shouldNavigateTo.current}
                     onClick={function previousPage() {
-                        if (loading) {
-                            shouldNavigateTo.current = '../educations'
-                        } else {
-                            navigate('../educations')
-                        }
+                        nextPage('../educations')
                     }}
                 />
                 <Button
                     size='lg'
                     primary
                     iconToLeft
-                    onClick={function nextPage() {
-                        if (loading) {
-                            shouldNavigateTo.current
-                                = `${EnvironmentConfig.USER_PROFILE_URL}/${props.memberInfo?.handle}`
-                        } else {
-                            window.location.href
-                                = `${EnvironmentConfig.USER_PROFILE_URL}/${props.memberInfo?.handle}`
-                        }
+                    disabled={!!shouldNavigateTo.current}
+                    onClick={function onClick() {
+                        nextPage(
+                            `${EnvironmentConfig.USER_PROFILE_URL}/${props.memberInfo?.handle}`
+                            + '?edit-mode=onboardingCompleted',
+                        )
                     }}
                 >
                     next
@@ -151,11 +180,13 @@ const PagePersonalizationContent: FC<{
 const mapStateToProps: any = (state: any) => {
     const {
         loadingMemberTraits,
+        loadingMemberInfo,
         personalization,
         memberInfo,
     }: any = state.member
 
     return {
+        loadingMemberInfo,
         loadingMemberTraits,
         memberInfo,
         reduxPersonalization: personalization,
@@ -165,6 +196,7 @@ const mapStateToProps: any = (state: any) => {
 const mapDispatchToProps: any = {
     createMemberPersonalizations,
     setMemberPhotoUrl,
+    updateMemberDescription,
     updateMemberPersonalizations,
     updateMemberPhotoUrl,
 }
diff --git a/src/apps/onboarding/src/redux/actions/member.ts b/src/apps/onboarding/src/redux/actions/member.ts
@@ -47,6 +47,11 @@ export const updateAddress: any = (address: MemberAddress) => ({
     type: ACTIONS.MEMBER.SET_ADDRESS,
 })
 
+export const setMemberDescription: any = (description: string) => ({
+    payload: description,
+    type: ACTIONS.MEMBER.SET_DESCRIPTION,
+})
+
 export const updateLoadingMemberTraits: any = (loading: boolean) => ({
     payload: loading,
     type: ACTIONS.MEMBER.SET_LOADING_MEMBER_TRAITS,
@@ -434,6 +439,17 @@ export const updateMemberHomeAddresss: any = (addresses: MemberAddress[]) => asy
     }
 }
 
+export const updateMemberDescription: any = (description: string) => async (dispatch: any) => {
+    try {
+        const tokenInfo: TokenModel = await getAsyncToken()
+        await putMemberInfo(tokenInfo.handle || '', {
+            description,
+        })
+        dispatch(setMemberDescription(description))
+    } catch (error) {
+    }
+}
+
 export const updateMemberPhotoUrl: any = (photoURL: string) => async (dispatch: any) => {
     try {
         const tokenInfo: TokenModel = await getAsyncToken()
diff --git a/src/apps/onboarding/src/redux/reducers/member.ts b/src/apps/onboarding/src/redux/reducers/member.ts
@@ -67,6 +67,19 @@ const memberReducer: any = (
                 ...state,
                 educations: action.payload,
             }
+        case ACTIONS.MEMBER.SET_DESCRIPTION: {
+            if (!state.memberInfo) {
+                return state
+            }
+
+            return {
+                ...state,
+                memberInfo: {
+                    ...state.memberInfo,
+                    description: action.payload,
+                },
+            }
+        }
 
         case ACTIONS.MEMBER.UPDATE_MEMBER_PHOTO_URL: {
             if (!state.memberInfo) {

Original file line number	Diff line number	Diff line change
`@@ -19,4 +19,5 @@ export default interface MemberInfo {`
`19`	`19`	`country: string`
`20`	`20`	`photoURL: string`
`21`	`21`	`createdAt: number`
	`22`	`+ description: string`
`22`	`23`	`}`