Fix ordinal suffix for numbers greater than 10

components/chart/cycle-day-label.js

@@ -7,7 +7,7 @@ import moment from 'moment'
 import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
-import { dateEnding } from '../helpers/home'
+import { getOrdinalSuffix } from '../helpers/home'
 import { Containers, Typography } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
@@ -18,7 +18,7 @@ const CycleDayLabel = ({ height, date }) => {
   const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'D'
   const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting)
   const ending = isFirstDayOfMonth ?
-    '' : dateEnding[this.cycleDayNumber] || dateEnding['default']
+    '' : getOrdinalSuffix(this.cycleDayNumber)
   const cycleDayLabel = cycleDayNumber ? cycleDayNumber : ' '
 
   return (

components/helpers/home.js

@@ -63,9 +63,15 @@ export function getBleedingPredictionRange(prediction) {
   return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
 }
 
-export const dateEnding = {
-  '1': 'st',
-  '2': 'nd',
-  '3': 'rd',
-  'default': 'th'
+export function getOrdinalSuffix(num) {
+  const suffixes = {
+    1: 'st',
+    2: 'nd',
+    3: 'rd',
+    default: 'th'
+  }
+
+  const numAsString = num.toString()
+  const lastNumber = numAsString[numAsString.length - 1]
+  return suffixes[lastNumber] || suffixes.default
 }

components/home.js

@@ -13,7 +13,7 @@ import Button from './common/button'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import { determinePredictionText, dateEnding } from './helpers/home'
+import { determinePredictionText, getOrdinalSuffix } from './helpers/home'
 
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { home as labels } from '../i18n/en/labels'
@@ -37,10 +37,10 @@ class Home extends Component {
     const prediction = getPredictedMenses()
 
     this.cycleDayText = !this.cycleDayNumber ? labels.cycleDayNotEnoughInfo
-      : `${this.cycleDayNumber}${dateEnding[this.cycleDayNumber] || dateEnding['default']}`
+      : `${this.cycleDayNumber}${getOrdinalSuffix(this.cycleDayNumber)}`
     this.phase = phase
     this.phaseText = !phase ? statusText
-      : `${phase}${dateEnding[phase] || dateEnding['default']}`
+      : `${phase}${getOrdinalSuffix(phase)}`
     this.prediction = determinePredictionText(prediction)
     this.status = status
     this.statusText = statusText