162 Refactor Home component to functional component

components/Home.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
-
+import moment from 'moment';
-import { LocalDate } from 'js-joda'
 
 import { connect } from 'react-redux'
 import { navigate } from '../slices/navigation'
@@ -17,62 +16,30 @@ import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home
 
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { home as labels } from '../i18n/en/labels'
+import { LocalDate } from 'js-joda'
 
-class Home extends Component {
+const Home = ({navigate, setDate}) => {  
 
-  static propTypes = {
+  function navigateToCycleDayView() {
-    navigate: PropTypes.func,
+    setDate(todayDateString)
-    setDate: PropTypes.func
+    navigate('CycleDay')
   }
 
-  constructor(props) {
+  const todayDateString = LocalDate.now().toString()
-    super(props)
-
-    const today = LocalDate.now()
-    this.todayDateString = today.toString()
   const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-    this.cycleDayNumber = getCycleDayNumber(this.todayDateString)
+  const cycleDayNumber = getCycleDayNumber(todayDateString)
   const { status, phase, statusText } =
-      getFertilityStatusForDay(this.todayDateString)
+    getFertilityStatusForDay(todayDateString)
-    const prediction = getPredictedMenses()
+  const prediction = determinePredictionText(getPredictedMenses())
-    this.prediction = determinePredictionText(prediction)
-    this.title = `${today.dayOfMonth()} ${today.month()} ${today.year()}`
 
-    if (this.cycleDayNumber) {
+  const cycleDayText =  cycleDayNumber ? formatWithOrdinalSuffix(cycleDayNumber) : ''
-      this.cycleDayText = formatWithOrdinalSuffix(this.cycleDayNumber)
-    }
-
-    if (phase) {
-      this.phase = phase
-      this.phaseText = formatWithOrdinalSuffix(phase)
-      this.status = status
-      this.statusText = statusText
-    }
-  }
-
-  navigateToCycleDayView = () => {
-    this.props.setDate(this.todayDateString)
-    this.props.navigate('CycleDay')
-  }
-
-  render() {
-    const {
-      cycleDayNumber,
-      cycleDayText,
-      phase,
-      phaseText,
-      prediction,
-      status,
-      statusText,
-      title
-    } = this
 
   return (
     <ScrollView
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
     >
-        <AppText style={styles.title}>{title}</AppText>
+      <AppText style={styles.title}>{moment().format("MMM Do YYYY")}</AppText>
 
       {cycleDayNumber &&
         <View style={styles.line}>
@@ -82,7 +49,7 @@ class Home extends Component {
       }
       {phase &&
         <View style={styles.line}>
-            <AppText style={styles.whiteSubtitle}>{phaseText}</AppText>
+          <AppText style={styles.whiteSubtitle}>{formatWithOrdinalSuffix(phase)}</AppText>
           <AppText style={styles.turquoiseText}>
             {labels.cyclePhase}
           </AppText>
@@ -93,7 +60,7 @@ class Home extends Component {
       <View style={styles.line}>
         <AppText style={styles.turquoiseText}>{prediction}</AppText>
       </View>
-        <Button isCTA isSmall={false} onPress={this.navigateToCycleDayView}>
+      <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
         {labels.addData}
       </Button>
       {phase && (
@@ -106,7 +73,6 @@ class Home extends Component {
       )}
     </ScrollView>
   )
-  }
 }
 
 const Asterisk = () => {
@@ -174,6 +140,11 @@ const mapDispatchToProps = (dispatch) => {
   })
 }
 
+Home.propTypes = {
+  navigate: PropTypes.func,
+  setDate: PropTypes.func
+}
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps,