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

This reverts merge request !492

components/Home.js

@@ -5,6 +5,7 @@ import moment from 'moment'
 
 import { connect } from 'react-redux'
 import { navigate } from '../slices/navigation'
+import { getDate, setDate } from '../slices/date'
 
 import AppText from './common/app-text'
 import Button from './common/button'
@@ -136,9 +137,16 @@ const styles = StyleSheet.create({
   },
 })
 
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
 const mapDispatchToProps = (dispatch) => {
   return {
     navigate: (page) => dispatch(navigate(page)),
+    setDate: (date) => dispatch(setDate(date)),
   }
 }
 
@@ -147,4 +155,4 @@ Home.propTypes = {
   setDate: PropTypes.func,
 }
 
-export default connect(null, mapDispatchToProps)(Home)
+export default connect(mapStateToProps, mapDispatchToProps)(Home)

components/app.js

@@ -3,8 +3,8 @@ import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
-import { LocalDate } from '@js-joda/core'
 
+import { getDate } from '../slices/date'
 import { getNavigation, navigate, goBack } from '../slices/navigation'
 
 import Header from './header'
@@ -14,14 +14,13 @@ import { isSettingsView } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { closeDb } from '../db'
+import { getCycleDay, closeDb } from '../db'
 
 class App extends Component {
   static propTypes = {
     date: PropTypes.string,
     navigation: PropTypes.object.isRequired,
     navigate: PropTypes.func,
-    setDate: PropTypes.func,
     goBack: PropTypes.func,
     restartApp: PropTypes.func,
   }
@@ -34,15 +33,7 @@ class App extends Component {
       this.goBack
     )
 
-    this.state = {
+    setupNotifications(this.props.navigate)
-      date: LocalDate.now().toString(),
-    }
-
-    setupNotifications(this.props.navigate, this.props.setDate)
-  }
-
-  setDate = (date) => {
-    this.setState({ date })
   }
 
   goBack = () => {
@@ -63,8 +54,7 @@ class App extends Component {
   }
 
   render() {
-    const { navigation, goBack, restartApp } = this.props
+    const { date, navigation, goBack, restartApp } = this.props
-    const { date } = this.state
     const { currentPage } = navigation
 
     if (!currentPage) {
@@ -83,8 +73,8 @@ class App extends Component {
     }
 
     const pageProps = {
+      cycleDay: date && getCycleDay(date),
       date,
-      setDate: this.setDate,
       isTemperatureEditView,
     }
 
@@ -106,6 +96,7 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state) => {
   return {
+    date: getDate(state),
     navigation: getNavigation(state),
   }
 }

components/calendar.js

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
 
 import { connect } from 'react-redux'
+import { setDate } from '../slices/date'
 import { navigate } from '../slices/navigation'
 
 import { getBleedingDaysSortedByDate } from '../db'
@@ -74,7 +75,7 @@ class CalendarView extends Component {
           firstDay={1}
           onDayPress={this.passDateToDayView.bind(this)}
           markedDates={markedDates}
-          markingType="custom"
+          markingType='custom'
           theme={calendarTheme}
           // Max amount of months allowed to scroll to the past.
           pastScrollRange={120}
@@ -90,6 +91,7 @@ const styles = StyleSheet.create({
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
   }
 }

components/chart/chart.js

@@ -6,7 +6,7 @@ import {
   FlatList,
   PixelRatio,
   StyleSheet,
-  View,
+  View
 } from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
@@ -24,11 +24,7 @@ import { navigate } from '../../slices/navigation'
 
 import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
-import {
+import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
-  getChartFlag,
-  scaleObservable,
-  setChartFlag,
-} from '../../local-storage'
 import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
@@ -36,7 +32,7 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  SYMPTOMS,
+  SYMPTOMS
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
 import { Colors, Spacing } from '../../styles'
@@ -44,8 +40,7 @@ import { Colors, Spacing } from '../../styles'
 class CycleChart extends Component {
   static propTypes = {
     navigate: PropTypes.func,
-    end: PropTypes.bool,
+    end: PropTypes.bool
-    setDate: PropTypes.func,
   }
 
   constructor(props) {
@@ -85,12 +80,12 @@ class CycleChart extends Component {
 
   prepareSymptomData = () => {
     this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
-      return this.cycleDaysSortedByDate.some((cycleDay) => {
+      return this.cycleDaysSortedByDate.some(cycleDay => {
-        return symptomName !== 'temperature' && cycleDay[symptomName]
+        return (symptomName !== 'temperature') && cycleDay[symptomName]
       })
     })
     this.chartSymptoms = [...this.symptomRowSymptoms]
-    if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
+    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
       this.chartSymptoms.push('temperature')
       this.shouldShowTemperatureColumn = true
     }
@@ -99,7 +94,6 @@ class CycleChart extends Component {
   renderColumn = ({ item, index }) => {
     return (
       <DayColumn
-        setDate={this.props.setDate}
         dateString={item}
         index={index}
         navigate={this.props.navigate}
@@ -120,16 +114,15 @@ class CycleChart extends Component {
     this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
     const remainingHeight = height * 0.7 - this.xAxisHeight
     this.symptomHeight = PixelRatio.roundToNearestPixel(
-      remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
+      remainingHeight
+      * CHART_SYMPTOM_HEIGHT_RATIO
     )
-    this.symptomRowHeight =
+    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
-      PixelRatio.roundToNearestPixel(
+      this.symptomRowSymptoms.length * this.symptomHeight
-        this.symptomRowSymptoms.length * this.symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
-      ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
     this.columnHeight = remainingHeight - this.symptomRowHeight
-    const chartHeight = this.shouldShowTemperatureColumn
+    const chartHeight = this.shouldShowTemperatureColumn ?
-      ? height * 0.7
+      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
-      : this.symptomRowHeight + this.xAxisHeight
     const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
     const columns = makeColumnInfo()
 
@@ -138,7 +131,7 @@ class CycleChart extends Component {
 
   updateListeners(dataUpdateHandler) {
     // remove existing listeners
-    if (this.handleDbChange) {
+    if(this.handleDbChange) {
       this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
     }
     if (this.removeObvListener) this.removeObvListener()
@@ -157,7 +150,7 @@ class CycleChart extends Component {
       chartHeight,
       chartLoaded,
       shouldShowHint,
-      numberOfColumnsToRender,
+      numberOfColumnsToRender
     } = this.state
     const hasDataToDisplay = this.chartSymptoms.length > 0
 
@@ -170,52 +163,53 @@ class CycleChart extends Component {
         {!hasDataToDisplay && <NoData />}
         {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
         <View style={styles.chartContainer}>
-          {shouldShowHint && chartLoaded && (
+          {shouldShowHint && chartLoaded &&
             <Tutorial onClose={this.setShouldShowHint} />
-          )}
+          }
-          {hasDataToDisplay &&
+          {hasDataToDisplay && chartLoaded &&
-            chartLoaded &&
+            !this.shouldShowTemperatureColumn &&
-            !this.shouldShowTemperatureColumn && (
+            <View style={styles.centerItem}>
-              <View style={styles.centerItem}>
+              <AppText style={styles.warning}>
-                <AppText style={styles.warning}>
+                {shared.noTemperatureWarning}
-                  {shared.noTemperatureWarning}
+              </AppText>
-                </AppText>
+            </View>
-              </View>
+          }
-            )}
           {hasDataToDisplay && (
             <View style={styles.chartArea}>
+
               {chartHeight && chartLoaded && (
                 <YAxis
                   height={this.columnHeight}
                   symptomsToDisplay={this.symptomRowSymptoms}
                   symptomsSectionHeight={this.symptomRowHeight}
-                  shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
+                  shouldShowTemperatureColumn=
+                    {this.shouldShowTemperatureColumn}
                   xAxisHeight={this.xAxisHeight}
                 />
               )}
 
-              {chartHeight && (
+              {chartHeight &&
-                <FlatList
+               <FlatList
-                  horizontal={true}
+                 horizontal={true}
-                  inverted={true}
+                 inverted={true}
-                  showsHorizontalScrollIndicator={false}
+                 showsHorizontalScrollIndicator={false}
-                  data={this.state.columns}
+                 data={this.state.columns}
-                  renderItem={this.renderColumn}
+                 renderItem={this.renderColumn}
-                  keyExtractor={(item) => item}
+                 keyExtractor={item => item}
-                  initialNumToRender={numberOfColumnsToRender}
+                 initialNumToRender={numberOfColumnsToRender}
-                  windowSize={30}
+                 windowSize={30}
-                  onLayout={() => this.setState({ chartLoaded: true })}
+                 onLayout={() => this.setState({chartLoaded: true})}
-                  onEndReached={() => this.setState({ end: true })}
+                 onEndReached={() => this.setState({end: true})}
-                  ListFooterComponent={<LoadingMoreView end={this.state.end} />}
+                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
-                  updateCellsBatchingPeriod={800}
+                 updateCellsBatchingPeriod={800}
-                  contentContainerStyle={{ height: chartHeight }}
+                 contentContainerStyle={{ height: chartHeight }}
-                />
+               />
-              )}
+              }
               {chartHeight && chartLoaded && (
                 <React.Fragment>
-                  {this.shouldShowTemperatureColumn && (
+                  {this.shouldShowTemperatureColumn &&
                     <HorizontalGrid height={this.columnHeight} />
-                  )}
+                  }
                 </React.Fragment>
               )}
             </View>
@@ -229,42 +223,45 @@ class CycleChart extends Component {
 function LoadingMoreView({ end }) {
   return (
     <View style={styles.loadingContainer}>
-      {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
     </View>
   )
 }
 
 LoadingMoreView.propTypes = {
-  end: PropTypes.bool,
+  end: PropTypes.bool
 }
 
 const styles = StyleSheet.create({
   chartArea: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   chartContainer: {
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   loadingContainer: {
     height: '100%',
     backgroundColor: Colors.turquoiseLight,
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   page: {
-    marginVertical: Spacing.small,
+    marginVertical: Spacing.small
   },
   pageContainer: {
-    paddingHorizontal: Spacing.base,
+    paddingHorizontal: Spacing.base
   },
   warning: {
-    padding: Spacing.large,
+    padding: Spacing.large
-  },
+  }
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return {
+  return({
     navigate: (page) => dispatch(navigate(page)),
-  }
+  })
 }
 
-export default connect(null, mapDispatchToProps)(CycleChart)
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CycleChart)

components/chart/day-column.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 import { connect } from 'react-redux'
 
+import { setDate } from '../../slices/date'
 import { navigate } from '../../slices/navigation'
 
 import { getCycleDay } from '../../db'
@@ -14,7 +15,7 @@ import CycleDayLabel from './cycle-day-label'
 import {
   symptomColorMethods,
   getTemperatureProps,
-  isSymptomDataComplete,
+  isSymptomDataComplete
 } from '../helpers/chart'
 
 class DayColumn extends Component {
@@ -39,17 +40,14 @@ class DayColumn extends Component {
     this.data = {}
 
     if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
+      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
         const symptomData = cycleDayData[symptom]
 
         if (symptomData && symptom === 'temperature') {
-          symptomDataToDisplay[symptom] = getTemperatureProps(
+          symptomDataToDisplay[symptom] =
-            symptomData,
+           getTemperatureProps(symptomData, columnHeight, dateString)
-            columnHeight,
-            dateString
-          )
         } else {
-          if (symptomData && !symptomData.exclude) {
+          if (symptomData && ! symptomData.exclude) {
             // if symptomColorMethods entry doesn't exist for given symptom,
             // use 'default'
             const getSymptomColorIndex =
@@ -80,13 +78,12 @@ class DayColumn extends Component {
   }
 
   render() {
-    const {
+    const { columnHeight,
-      columnHeight,
       dateString,
       shouldShowTemperatureColumn,
       symptomHeight,
       symptomRowSymptoms,
-      xAxisHeight,
+      xAxisHeight
     } = this.props
 
     return (
@@ -94,22 +91,22 @@ class DayColumn extends Component {
         onPress={() => this.onDaySelect(dateString)}
         activeOpacity={1}
       >
-        {shouldShowTemperatureColumn && (
-          <TemperatureColumn
-            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-            isVerticalLine={this.fhmAndLtl.drawFhmLine}
-            data={this.data && this.data.temperature}
-            columnHeight={columnHeight}
-          />
-        )}
 
-        <CycleDayLabel height={xAxisHeight} date={dateString} />
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
+          columnHeight={columnHeight}
+        />}
 
-        {symptomRowSymptoms.map((symptom, i) => {
+        <CycleDayLabel
-          const hasSymptomData = Object.prototype.hasOwnProperty.call(
+          height={xAxisHeight}
-            this.data,
+          date={dateString}
-            symptom
+        />
-          )
+
+        { symptomRowSymptoms.map((symptom, i) => {
+          const hasSymptomData =
+            Object.prototype.hasOwnProperty.call(this.data, symptom)
           return (
             <SymptomCell
               index={i}
@@ -120,18 +117,23 @@ class DayColumn extends Component {
                 hasSymptomData && isSymptomDataComplete(symptom, dateString)
               }
               height={symptomHeight}
-            />
+            />)
-          )
+        }
-        })}
+        )}
+
       </TouchableOpacity>
     )
   }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  return {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
-  }
+  })
 }
 
-export default connect(null, mapDispatchToProps)(DayColumn)
+export default connect(
+  null,
+  mapDispatchToProps,
+)(DayColumn)

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 { connect } from 'react-redux'
-import { getData, nextDate, prevDate } from '../helpers/cycle-day'
+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
+      <SymptomPageTitle subtitle={subtitle} title={dateToTitle(date)} />
-        date={date}
-        onNextCycleDay={showNextCycleDay}
-        onPrevCycleDay={showPrevCycleDay}
-      />
       <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 { connect } from 'react-redux'
-import { dateToTitle } from '../helpers/format-date'
+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 SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
-  const title = dateToTitle(date)
+  const navigate = (isForward) => {
-
+    const newDate = isForward ? nextDate(date) : prevDate(date)
-  const { getCycleDayNumber } = cycleModule()
+    setDate(newDate)
-  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={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,
+  setDate: PropTypes.func.isRequired,
-  onPrevCycleDay: 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)

lib/notifications.js

@@ -11,8 +11,9 @@ import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from './cycle'
 import nothingChanged from '../db/db-unchanged'
 import store from '../store'
+import { setDate } from '../slices/date'
 
-export default function setupNotifications(navigate, setDate) {
+export default function setupNotifications(navigate) {
   Notification.configure({
     onNotification: (notification) => {
       // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106

slices/date.js

@@ -0,0 +1,19 @@
+import { createSlice } from 'redux-starter-kit'
+import { LocalDate } from '@js-joda/core'
+
+const dateSlice = createSlice({
+  slice: 'date',
+  initialState: LocalDate.now().toString(),
+  reducers: {
+    setDate: (state, action) => action.payload,
+  },
+})
+
+// Extract the action creators object and the reducer
+const { actions, reducer, selectors } = dateSlice
+// Extract and export each action creator by name
+export const { setDate } = actions
+
+export const { getDate } = selectors
+
+export default reducer

store.js

@@ -1,9 +1,11 @@
-import { combineReducers, createStore } from 'redux'
+import { combineReducers, createStore } from "redux"
 
-import navigation from './slices/navigation'
+import date from "./slices/date"
+import navigation from "./slices/navigation"
 
 const reducer = combineReducers({
-  navigation,
+  date,
+  navigation
 })
 
 const store = createStore(reducer)