Merge branch 'home-split' into 'master'

Home split

See merge request bloodyhealth/drip!266

components/helpers/home.js

@@ -0,0 +1,64 @@
+import { ChronoUnit, LocalDate } from 'js-joda'
+
+import { formatDateForShortText } from './format-date'
+
+import {
+  home as labels,
+  bleedingPrediction as predictLabels,
+} from '../../i18n/en/labels'
+
+function getTimes(prediction) {
+  const todayDate = LocalDate.now()
+  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 ])
+  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
+}
+
+export function determinePredictionText(bleedingPrediction) {
+  if (!bleedingPrediction.length) return predictLabels.noPrediction
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(bleedingPrediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return predictLabels.predictionInFuture(
+      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
+      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+    )
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return predictLabels.predictionInPast(
+      formatDateForShortText(predictedBleedingStart),
+      formatDateForShortText(predictedBleedingEnd)
+    )
+  }
+  if (daysToEnd === 0) {
+    return predictLabels.predictionStartedNoDaysLeft
+  } else if (daysToEnd === 1) {
+    return predictLabels.predictionStarted1DayLeft
+  } else {
+    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
+  }
+}
+
+export function getBleedingPredictionRange(prediction) {
+  if (!prediction.length) return labels.unknown
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(prediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return labels.unknown
+  }
+  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
+}

components/home-element.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import Button from './button'
+
+import styles from '../styles'
+
+const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
+  return (
+    <View
+      onPress={ onPress }
+      style={ styles.homeElement }
+    >
+      <View style={styles.homeIconAndText}>
+        {children[0]}
+        {children[1]}
+      </View>
+
+      <View style={{paddingLeft: 15}}>
+        {children.slice(2)}
+        <Button
+          style={styles.homeButton}
+          onPress={ onPress }
+          backgroundColor={ buttonColor }>
+          { buttonLabel }
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+HomeElement.propTypes = {
+  buttonColor: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+}
+
+export default HomeElement

components/home.js

@@ -1,74 +1,55 @@
-import { ChronoUnit, LocalDate } from 'js-joda'
+import { LocalDate } from 'js-joda'
 import React, { Component } from 'react'
 import { ScrollView, View } from 'react-native'
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
 import { navigate } from '../slices/navigation'
-import { setDate } from '../slices/date'
+import { getDate, setDate } from '../slices/date'
 
 import DripHomeIcon from '../assets/drip-home-icons'
-import {
-  bleedingPrediction as predictLabels,
-  home as labels
-} from '../i18n/en/labels'
+
+import AppText from './app-text'
+import IconText from './icon-text'
+import HomeElement from './home-element'
+
+import { home as labels } from '../i18n/en/labels'
 import links from '../i18n/en/links'
+
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import {
+  determinePredictionText,
+  getBleedingPredictionRange
+} from './helpers/home'
+
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
-import AppText from './app-text'
-import Button from './button'
-import { formatDateForShortText } from './helpers/format-date'
-
-const IconText = ({ children, wrapperStyles }) => {
-  return (
-    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
-      <AppText style={styles.iconText}>
-        { children }
-      </AppText>
-    </View>
-  )
-}
-
-const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
-  return (
-    <View
-      onPress={ onPress }
-      style={ styles.homeElement }
-    >
-      <View style={styles.homeIconAndText}>
-        {children[0]}
-        {children[1]}
-      </View>
-
-      <View style={{paddingLeft: 15}}>
-        {children.slice(2)}
-        <Button
-          style={styles.homeButton}
-          onPress={ onPress }
-          backgroundColor={ buttonColor }>
-          { buttonLabel }
-        </Button>
-      </View>
-    </View>
-  )
-}
 
 class Home extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    // The following three is not being used,
