Merge pull request #703 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/member-profile/about-me/AboutMe.tsx

@@ -85,7 +85,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                         onSave={handleEditModalSaved}
                         profile={props.profile}
                         memberPersonalizationTraitsData={
-                            (memberPersonalizationTraits?.[0]?.traits?.data || []) as UserTraits[]
+                            memberPersonalizationTraits?.[0]?.traits?.data
                         }
                     />
                 )

src/apps/profiles/src/member-profile/about-me/ModifyAboutMeModal/ModifyAboutMeModal.module.scss

@@ -9,3 +9,7 @@
 .formError {
     color: $red-100;
 }
+
+.editForm {
+    margin-top: $sp-4;
+}

src/apps/profiles/src/member-profile/about-me/ModifyAboutMeModal/ModifyAboutMeModal.tsx

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify'
 
 import { BaseModal, Button, InputText, InputTextarea } from '~/libs/ui'
 import {
+    createMemberTraitsAsync,
     updateMemberProfileAsync,
     updateMemberTraitsAsync,
     UserProfile,
@@ -18,7 +19,12 @@ interface ModifyAboutMeModalProps {
     onClose: () => void
     onSave: () => void
     profile: UserProfile
-    memberPersonalizationTraitsData: Array<UserTrait>
+    memberPersonalizationTraitsData: UserTrait[] | undefined
+}
+
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
 }
 
 const ModifyAboutMeModal: FC<ModifyAboutMeModalProps> = (props: ModifyAboutMeModalProps) => {
@@ -38,14 +44,14 @@ const ModifyAboutMeModal: FC<ModifyAboutMeModalProps> = (props: ModifyAboutMeMod
     const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const [formError, setFormError]: [
+    const [formSaveError, setFormSaveError]: [
         string | undefined,
         Dispatch<SetStateAction<string | undefined>>
     ] = useState<string | undefined>()
 
     useEffect(() => {
         const profileSelfTitleData: any
-            = props.memberPersonalizationTraitsData.find(
+            = props.memberPersonalizationTraitsData?.find(
                 (trait: any) => trait.profileSelfTitle,
             )
         setMemberTitle(profileSelfTitleData?.profileSelfTitle)
@@ -66,14 +72,14 @@ const ModifyAboutMeModal: FC<ModifyAboutMeModalProps> = (props: ModifyAboutMeMod
         const updatedTitle: string = trim(memberTitle)
 
         setIsSaving(true)
-        setFormError(undefined)
+        setFormSaveError(undefined)
 
         Promise.all([
             updateMemberProfileAsync(
                 props.profile.handle,
                 { description: updatedDescription },
             ),
-            updateMemberTraitsAsync(props.profile.handle, [{
+            methodsMap[!!props.memberPersonalizationTraitsData ? 'update' : 'create'](props.profile.handle, [{
                 categoryName: UserTraitCategoryNames.personalization,
                 traitId: UserTraitIds.personalization,
                 traits: {
@@ -88,13 +94,13 @@ const ModifyAboutMeModal: FC<ModifyAboutMeModalProps> = (props: ModifyAboutMeMod
             }]),
         ])
             .then(() => {
-                toast.success('Your profile has been updated.')
+                toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()
             })
             .catch((error: any) => {
-                toast.error('Something went wrong. Please try again.')
+                toast.error('Something went wrong. Please try again.', { position: toast.POSITION.BOTTOM_RIGHT })
                 setIsSaving(false)
-                setFormError(error.message || error)
+                setFormSaveError(error.message || error)
             })
     }
 
@@ -115,38 +121,35 @@ const ModifyAboutMeModal: FC<ModifyAboutMeModalProps> = (props: ModifyAboutMeMod
                         label='Save'
                         onClick={handleAboutMeSave}
                         primary
-                        disabled={!trim(memberTitle) || !trim(memberDescription) || isSaving || !isFormChanged}
+                        disabled={isSaving || !isFormChanged}
                     />
                 </div>
             )}
         >
+            <p>Enter a short bio to help potential customers know you.</p>
             <form className={styles.editForm}>
                 <InputText
-                    label='Title *'
+                    label='Title'
                     name='memberTitle'
                     onChange={handleMemberTitleChange}
                     value={memberTitle}
                     tabIndex={0}
                     type='text'
-                    error={!trim(memberTitle) ? 'Title is required' : undefined}
-                    dirty={!trim(memberTitle)}
                 />
                 <InputTextarea
-                    label='Description *'
+                    label='Description'
                     name='memberDescription'
                     onChange={handleMemberDescriptionChange}
                     onBlur={handleMemberDescriptionChange}
                     value={memberDescription}
                     tabIndex={0}
-                    error={!trim(memberDescription) ? 'Description is required' : undefined}
-                    dirty={!trim(memberDescription)}
                 />
             </form>
 
             {
-                formError && (
+                formSaveError && (
                     <div className={styles.formError}>
-                        {formError}
+                        {formSaveError}
                     </div>
                 )
             }

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

@@ -8,6 +8,15 @@
         display: flex;
         align-items: center;
         margin-bottom: $sp-4;
+
+        h3 {
+            font-family: $font-roboto;
+            font-weight: 700;
+            text-transform: none;
+            font-size: 20px;
+            line-height: 26px;
+            color: $black-60;
+        }
     }
 
     .educationContentWrap {

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

@@ -24,13 +24,8 @@ const EducationCard: FC<EducationCardProps> = (props: EducationCardProps) => (
                 props.education.timePeriodFrom || props.education.timePeriodTo ? (
                     <div className={styles.educationCardHeaderRight}>
                         <p>
-                            {props.education.timePeriodFrom ? moment(props.education.timePeriodFrom)
-                                .format('MM/YYYY') : ''}
-                            {' '}
-                            -
-                            {' '}
                             {props.education.timePeriodTo ? moment(props.education.timePeriodTo)
-                                .format('MM/YYYY') : (props.education.graduated ? 'Graduated' : '')}
+                                .format('YYYY') : ''}
                         </p>
                     </div>
                 ) : undefined

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

@@ -72,11 +72,11 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             },
         }])
             .then(() => {
-                toast.success('Education updated successfully.')
+                toast.success('Education updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()
             })
             .catch(() => {
-                toast.error('Failed to update member\'s Education.')
+                toast.error('Failed to update your Education.', { position: toast.POSITION.BOTTOM_RIGHT })
                 setIsSaving(false)
             })
     }
@@ -85,10 +85,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
         let value: string | boolean | Date | undefined
 
         switch (key) {
-            case 'graduated':
-                value = event.target.checked
-                break
-            case 'startDate':
             case 'endDate':
                 value = event as unknown as Date
                 break
@@ -131,18 +127,10 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             return
         }
 
-        if (!formValues.startDate) {
-            setFormErrors({
-                startDate: 'Start date is required',
-            })
-            return
-        }
-
         const updatedEducation: UserTrait = {
             graduated: formValues.graduated,
             major: formValues.major,
             schoolCollegeName: formValues.schoolCollegeName,
-            timePeriodFrom: formValues.startDate ? (formValues.startDate as Date).toISOString() : undefined,
             timePeriodTo: formValues.endDate ? (formValues.endDate as Date).toISOString() : undefined,
         }
 
@@ -172,7 +160,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             graduated: education.graduated,
             major: education.major,
             schoolCollegeName: education.schoolCollegeName,
-            startDate: education.timePeriodFrom ? new Date(education.timePeriodFrom) : undefined,
         })
     }
 
@@ -264,34 +251,16 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
                         onChange={bind(handleFormValueChange, this, 'major')}
                         value={formValues.major as string}
                     />
-                    <div className={styles.row}>
-                        <InputDatePicker
-                            label='Start Date *'
-                            date={formValues.startDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'startDate')}
-                            disabled={false}
-                            error={formErrors.startDate}
-                            dirty
-                        />
-                        <InputDatePicker
-                            label='End Date'
-                            date={formValues.endDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'endDate')}
-                            disabled={false}
-                            error={formErrors.endDate}
-                            dirty
-                            maxDate={new Date()}
-                        />
-                    </div>
-                    <InputText
-                        name='graduated'
-                        label='Graduated?'
-                        error={formErrors.graduated}
+                    <InputDatePicker
+                        label='End date (or expected)'
+                        date={formValues.endDate as Date}
+                        onChange={bind(handleFormValueChange, this, 'endDate')}
+                        disabled={false}
+                        error={formErrors.endDate}
                         dirty
-                        tabIndex={-1}
-                        type='checkbox'
-                        onChange={bind(handleFormValueChange, this, 'graduated')}
-                        checked={formValues.graduated as boolean}
+                        maxDate={new Date()}
+                        showYearPicker
+                        dateFormat='yyyy'
                     />
                     <div className={styles.formCTAs}>
                         {editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}

src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx

@@ -59,7 +59,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
     return canEdit || memberLanguages ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
-                <p className='body-main-bold'>My Languages:</p>
+                <p className='body-main-bold'>Languages:</p>
                 {
                     canEdit && (
                         <EditMemberPropertyBtn

src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.tsx

@@ -107,11 +107,11 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
             },
         }])
             .then(() => {
-                toast.success('Languages updated successfully.')
+                toast.success('Languages updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()
             })
             .catch(() => {
-                toast.error('Failed to update user Languages.')
+                toast.error('Failed to update your Languages.', { position: toast.POSITION.BOTTOM_RIGHT })
                 setIsSaving(false)
             })
     }
