Merge branch 'dev' of github.com:topcoder-platform/platform-ui into TSJR-314_skill-manager_landing-page

Author: vas3a

src/apps/profiles/src/components/tc-achievements/MemberStatsBlock/MemberStatsBlock.tsx

@@ -6,7 +6,7 @@ import { getRatingColor, MemberStats, UserProfile } from '~/libs/core'
 import { IconOutline } from '~/libs/ui'
 
 import { useFetchActiveTracks } from '../../../hooks'
-import { WinnerIcon } from '../../../lib'
+import { formatPlural, WinnerIcon } from '../../../lib'
 import { MemberProfileContextValue, useMemberProfileContext } from '../../../member-profile/MemberProfile.context'
 
 import styles from './MemberStatsBlock.module.scss'
@@ -45,30 +45,25 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
                                 <div className={styles.trackDetails}>
                                     {!track.isDSTrack && ((track.submissions || track.wins) > 0) && (
                                         <>
-                                            <WinnerIcon className='icon-xxxl' />
+                                            {track.wins > 0 && (
+                                                <WinnerIcon className='icon-xxxl' />
+                                            )}
                                             <span className={styles.trackStats}>
                                                 <span className={styles.count}>
                                                     {track.wins || track.submissions}
                                                 </span>
                                                 <span className={styles.label}>
-                                                    {track.wins > 0 ? 'Wins' : 'Submissions'}
+                                                    {formatPlural(
+                                                        track.wins || track.submissions || 0,
+                                                        track.wins > 0 ? 'Win' : 'Submission',
+                                                    )}
                                                 </span>
                                             </span>
                                         </>
                                     )}
                                     {/* competitive programming only */}
                                     {track.isDSTrack && (
-                                        (track.percentile as number) >= 50 ? (
-                                            <span className={styles.trackStats}>
-                                                <span className={styles.count}>
-                                                    {track.percentile}
-                                                    %
-                                                </span>
-                                                <span className={styles.label}>
-                                                    Percentile
-                                                </span>
-                                            </span>
-                                        ) : (
+                                        (track.isCPTrack || (track.percentile as number) < 50) ? (
                                             <>
                                                 <span
                                                     className={styles.icon}
@@ -83,6 +78,16 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
                                                     </span>
                                                 </span>
                                             </>
+                                        ) : (
+                                            <span className={styles.trackStats}>
+                                                <span className={styles.count}>
+                                                    {track.percentile}
+                                                    %
+                                                </span>
+                                                <span className={styles.label}>
+                                                    Percentile
+                                                </span>
+                                            </span>
                                         )
                                     )}
                                     <IconOutline.ChevronRightIcon

src/apps/profiles/src/components/tc-achievements/StatsSummaryBlock/StatsSummaryBlock.tsx

@@ -4,7 +4,7 @@ import { find, get } from 'lodash'
 
 import { getRatingColor } from '~/libs/core'
 
-import { numberToFixed } from '../../../lib'
+import { formatPlural, numberToFixed } from '../../../lib'
 import { TracksSummaryStats } from '../../../config'
 
 import styles from './StatsSummaryBlock.module.scss'
@@ -49,7 +49,10 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                {props.trackTitle === 'Single Round Match' ? 'Competitions' : 'Challenges'}
+                                {formatPlural(
+                                    props.challenges || 0,
+                                    props.trackTitle === 'Single Round Match' ? 'Competition' : 'Challenge',
+                                )}
                             </span>
                         </span>
                     </div>
@@ -61,7 +64,7 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                Wins
+                                {formatPlural(props.wins || 0, 'Win')}
                             </span>
                         </span>
                     </div>
@@ -73,7 +76,7 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                Submissions
+                                {formatPlural(props.submissions || 0, 'Submission')}
                             </span>
                         </span>
                     </div>

src/apps/profiles/src/components/tc-achievements/SubTrackSummaryCard/SubTrackSummaryCard.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { IconSolid } from '~/libs/ui'
 
-import { subTrackLabelToHumanName, WinnerIcon } from '../../../lib'
+import { formatPlural, subTrackLabelToHumanName, WinnerIcon } from '../../../lib'
 
 import styles from './SubTrackSummaryCard.module.scss'
 
@@ -29,7 +29,9 @@ const SubTrackSummaryCard: FC<SubTrackSummaryCardProps> = props => (
                             {props.wins}
                         </span>
                         <span className={styles.statsItemLabel}>
-                            <span className='label'>wins</span>
+                            <span className='label'>
+                                {formatPlural(props.wins || 0, 'Win')}
+                            </span>
                         </span>
                     </div>
                 )}