+    // we could see if it's possible to not pass them from the <App />
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+    handleBackButtonPress: PropTypes.func,
+  }
+
   constructor(props) {
     super(props)
-    const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-    this.getCycleDayNumber = getCycleDayNumber
-    this.getBleedingPrediction = getPredictedMenses
-    this.todayDateString = LocalDate.now().toString()
-    const prediction = this.getBleedingPrediction()
-    const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
 
-    this.state = {
-      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
-      predictionText: determinePredictionText(prediction),
-      bleedingPredictionRange: getBleedingPredictionRange(prediction),
-      ...fertilityStatus
-    }
+    const { getCycleDayNumber, getPredictedMenses } = cycleModule()
+
+    this.todayDateString = LocalDate.now().toString()
+    this.cycleDayNumber = getCycleDayNumber(this.todayDateString)
+
+    const prediction = getPredictedMenses()
+    this.predictionText = determinePredictionText(prediction)
+    this.bleedingPredictionRange = getBleedingPredictionRange(prediction)
+
+    this.fertilityStatus = getFertilityStatusForDay(this.todayDateString)
   }
 
   navigateToCycleDayView = () => {
@@ -86,18 +67,22 @@ class Home extends Component {
   }
 
   render() {
-    const { cycleDayNumber, phase, status } = this.state
+    const {
+      cycleDayNumber,
+      predictionText,
+      bleedingPredictionRange,
+    } = this
+
+    const { phase, status, statusText } = this.fertilityStatus
+
     const cycleDayMoreText = cycleDayNumber ?
       labels.cycleDayKnown(cycleDayNumber) :
       labels.cycleDayNotEnoughInfo
 
-    const { statusText } = this.state
-
     return (
       <View flex={1}>
         <ScrollView>
           <View style={styles.homeView}>
-
             <HomeElement
               onPress={this.navigateToCycleDayView}
               buttonColor={ cycleDayColor }
@@ -106,9 +91,7 @@ class Home extends Component {
               <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <IconText wrapperStyles={styles.wrapperIcon}>
-                {cycleDayNumber || labels.unknown}
-              </IconText>
+              <IconText>{cycleDayNumber || labels.unknown}</IconText>
 
               <AppText style={styles.homeDescriptionText}>
                 {cycleDayMoreText}
@@ -122,12 +105,12 @@ class Home extends Component {
             >
               <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={{top: '45%', ...styles.wrapperIcon}}>
-                {this.state.bleedingPredictionRange}
+              <IconText wrapperStyles={{ top: '45%' }}>
+                {bleedingPredictionRange}
               </IconText>
 
               <AppText style={styles.homeDescriptionText}>
-                {this.state.predictionText}
+                {predictionText}
               </AppText>
             </HomeElement>
 
@@ -138,9 +121,7 @@ class Home extends Component {
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperIcon}>
-                { phase ? phase.toString() : labels.unknown }
-              </IconText>
+              <IconText>{ phase ? phase.toString() : labels.unknown }</IconText>
 
               { phase &&
                 <AppText style={styles.homeDescriptionText}>
@@ -158,6 +139,12 @@ class Home extends Component {
   }
 }
 
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
 const mapDispatchToProps = (dispatch) => {
   return({
     navigate: (page) => dispatch(navigate(page)),
@@ -166,63 +153,6 @@ const mapDispatchToProps = (dispatch) => {
 }
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
 )(Home)
-
-
-function getTimes(prediction) {
-  const todayDate = LocalDate.now()
-  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 ])
-  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
-}
-
-function determinePredictionText(bleedingPrediction) {
-  if (!bleedingPrediction.length) return predictLabels.noPrediction
-  const {
-    todayDate,
-    predictedBleedingStart,
-    predictedBleedingEnd,
-    daysToEnd
-  } = getTimes(bleedingPrediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return predictLabels.predictionInFuture(
-      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
-      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-    )
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return predictLabels.predictionInPast(
-      formatDateForShortText(predictedBleedingStart),
-      formatDateForShortText(predictedBleedingEnd)
-    )
-  }
-  if (daysToEnd === 0) {
-    return predictLabels.predictionStartedNoDaysLeft
-  } else if (daysToEnd === 1) {
-    return predictLabels.predictionStarted1DayLeft
-  } else {
-    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
-  }
-}
-
-function getBleedingPredictionRange(prediction) {
-  if (!prediction.length) return labels.unknown
-  const {
-    todayDate,
-    predictedBleedingStart,
-    predictedBleedingEnd,
-    daysToEnd
-  } = getTimes(prediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return labels.unknown
-  }
-  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
-}

components/icon-text.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import styles from '../styles'
+
+const IconText = ({ children, wrapperStyles }) => {
+  return (
+    <View style={[ styles.homeIconTextWrapper, wrapperStyles ]}>
+      <AppText style={styles.iconText}>
+        { children }
+      </AppText>
+    </View>
+  )
+}
+
+IconText.propTypes = {
+  children: PropTypes.node,
+  wrapperStyles: PropTypes.object,
+}
+
+export default IconText

styles/index.js

@@ -131,14 +131,12 @@ export default StyleSheet.create({
   homeIconTextWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
+    width: 80,
+    position: 'absolute',
   },
   homeIconAndText: {
     justifyContent: 'center'
   },
-  wrapperIcon: {
-    width: 80,
-    position: 'absolute'
-  },
   homeCircle: {
     borderRadius: 100,
     borderWidth: 2.3,