Gets rid of the redundant state on Home

components/home.js

@@ -25,21 +25,20 @@ import {
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
 
 class Home extends Component {
+
   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 = {
+    const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
+
-      predictionText: determinePredictionText(prediction),
+    this.todayDateString = LocalDate.now().toString()
-      bleedingPredictionRange: getBleedingPredictionRange(prediction),
+    this.cycleDayNumber = getCycleDayNumber(this.todayDateString)
-      ...fertilityStatus
+
-    }
+    const prediction = getPredictedMenses()
+    this.predictionText = determinePredictionText(prediction)
+    this.bleedingPredictionRange = getBleedingPredictionRange(prediction)
+
+    this.fertilityStatus = getFertilityStatusForDay(this.todayDateString)
   }
 
   navigateToCycleDayView = () => {
@@ -57,13 +56,18 @@ 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>
@@ -92,11 +96,11 @@ class Home extends Component {
               <DripHomeIcon name="drop" size={100} color={periodColor} />
 
               <IconText wrapperStyles={{ top: '45%' }}>
-                {this.state.bleedingPredictionRange}
+                {bleedingPredictionRange}
               </IconText>
 
               <AppText style={styles.homeDescriptionText}>
-                {this.state.predictionText}
+                {predictionText}
               </AppText>
             </HomeElement>