Revert "Merge branch 'chore/cleanup-date-usage' into 'main'"

This reverts merge request !492

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

@@ -6,34 +6,31 @@ import AppPage from '../common/app-page'
 import SymptomBox from './symptom-box'
 import SymptomPageTitle from './symptom-page-title'
 
-import { getCycleDay } from '../../db'
-import { getData, nextDate, prevDate } from '../helpers/cycle-day'
+import { connect } from 'react-redux'
+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 { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
+const CycleDayOverView = ({ date, isTemperatureEditView }) => {
   const cycleDay = getCycleDay(date)
 
+  const { getCycleDayNumber } = cycleModule()
+  const cycleDayNumber = getCycleDayNumber(date)
+  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
   const [editedSymptom, setEditedSymptom] = useState(
     isTemperatureEditView ? 'temperature' : ''
   )
 
-  const showNextCycleDay = () => {
-    setDate(nextDate(date))
-  }
-
-  const showPrevCycleDay = () => {
-    setDate(prevDate(date))
-  }
-
   return (
     <AppPage>
-      <SymptomPageTitle
-        date={date}
-        onNextCycleDay={showNextCycleDay}
-        onPrevCycleDay={showPrevCycleDay}
-      />
+      <SymptomPageTitle subtitle={subtitle} title={dateToTitle(date)} />
       <View style={styles.container}>
         {SYMPTOMS.map((symptom) => {
           const symptomData =
@@ -41,7 +38,6 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
 
           return (
             <SymptomBox
-              date={date}
               key={symptom}
               symptom={symptom}
               symptomData={symptomData}
@@ -59,7 +55,6 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
 CycleDayOverView.propTypes = {
   cycleDay: PropTypes.object,
   date: PropTypes.string,
-  setDate: PropTypes.func,
   isTemperatureEditView: PropTypes.bool,
 }
 
@@ -72,4 +67,10 @@ const styles = StyleSheet.create({
   },
 })
 
-export default CycleDayOverView
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(CycleDayOverView)

components/cycle-day/symptom-box.js

@@ -7,6 +7,8 @@ import AppText from '../common/app-text'
 import DripIcon from '../../assets/drip-icons'
 import SymptomEditView from './symptom-edit-view'
 
+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
 import { isDateInFuture } from '../helpers/cycle-day'
 
 import { Colors, Sizes, Spacing } from '../../styles'
@@ -41,7 +43,6 @@ const SymptomBox = ({
     <>
       {isSymptomEdited && (
         <SymptomEditView
-          date={date}
           symptom={symptom}
           symptomData={symptomData}
           onClose={() => setEditedSymptom('')}
@@ -127,4 +128,10 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomBox
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomBox)

components/cycle-day/symptom-edit-view.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
+import { connect } from 'react-redux'
 
 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
@@ -13,6 +14,7 @@ import SelectBoxGroup from './select-box-group'
 import SelectTabGroup from './select-tab-group'
 import Temperature from './temperature'
 
+import { getDate } from '../../slices/date'
 import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
 import { showToast } from '../helpers/general'
 
@@ -166,7 +168,6 @@ class SymptomEditView extends Component {
           </View>
           {symptom === 'temperature' && (
             <Temperature
-              date={this.props.date}
               data={data}
               save={(value, field) => this.onSaveTemperature(value, field)}
             />
@@ -284,4 +285,10 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomEditView
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomEditView)

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

@@ -5,33 +5,31 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import AppText from '../common/app-text'
 
-import cycleModule from '../../lib/cycle'
-import { dateToTitle } from '../helpers/format-date'
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'
 
-import { general as labels } from '../../i18n/en/cycle-day'
+import { nextDate, prevDate } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
 
-const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
-  const title = dateToTitle(date)
-
-  const { getCycleDayNumber } = cycleModule()
-  const cycleDayNumber = getCycleDayNumber(date)
-  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
-
+const SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
+  const navigate = (isForward) => {
+    const newDate = isForward ? nextDate(date) : prevDate(date)
+    setDate(newDate)
+  }
   const formattedTitle =
     title.length > 21 ? title.substring(0, 18) + '...' : title
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={onPrevCycleDay} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
         <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={onNextCycleDay} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
         <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>
     </View>
@@ -40,8 +38,9 @@ const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
 
 SymptomPageTitle.propTypes = {
   date: PropTypes.string.isRequired,
-  onNextCycleDay: PropTypes.func.isRequired,
-  onPrevCycleDay: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
@@ -59,4 +58,16 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomPageTitle
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/cycle-day/temperature.js

@@ -10,6 +10,8 @@ import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Segment from '../common/segment'
 
+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
 import {
   getTemperatureOutOfRangeMessage,
   getPreviousTemperature,
@@ -123,4 +125,10 @@ Temperature.propTypes = {
   save: PropTypes.func.isRequired,
 }
 
-export default Temperature
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(Temperature)