Introduces CycleDayLabel component

components/chart/cycle-day-label.js

+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Text, View } from 'react-native'
+
+import moment from 'moment'
+import { LocalDate } from 'js-joda'
+
+import styles from './styles'
+import cycleModule from '../../lib/cycle'
+
+const CycleDayLabel = ({ height, date }) => {
+  const { label } = styles.column
+  const dayDate = LocalDate.parse(date)
+  const cycleDayNumber = cycleModule().getCycleDayNumber(date)
+
+  const isFirstDayOfMonth = dayDate.dayOfMonth() === 1
+  const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'Do'
+  const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting)
+  const boldDateLabel = isFirstDayOfMonth ? {fontWeight: 'bold'} : {}
+
+  return (
+    <View style={{ height }}>
+      <Text style={label.number}>
+        {cycleDayNumber ? cycleDayNumber : ' '}
+      </Text>
+      <Text style={[label.date, boldDateLabel]}>
+        {shortDate}
+      </Text>
+    </View>
+  )
+}
+
+CycleDayLabel.propTypes = {
+  height: PropTypes.number,
+  date: PropTypes.string,
+}
+
+export default CycleDayLabel

components/chart/day-column.js

 import React, { Component } from 'react'
-import {
-  Text, View, TouchableOpacity
-} from 'react-native'
+import { TouchableOpacity } from 'react-native'
 import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { connect } from 'react-redux'
 
 import { setDate } from '../../slices/date'
 
 import { LocalDate } from 'js-joda'
-import moment from 'moment'
-import styles from './styles'
 import config from '../../config'
-import cycleModule from '../../lib/cycle'
 import { getCycleDay } from '../../db'
 
 import SymptomCell from './symptom-cell'
 import TemperatureColumn from './temperature-column'
+import CycleDayLabel from './cycle-day-label'
 
 import { normalizeToScale } from '../helpers/chart'
 
-const label = styles.column.label
-
 class DayColumn extends Component {
   constructor(props) {
     super()
@@ -143,24 +137,6 @@ class DayColumn extends Component {
       columnHeight,
       xAxisHeight } = this.props
 
-    const cycleDayNumber = cycleModule().getCycleDayNumber(dateString)
-    const dayDate = LocalDate.parse(dateString)
-    const shortDate = dayDate.dayOfMonth() === 1 ?
-      moment(dateString, "YYYY-MM-DD").format('MMM')
-      :
-      moment(dateString, "YYYY-MM-DD").format('Do')
-    const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
-
-    const cycleDayLabel = (
-      <Text style = {label.number}>
-        {cycleDayNumber ? cycleDayNumber : ' '}
-      </Text>)
-    const dateLabel = (
-      <Text style = {[label.date, boldDateLabel]}>
-        {shortDate}
-      </Text>
-    )
-
     return (
       <TouchableOpacity
         onPress={() => this.onDaySelect(dateString)}
@@ -191,10 +167,11 @@ class DayColumn extends Component {
           />
         </Surface>
 
-        <View style={{height: xAxisHeight}}>
-          {cycleDayLabel}
-          {dateLabel}
-        </View>
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
+        />
+
       </TouchableOpacity>
     )
   }
@@ -211,7 +188,6 @@ export default connect(
   mapDispatchToProps,
 )(DayColumn)
 
-
 function getInfoForNeighborColumns(dateString, columnHeight) {
   const ret = {
     rightY: null,