@@ -133,7 +133,7 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
         }
 
         if (currentMemberLanguages?.find((item: UserTrait) => item.language === selectedLanguage)) {
-            toast.info('Language already exists')
+            toast.info('Language already exists', { position: toast.POSITION.BOTTOM_RIGHT })
             resetForm()
             return
         }

src/apps/profiles/src/member-profile/links/MemberLinks.tsx

@@ -85,7 +85,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
     return canEdit || memberLinks?.links ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
-                <p className='body-main-bold'>My Links:</p>
+                <p className='body-main-bold'>Links:</p>
                 {
                     canEdit && (
                         <EditMemberPropertyBtn

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.tsx

@@ -4,7 +4,14 @@ import { toast } from 'react-toastify'
 import classNames from 'classnames'
 
 import { BaseModal, Button, IconOutline, InputSelect, InputText } from '~/libs/ui'
-import { updateMemberTraitsAsync, UserProfile, UserTrait, UserTraitCategoryNames, UserTraitIds } from '~/libs/core'
+import {
+    createMemberTraitsAsync,
+    updateMemberTraitsAsync,
+    UserProfile,
+    UserTrait,
+    UserTraitCategoryNames,
+    UserTraitIds,
+} from '~/libs/core'
 
 import { renderLinkIcon } from '../MemberLinks'
 
@@ -19,6 +26,11 @@ interface ModifyMemberLinksModalProps {
     memberPersonalizationTraitsFullData: UserTrait[] | undefined
 }
 
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
+}
+
 const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMemberLinksModalProps) => {
     const formElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -67,7 +79,7 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
         const updatedPersonalizationTraits: UserTrait[]
             = reject(props.memberPersonalizationTraitsFullData, (trait: UserTrait) => trait.links)
 
-        updateMemberTraitsAsync(props.profile.handle, [{
+        methodsMap[!!props.memberPersonalizationTraitsFullData ? 'update' : 'create'](props.profile.handle, [{
             categoryName: UserTraitCategoryNames.personalization,
             traitId: UserTraitIds.personalization,
             traits: {
@@ -80,11 +92,11 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
             },
         }])
             .then(() => {
-                toast.success('Links updated successfully.')
+                toast.success('Links updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()
             })
             .catch(() => {
-                toast.error('Failed to update user Links.')
+                toast.error('Failed to update user Links.', { position: toast.POSITION.BOTTOM_RIGHT })
                 setIsSaving(false)
             })
     }
@@ -114,7 +126,7 @@ const ModifyMemberLinksModal: FC<ModifyMemberLinksModalProps> = (props: ModifyMe
         }
 
         if (currentMemberLinks?.find((item: UserTrait) => item.url.toLowerCase() === selectedLinkURL?.toLowerCase())) {
-            toast.info('Link already exists')
+            toast.info('Link already exists', { position: toast.POSITION.BOTTOM_RIGHT })
             resetForm()
             return
         }