Merge pull request #951 from topcoder-platform/MP-390_members-stats-fix

MP-390 - Fix wording & winning icon for member stats -> dev

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,13 +45,18 @@ 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>
                                         </>

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/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'}`
+}