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)

components/cycle-day/symptom-box.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
 import { scale } from 'react-native-size-matters'
@@ -14,94 +14,75 @@ import { isDateInFuture } from '../helpers/cycle-day'
 import { Colors, Sizes, Spacing } from '../../styles'
 import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
-class SymptomBox extends Component {
-  static propTypes = {
-    date: PropTypes.string.isRequired,
-    isSymptomEdited: PropTypes.bool,
-    symptom: PropTypes.string.isRequired,
-    symptomData: PropTypes.object,
-    symptomDataToDisplay: PropTypes.string,
-    updateCycleDayData: PropTypes.func.isRequired,
-  }
+const SymptomBox = ({
+  date,
+  symptom,
+  symptomData,
+  symptomDataToDisplay,
+  editedSymptom,
+  setEditedSymptom,
+}) => {
+  const isSymptomEdited = editedSymptom === symptom
+  const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
+  const isExcluded = symptomData !== null ? symptomData.exclude : false
 
-  static defaultProps = {
-    isSymptomEdited: false,
-  }
+  const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
+  const iconName = `drip-icon-${symptom}`
+  const symptomNameStyle = [
+    styles.symptomName,
+    isSymptomDisabled && styles.symptomNameDisabled,
+    isExcluded && styles.symptomNameExcluded,
+  ]
+  const textStyle = [
+    styles.text,
+    isSymptomDisabled && styles.textDisabled,
+    isExcluded && styles.textExcluded,
+  ]
 
-  constructor(props) {
-    super(props)
+  return (
+    <>
+      {isSymptomEdited && (
+        <SymptomEditView
+          symptom={symptom}
+          symptomData={symptomData}
+          onClose={() => setEditedSymptom('')}
+        />
+      )}
 
-    this.state = {
-      isSymptomEdited: props.isSymptomEdited,
-    }
-  }
-
-  onFinishEditing = () => {
-    const { date, updateCycleDayData } = this.props
-
-    updateCycleDayData(date)
-    this.setState({ isSymptomEdited: false })
-  }
-
-  onEditSymptom = () => {
-    this.setState({ isSymptomEdited: true })
-  }
-
-  render() {
-    const { date, symptom, symptomData, symptomDataToDisplay } = this.props
-    const { isSymptomEdited } = this.state
-    const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
-    const isExcluded = symptomData !== null ? symptomData.exclude : false
-
-    const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
-    const iconName = `drip-icon-${symptom}`
-    const symptomNameStyle = [
-      styles.symptomName,
-      isSymptomDisabled && styles.symptomNameDisabled,
-      isExcluded && styles.symptomNameExcluded,
-    ]
-    const textStyle = [
-      styles.text,
-      isSymptomDisabled && styles.textDisabled,
-      isExcluded && styles.textExcluded,
-    ]
-
-    return (
-      <React.Fragment>
-        {isSymptomEdited && (
-          <SymptomEditView
-            symptom={symptom}
-            symptomData={symptomData}
-            onClose={this.onFinishEditing}
-          />
-        )}
-
-        <TouchableOpacity
-          disabled={isSymptomDisabled}
-          onPress={this.onEditSymptom}
-          style={styles.container}
-          testID={iconName}
-        >
-          <DripIcon
-            color={iconColor}
-            isActive={!isSymptomDisabled}
-            name={iconName}
-            size={Sizes.icon}
-          />
-          <View style={styles.textContainer}>
-            <AppText style={symptomNameStyle}>
-              {symptomTitles[symptom].toLowerCase()}
+      <TouchableOpacity
+        disabled={isSymptomDisabled}
+        onPress={() => setEditedSymptom(symptom)}
+        style={styles.container}
+        testID={iconName}
+      >
+        <DripIcon
+          color={iconColor}
+          isActive={!isSymptomDisabled}
+          name={iconName}
+          size={Sizes.icon}
+        />
+        <View style={styles.textContainer}>
+          <AppText style={symptomNameStyle}>
+            {symptomTitles[symptom].toLowerCase()}
+          </AppText>
+          {symptomDataToDisplay && (
+            <AppText style={textStyle} numberOfLines={4}>
+              {symptomDataToDisplay}
             </AppText>
-            {symptomDataToDisplay && (
-              <AppText style={textStyle} numberOfLines={4}>
-                {symptomDataToDisplay}
-              </AppText>
-            )}
-          </View>
-        </TouchableOpacity>
-      </React.Fragment>
-    )
-  }
+          )}
+        </View>
+      </TouchableOpacity>
+    </>
+  )
+}
+
+SymptomBox.propTypes = {
+  date: PropTypes.string.isRequired,
+  symptom: PropTypes.string.isRequired,
+  symptomData: PropTypes.object,
+  symptomDataToDisplay: PropTypes.string,
+  editedSymptom: PropTypes.string.isRequired,
+  setEditedSymptom: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({

components/cycle-day/symptom-page-title.js

@@ -12,33 +12,25 @@ import { nextDate, prevDate } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
 
-const SymptomPageTitle = ({
-  date,
-  reloadSymptomData,
-  setDate,
-  subtitle,
-  title,
-}) => {
+const SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
   const navigate = (isForward) => {
-    const nextDay = isForward ? nextDate(date) : prevDate(date)
-    reloadSymptomData(nextDay)
-    setDate(nextDay)
+    const newDate = isForward ? nextDate(date) : prevDate(date)
+    setDate(newDate)
   }
-  const formattedTitle = title.length > 21
-    ? title.substring(0, 18) + '...'
-    : title
+  const formattedTitle =
+    title.length > 21 ? title.substring(0, 18) + '...' : title
 
   return (
     <View style={styles.container}>
       <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
-        <AppIcon name='chevron-left' color={Colors.orange}/>
+        <AppIcon name="chevron-left" color={Colors.orange} />
       </TouchableOpacity>
       <View style={styles.textContainer}>
         <AppText style={styles.title}>{formattedTitle}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
       <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
-        <AppIcon name='chevron-right' color={Colors.orange}/>
+        <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>
     </View>
   )
@@ -46,7 +38,6 @@ const SymptomPageTitle = ({
 
 SymptomPageTitle.propTypes = {
   date: PropTypes.string.isRequired,
-  reloadSymptomData: PropTypes.func.isRequired,
   setDate: PropTypes.func.isRequired,
   subtitle: PropTypes.string,
   title: PropTypes.string,