Refactor cycle day overview screen

components/cycle-day/cycle-day-overview.js

@@ -1,87 +1,61 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
-import { LocalDate } from 'js-joda'
 
 import AppPage from '../common/app-page'
 import SymptomBox from './symptom-box'
 import SymptomPageTitle from './symptom-page-title'
 
 import { connect } from 'react-redux'
-import { getDate, setDate } from '../../slices/date'
-import { navigate } from '../../slices/navigation'
+import { getDate } from '../../slices/date'
 
 import cycleModule from '../../lib/cycle'
 import { dateToTitle } from '../helpers/format-date'
 import { getCycleDay } from '../../db'
 import { getData } from '../helpers/cycle-day'
 
-import { general as labels} from '../../i18n/en/cycle-day'
+import { general as labels } from '../../i18n/en/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-class CycleDayOverView extends Component {
+const CycleDayOverView = ({ date, isTemperatureEditView }) => {
+  const cycleDay = getCycleDay(date)
 
-  static propTypes = {
-    navigate: PropTypes.func,
-    setDate: PropTypes.func,
-    cycleDay: PropTypes.object,
-    date: PropTypes.string,
-    isTemperatureEditView: PropTypes.bool,
-  }
+  const { getCycleDayNumber } = cycleModule()
+  const cycleDayNumber = getCycleDayNumber(date)
+  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
+  const [editedSymptom, setEditedSymptom] = useState(
+    isTemperatureEditView ? 'temperature' : ''
+  )
 
-  constructor(props) {
-    super(props)
+  return (
+    <AppPage>
+      <SymptomPageTitle subtitle={subtitle} title={dateToTitle(date)} />
+      <View style={styles.container}>
+        {SYMPTOMS.map((symptom) => {
+          const symptomData =
+            cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
 
-    this.state = { cycleDay: getCycleDay(props.date), data: null }
-    if (props.isTemperatureEditView) {
-      const todayDateString = LocalDate.now().toString()
-      props.setDate(todayDateString)
-    }
-  }
+          return (
+            <SymptomBox
+              key={symptom}
+              symptom={symptom}
+              symptomData={symptomData}
+              symptomDataToDisplay={getData(symptom, symptomData)}
+              editedSymptom={editedSymptom}
+              setEditedSymptom={setEditedSymptom}
+            />
+          )
+        })}
+      </View>
+    </AppPage>
+  )
+}
 
-  updateCycleDay = (date) => {
-    this.props.setDate(date)
-    this.setState({ cycleDay: getCycleDay(date) })
-  }
-
-  render() {
-    const { cycleDay } = this.state
-    const { date, isTemperatureEditView } = this.props
-
-    const { getCycleDayNumber } = cycleModule()
-    const cycleDayNumber = getCycleDayNumber(date)
-    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
-
-    return (
-      <AppPage>
-        <SymptomPageTitle
-          reloadSymptomData={this.updateCycleDay}
-          subtitle={subtitle}
-          title={dateToTitle(date)}
-        />
-        <View style={styles.container}>
-          {SYMPTOMS.map(symptom => {
-            const symptomData = cycleDay && cycleDay[symptom]
-              ? cycleDay[symptom] : null
-
-            const isSymptomEdited = isTemperatureEditView && symptom === 'temperature'
-
-            return(
-              <SymptomBox
-                key={symptom}
-                symptom={symptom}
-                symptomData={symptomData}
-                symptomDataToDisplay={getData(symptom, symptomData)}
-                updateCycleDayData={this.updateCycleDay}
-                isSymptomEdited={isSymptomEdited}
-              />
-            )
-          })}
-        </View>
-      </AppPage>
-    )
-  }
+CycleDayOverView.propTypes = {
+  cycleDay: PropTypes.object,
+  date: PropTypes.string,
+  isTemperatureEditView: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -89,24 +63,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    padding: Spacing.base
-  }
+    padding: Spacing.base,
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     date: getDate(state),
-  })
+  }
 }
 
-const mapDispatchToProps = (dispatch) => {
-  return({
-    setDate: (date) => dispatch(setDate(date)),
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(CycleDayOverView)
+export default connect(mapStateToProps, null)(CycleDayOverView)