Merge pull request #671 from topcoder-platform/issue-661

onboarding: "+" button is disable for new user

Author: jmgasper

src/apps/onboarding/src/config/index.ts

@@ -5,13 +5,15 @@ export const ACTIONS: {
         UPDATE_MEMBER_SKILLS: string;
         SET_WORKS: string;
         SET_EDUCATIONS: string;
+        SET_LOADING_MEMBER_TRAITS: string;
     };
 } = {
     MEMBER: {
         GET_MEMBER: 'GET_MEMBER',
         UPDATE_MEMBER_SKILLS: 'UPDATE_MEMBER_SKILLS',
         SET_WORKS: 'SET_WORKS',
         SET_EDUCATIONS: 'SET_EDUCATIONS',
+        SET_LOADING_MEMBER_TRAITS: 'SET_LOADING_MEMBER_TRAITS',
     },
 }
 

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

@@ -21,6 +21,7 @@ export const PageEducationsContent: FC<{
     reduxEducations: EducationInfo[] | null
     updateMemberEducations: (educations: EducationInfo[]) => void
     createMemberEducations: (educations: EducationInfo[]) => void
+    loadingMemberTraits: boolean
 }> = props => {
     const navigate: any = useNavigate()
     const [editingEducation, setEditingEducation] = useState<EducationInfo | null>(null)
@@ -77,7 +78,7 @@ export const PageEducationsContent: FC<{
                     secondary
                     iconToLeft
                     onClick={() => setShowAddEducationModal(true)}
-                    disabled={!educations}
+                    disabled={props.loadingMemberTraits}
                 >
                     + add education
                 </Button>
@@ -108,7 +109,7 @@ export const PageEducationsContent: FC<{
                     size='lg'
                     primary
                     iconToLeft
-                    disabled={loading || !educations}
+                    disabled={loading || props.loadingMemberTraits}
                     onClick={async () => {
                         setLoading(true)
                         if (!_.isEqual(props.reduxEducations, educations)) {
@@ -151,9 +152,11 @@ export const PageEducationsContent: FC<{
 const mapStateToProps: any = (state: any) => {
     const {
         educations,
+        loadingMemberTraits,
     }: any = state.member
 
     return {
+        loadingMemberTraits,
         reduxEducations: educations,
     }
 }

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

@@ -22,6 +22,7 @@ export const PageWorksContent: FC<{
     reduxWorks: WorkInfo[] | null
     updateMemberWorks: (works: WorkInfo[]) => void
     createMemberWorks: (works: WorkInfo[]) => void
+    loadingMemberTraits: boolean
 }> = props => {
     const navigate: any = useNavigate()
     const [editingWork, setEditingWork] = useState<WorkInfo | null>(null)
@@ -87,7 +88,7 @@ export const PageWorksContent: FC<{
                         secondary
                         iconToLeft
                         onClick={() => setShowAddWorkModal(true)}
-                        disabled={!works}
+                        disabled={props.loadingMemberTraits}
                     >
                         + add work experience
                     </Button>
@@ -120,7 +121,7 @@ export const PageWorksContent: FC<{
                     size='lg'
                     primary
                     iconToLeft
-                    disabled={loading || !works}
+                    disabled={loading || props.loadingMemberTraits}
                     onClick={async () => {
                         setLoading(true)
                         if (!_.isEqual(props.reduxWorks, works)) {
@@ -165,10 +166,12 @@ export const PageWorksContent: FC<{
 
 const mapStateToProps: any = (state: any) => {
     const {
+        loadingMemberTraits,
         works,
     }: any = state.member
 
     return {
+        loadingMemberTraits,
         reduxWorks: works,
     }
 }

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

@@ -31,6 +31,11 @@ export const updateEducations: any = (educations: EducationInfo[]) => ({
     payload: educations,
 })
 
+export const updateLoadingMemberTraits: any = (loading: boolean) => ({
+    type: ACTIONS.MEMBER.SET_LOADING_MEMBER_TRAITS,
+    payload: loading,
+})
+
 export const fetchMemberInfo: any = () => async (dispatch: any) => {
     try {
         const tokenInfo: TokenModel = await getAsyncToken()
@@ -44,11 +49,14 @@ const dateTimeToDate: any = (s: string) => (s ? new Date(s) : undefined)
 export const fetchMemberTraits: any = () => async (dispatch: any) => {
     const tokenInfo: TokenModel = await getAsyncToken()
     let memberTraits: any = []
+    dispatch(updateLoadingMemberTraits(true))
     try {
         memberTraits = await getMemberTraits(tokenInfo.handle || '')
     } catch (error) {
     }
 
+    dispatch(updateLoadingMemberTraits(false))
+
     const workExp: any = memberTraits.find((t: any) => t.traitId === 'work')
     const workExpValue: any = workExp?.traits?.data
     if (workExpValue) {

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

@@ -25,6 +25,11 @@ const memberReducer: any = (state = initialState, action: { type: any; payload:
                 ...state,
                 works: action.payload,
             }
+        case ACTIONS.MEMBER.SET_LOADING_MEMBER_TRAITS:
+            return {
+                ...state,
+                loadingMemberTraits: action.payload,
+            }
         case ACTIONS.MEMBER.SET_EDUCATIONS:
             return {
                 ...state,