Chore/cleanup date usage

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

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