fix(UI): add plurality to heatmap tooltip (freeCodeCamp#58282)

Co-authored-by: Naomi <[email protected]>

Author: RaymondLiu777

client/i18n/locales/english/translations.json

@@ -366,8 +366,8 @@
     "joined": "Joined {{date}}",
     "from": "From {{location}}",
     "total-points": "Total Points:",
-    "points": "{{count}} point on {{date}}",
-    "points_plural": "{{count}} points on {{date}}",
+    "points-singular": "{{count}} point on {{date}}",
+    "points-plural": "{{count}} points on {{date}}",
     "page-number": "{{pageNumber}} of {{totalPages}}",
     "edit-my-profile": "Edit My Profile",
     "add-bluesky": "Share this certification on BlueSky",

client/src/components/profile/components/heat-map.tsx

@@ -125,14 +125,23 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
                       day: 'numeric'
                     })
                   : '';
+              if (!value || value.count < 0) {
+                return { 'data-tip': '' };
+              }
+              // Use singular translation if count == 1 else plural
+              if (value.count === 1) {
+                return {
+                  'data-tip': t('profile.points-singular', {
+                    count: value.count,
+                    date: dateFormatted
+                  })
+                };
+              }
               return {
-                'data-tip':
-                  value && value.count > -1
-                    ? t('profile.points', {
-                        count: value.count,
-                        date: dateFormatted
-                      })
-                    : ''
+                'data-tip': t('profile.points-plural', {
+                  count: value.count,
+                  date: dateFormatted
+                })
               };
             }}
             values={dataToDisplay}