From e5418c32e21d6907cc292b3d54e90e6cfcdc7d97 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Wed, 30 Sep 2020 20:33:21 +0200 Subject: [PATCH 1/5] Fix ordinal suffix for numbers greater than 10 --- components/chart/cycle-day-label.js | 6 +++--- components/helpers/home.js | 20 +++++++++++++------- components/home.js | 12 ++++++------ 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js index aec35d5..f5ef7aa 100644 --- a/components/chart/cycle-day-label.js +++ b/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,13 +18,13 @@ 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 ( {cycleDayLabel} - + {shortDate} {ending} diff --git a/components/helpers/home.js b/components/helpers/home.js index 1da8516..4851091 100644 --- a/components/helpers/home.js +++ b/components/helpers/home.js @@ -12,7 +12,7 @@ function getTimes(prediction) { const predictedBleedingStart = LocalDate.parse(prediction[0][0]) /* the range of predicted bleeding days can be either 3 or 5 */ const predictedBleedingEnd = - LocalDate.parse(prediction[0][ prediction[0].length - 1 ]) + LocalDate.parse(prediction[0][prediction[0].length - 1]) const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS) return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } } @@ -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 +} \ No newline at end of file diff --git a/components/home.js b/components/home.js index a1d5e87..2444194 100644 --- a/components/home.js +++ b/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' @@ -32,15 +32,15 @@ class Home extends Component { this.todayDateString = today.toString() const { getCycleDayNumber, getPredictedMenses } = cycleModule() this.cycleDayNumber = getCycleDayNumber(this.todayDateString) - const {status, phase, statusText} = + const { status, phase, statusText } = getFertilityStatusForDay(this.todayDateString) 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 @@ -149,13 +149,13 @@ const styles = StyleSheet.create({ }) const mapStateToProps = (state) => { - return({ + return ({ date: getDate(state), }) } const mapDispatchToProps = (dispatch) => { - return({ + return ({ navigate: (page) => dispatch(navigate(page)), setDate: (date) => dispatch(setDate(date)), }) From 9d3c332453cd726d61592c23342da0772aeb94db Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Fri, 4 Dec 2020 19:30:15 +0100 Subject: [PATCH 2/5] Fix getOrdinalSuffix and add a formatting function --- components/helpers/home.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/components/helpers/home.js b/components/helpers/home.js index 4851091..e5b75c3 100644 --- a/components/helpers/home.js +++ b/components/helpers/home.js @@ -64,14 +64,24 @@ export function getBleedingPredictionRange(prediction) { } export function getOrdinalSuffix(num) { - const suffixes = { - 1: 'st', - 2: 'nd', - 3: 'rd', - default: 'th' + const j = num % 10 + const k = num % 100 + + if (j === 1 && k !== 11) { + return 'st' } - const numAsString = num.toString() - const lastNumber = numAsString[numAsString.length - 1] - return suffixes[lastNumber] || suffixes.default -} \ No newline at end of file + if (j === 2 && k !== 12) { + return 'nd' + } + + if (j === 3 && k !== 13) { + return 'rd' + } + + return 'th' +} + +export function formatWithOrdinalSuffix(num) { + return num + getOrdinalSuffix(num) +} From f9eb06f197b2254d7fc3898df0a9f6a47450c266 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Fri, 4 Dec 2020 19:30:41 +0100 Subject: [PATCH 3/5] Make use of formatWithOrdinalSuffix function --- components/home.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/home.js b/components/home.js index 2444194..aabd81b 100644 --- a/components/home.js +++ b/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, getOrdinalSuffix } from './helpers/home' +import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home' import { Colors, Fonts, Sizes, Spacing } from '../styles' import { home as labels } from '../i18n/en/labels' @@ -37,10 +37,9 @@ class Home extends Component { const prediction = getPredictedMenses() this.cycleDayText = !this.cycleDayNumber ? labels.cycleDayNotEnoughInfo - : `${this.cycleDayNumber}${getOrdinalSuffix(this.cycleDayNumber)}` + : formatWithOrdinalSuffix(this.cycleDayNumber) this.phase = phase - this.phaseText = !phase ? statusText - : `${phase}${getOrdinalSuffix(phase)}` + this.phaseText = !phase ? statusText : formatWithOrdinalSuffix(phase) this.prediction = determinePredictionText(prediction) this.status = status this.statusText = statusText From c270c7a55f5b953ab35ef5805c8e67dcff7e4560 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Fri, 4 Dec 2020 19:33:25 +0100 Subject: [PATCH 4/5] Add tests to the getOrdinalSuffix function --- test/home-helpers.spec.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 test/home-helpers.spec.js diff --git a/test/home-helpers.spec.js b/test/home-helpers.spec.js new file mode 100644 index 0000000..696a7b9 --- /dev/null +++ b/test/home-helpers.spec.js @@ -0,0 +1,25 @@ +import { expect } from 'chai' + +import {getOrdinalSuffix } from '../components/helpers/home' + +describe('Home helper: getOrdinalSuffix', () => { + it('For 1, it returns suffix \'st\'', () => { + expect(getOrdinalSuffix(1)).to.eql('st') + }) + + it('For 2, it returns suffix \'nd\'', () => { + expect(getOrdinalSuffix(2)).to.eql('nd') + }) + + it('For 3, it returns suffix \'rd\'', () => { + expect(getOrdinalSuffix(3)).to.eql('rd') + }) + + it('For 11, it returns suffix \'th\'', () => { + expect(getOrdinalSuffix(11)).to.eql('th') + }) + + it('For 23, it returns suffix \'rd\'', () => { + expect(getOrdinalSuffix(23)).to.eql('rd') + }) +}) From 72bcd34272968e7c12cc3590d1598861feeecae0 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Sat, 5 Dec 2020 19:31:30 +0100 Subject: [PATCH 5/5] Fixes ordinal number suffix on chart date labels --- components/chart/cycle-day-label.js | 34 ++++++++++++++++++----------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js index f5ef7aa..ed24cde 100644 --- a/components/chart/cycle-day-label.js +++ b/components/chart/cycle-day-label.js @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import { StyleSheet, View } from 'react-native' -import { LocalDate } from 'js-joda' import moment from 'moment' import AppText from '../common/app-text' @@ -11,22 +10,25 @@ import { getOrdinalSuffix } from '../helpers/home' import { Containers, Typography } from '../../styles' const CycleDayLabel = ({ height, date }) => { - const dayDate = LocalDate.parse(date) const cycleDayNumber = cycleModule().getCycleDayNumber(date) - - const isFirstDayOfMonth = dayDate.dayOfMonth() === 1 - const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'D' - const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting) - const ending = isFirstDayOfMonth ? - '' : getOrdinalSuffix(this.cycleDayNumber) const cycleDayLabel = cycleDayNumber ? cycleDayNumber : ' ' + const momentDate = moment(date) + const dayOfMonth = momentDate.date() + const isFirstDayOfMonth = dayOfMonth === 1 + return ( {cycleDayLabel} - - {shortDate} - {ending} + + + {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth} + + {!isFirstDayOfMonth && + + {getOrdinalSuffix(dayOfMonth)} + + } ) @@ -47,13 +49,19 @@ const styles = StyleSheet.create({ ...Containers.rowContainer }, text: { - ...Typography.label + ...Typography.label, + fontSize: 12 }, textBold: { ...Typography.labelBold }, textLight: { - ...Typography.labelLight + ...Typography.labelLight, + }, + dateLabel: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', } })