@@ -38,7 +40,9 @@ const SubTrackSummaryCard: FC<SubTrackSummaryCardProps> = props => (
                         {props.submissions}
                     </span>
                     <span className={styles.statsItemLabel}>
-                        <span className='label'>submissions</span>
+                        <span className='label'>
+                            {formatPlural(props.submissions || 0, 'Submission')}
+                        </span>
                     </span>
                 </div>
             </div>

src/apps/profiles/src/hooks/useFetchActiveTracks.tsx

@@ -21,6 +21,7 @@ export interface MemberStatsTrack {
     wins: number,
     order?: number
     isDSTrack?: boolean
+    isCPTrack?: boolean
 }
 
 /**
@@ -206,6 +207,7 @@ export const useFetchActiveTracks = (userHandle: string): MemberStatsTrack[] =>
         return {
             challenges: dataScienceSubTracks.SRM?.challenges ?? 0,
             isActive: (dataScienceSubTracks.SRM?.challenges ?? 0) > 0,
+            isCPTrack: true,
             isDSTrack: true,
             name: 'Competitive Programming',
             order: -2,

src/apps/profiles/src/lib/helpers.ts

@@ -113,3 +113,15 @@ export function isValidURL(urlToValidate: string): boolean {
 
     return true
 }
+
+/**
+ * Creates the string with the number of items and the word describing the item
+ * possibly in plural form.
+ *
+ * @param {number} count - The number of entities
+ * @param {string} baseWord - The base word that describes the entity
+ * @returns {string}
+ */
+export function formatPlural(count: number, baseWord: string): string {
+    return `${baseWord}${count === 1 ? '' : 's'}`
+}

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

@@ -6,7 +6,7 @@ import classNames from 'classnames'
 
 import { BaseModal, Button, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import {
-    updateOrCreateMemberTraitsAsync,
+    updateDeleteOrCreateMemberTraitAsync,
     UserProfile,
     UserTrait,
     UserTraitCategoryNames,
@@ -72,13 +72,13 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
 
         setIsSaving(true)
 
-        updateOrCreateMemberTraitsAsync(props.profile.handle, [{
+        updateDeleteOrCreateMemberTraitAsync(props.profile.handle, {
             categoryName: UserTraitCategoryNames.education,
             traitId: UserTraitIds.education,
             traits: {
                 data: memberEducation || [],
             },
-        }])
+        }, props.education)
             .then(() => {
                 toast.success('Education updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()

src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames'
 
 import { BaseModal, Button, IconOutline, InputDatePicker, InputSelect, InputText } from '~/libs/ui'
 import {
-    updateOrCreateMemberTraitsAsync,
+    updateDeleteOrCreateMemberTraitAsync,
     UserProfile, UserTrait,
     UserTraitCategoryNames,
     UserTraitIds,
@@ -71,13 +71,13 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
 
         setIsSaving(true)
 
-        updateOrCreateMemberTraitsAsync(props.profile.handle, [{
+        updateDeleteOrCreateMemberTraitAsync(props.profile.handle, {
             categoryName: UserTraitCategoryNames.work,
             traitId: UserTraitIds.work,
             traits: {
                 data: workExpirence || [],
             },
-        }])
+        }, props.workExpirence)
             .then(() => {
                 toast.success('Work Experience updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
                 props.onSave()

src/libs/core/lib/profile/profile-functions/index.ts

@@ -16,6 +16,7 @@ export {
     updateMemberProfileAsync,
     updateMemberPhotoAsync,
     updateOrCreateMemberTraitsAsync,
+    updateDeleteOrCreateMemberTraitAsync,
 } from './profile.functions'
 export * from './profile-store'
 export * from './rating.functions'

src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts

@@ -1,4 +1,4 @@
-import { xhrGetAsync, xhrPatchAsync, xhrPostAsync, xhrPutAsync } from '../../../xhr'
+import { xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync, xhrPutAsync } from '../../../xhr'
 import { CountryLookup } from '../../country-lookup.model'
 import { EditNameRequest } from '../../edit-name-request.model'
 import { ModifyTracksRequest } from '../../modify-tracks.request'
@@ -95,6 +95,14 @@ export async function createMemberTraits(
     return xhrPostAsync<UserTraits[], UserTraits[]>(`${profileUrl(handle)}/traits`, traits)
 }
 
+export async function deleteMemberTrait(
+    handle: string,
+    traitIds: string,
+): Promise<UserTraits[]> {
+    await xhrDeleteAsync<UserTraits[]>(`${profileUrl(handle)}/traits?traitIds=${traitIds}`)
+    return []
+}
+
 export async function modifyTracks(handle: string, request: ModifyTracksRequest): Promise<UserProfile> {
     return xhrPutAsync<ModifyTracksRequest, UserProfile>(profileUrl(handle), request)
 }

src/libs/core/lib/profile/profile-functions/profile.functions.ts

@@ -9,13 +9,14 @@ import { ModifyUserPropertyResponse } from '../modify-user-role.model'
 import { UserEmailPreferences } from '../user-email-preference.model'
 import { UserProfile } from '../user-profile.model'
 import { UserStats } from '../user-stats.model'
-import { UserTraits } from '../user-traits.model'
+import { UserTrait, UserTraits } from '../user-traits.model'
 import { UserVerify } from '../user-verify.model'
 
 import { profileFactoryCreate } from './profile-factory'
 import { getMemberStats, getVerification, profileStoreGet, profileStorePatchName } from './profile-store'
 import {
     createMemberTraits,
+    deleteMemberTrait,
     getCountryLookup,
     modifyTracks,
     updateMemberEmailPreferences,
@@ -135,6 +136,13 @@ export async function createMemberTraitsAsync(
     return createMemberTraits(handle, traits)
 }
 
+export async function deleteMemberTraitAsync(
+    handle: string,
+    traitIds: string,
+): Promise<UserTraits[]> {
+    return deleteMemberTrait(handle, traitIds)
+}
+
 export async function modifyTracksAsync(handle: string, tracks: ModifyTracksRequest): Promise<UserProfile> {
     return modifyTracks(handle, tracks)
 }
@@ -159,3 +167,39 @@ export async function updateOrCreateMemberTraitsAsync(
         return createdTraitsRsp
     }
 }
+
+export async function updateDeleteOrCreateMemberTraitAsync(
+    handle: string,
+    trait: UserTraits,
+    previousTraitsData: Array<UserTrait> | undefined,
+): Promise<UserTraits[]> {
+    if (!trait.traits.data.length) {
+        if (!previousTraitsData) {
+            return [] // no need to delete trait if trait data is null
+        }
+
+        try {
+            await deleteMemberTraitAsync(handle, trait.traitId)
+            return []
+        } catch (error) {
+        }
+    }
+
+    if (!previousTraitsData) {
+        try {
+            // call request to create trait data if trait data is null
+            const createdTraitsRsp = await createMemberTraitsAsync(handle, [trait])
+            return createdTraitsRsp
+        } catch (error) {
+        }
+    }
+
+    try {
+        // call request to update trait data if trait data is not null
+        const updatedTraitsRsp = await updateMemberTraitsAsync(handle, [trait])
+        return updatedTraitsRsp
+    } catch (error) {
+        const createdTraitsRsp = await createMemberTraitsAsync(handle, [trait])
+        return createdTraitsRsp
+    }
+}