Substitute navigate&setDate props with naviation&route props

components/Home.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import moment from 'moment'
@@ -10,6 +10,7 @@ import Footnote from './common/Footnote'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import setupNotifications from '../lib/notifications'
 import {
   determinePredictionText,
   formatWithOrdinalSuffix,
@@ -19,13 +20,10 @@ import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { LocalDate } from '@js-joda/core'
 import { useTranslation } from 'react-i18next'
 
-const Home = ({ navigate, setDate }) => {
+const Home = ({ navigation }) => {
   const { t } = useTranslation()
 
-  function navigateToCycleDayView() {
+  useEffect(() => setupNotifications(navigation), [])
-    setDate(todayDateString)
-    navigate('CycleDay')
-  }
 
   const todayDateString = LocalDate.now().toString()
   const { getCycleDayNumber, getPredictedMenses } = cycleModule()
@@ -33,11 +31,14 @@ const Home = ({ navigate, setDate }) => {
   const { status, phase, statusText } =
     getFertilityStatusForDay(todayDateString)
   const prediction = determinePredictionText(getPredictedMenses(), t)
-
   const cycleDayText = cycleDayNumber
     ? formatWithOrdinalSuffix(cycleDayNumber)
     : ''
 
+  function navigateToCycleDayView() {
+    navigation.navigate('CycleDayOverview', { date: todayDateString })
+  }
+
   return (
     <ScrollView
       style={styles.container}
@@ -109,8 +110,9 @@ const styles = StyleSheet.create({
 })
 
 Home.propTypes = {
-  navigate: PropTypes.func,
+  navigation: PropTypes.shape({
-  setDate: PropTypes.func,
+    navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 export default Home

components/calendar.js

@@ -12,13 +12,12 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-const CalendarView = ({ setDate, navigate }) => {
+const CalendarView = ({ navigation }) => {
   const bleedingDays = getBleedingDaysSortedByDate()
   const predictedMenses = cycleModule().getPredictedMenses()
 
   const passDateToDayView = ({ dateString }) => {
-    setDate(dateString)
+    navigation.navigate('CycleDayOverview', { date: dateString })
-    navigate('CycleDay')
   }
 
   const markedDates = Object.assign(
@@ -49,8 +48,9 @@ const styles = StyleSheet.create({
 })
 
 CalendarView.propTypes = {
-  setDate: PropTypes.func.isRequired,
+  navigation: PropTypes.shape({
     navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 export default CalendarView

components/chart/chart.js

@@ -28,7 +28,7 @@ import { Spacing } from '../../styles'
 const getSymptomsFromCycleDays = (cycleDays) =>
   SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
 
-const CycleChart = ({ navigate, setDate }) => {
+const CycleChart = ({ navigation }) => {
   const [shouldShowHint, setShouldShowHint] = useState(true)
 
   useEffect(() => {
@@ -84,9 +84,8 @@ const CycleChart = ({ navigate, setDate }) => {
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
-        setDate={setDate}
         dateString={item}
-        navigate={navigate}
+        navigation={navigation}
         symptomHeight={symptomHeight}
         columnHeight={columnHeight}
         symptomRowSymptoms={symptomRowSymptoms}
@@ -100,7 +99,7 @@ const CycleChart = ({ navigate, setDate }) => {
   const hasDataToDisplay = chartSymptoms.length > 0
 
   if (!hasDataToDisplay) {
-    return <NoData navigate={navigate} />
+    return <NoData />
   }
 
   return (
@@ -135,8 +134,9 @@ const CycleChart = ({ navigate, setDate }) => {
 }
 
 CycleChart.propTypes = {
-  navigate: PropTypes.func,
+  navigation: PropTypes.shape({
-  setDate: PropTypes.func,
+    navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 const styles = StyleSheet.create({

components/chart/day-column.js

@@ -19,8 +19,7 @@ const DayColumn = ({
   dateString,
   chartSymptoms,
   columnHeight,
-  setDate,
+  navigation,
-  navigate,
   shouldShowTemperatureColumn,
   symptomHeight,
   symptomRowSymptoms,
@@ -60,10 +59,8 @@ const DayColumn = ({
     columnHeight
   )
 
-  const onDaySelect = (date) => {
+  const onDaySelect = (date) =>
-    setDate(date)
+    navigation.navigate('CycleDayOverview', { date })
-    navigate('CycleDay')
-  }
 
   return (
     <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
@@ -104,12 +101,13 @@ DayColumn.propTypes = {
   dateString: PropTypes.string.isRequired,
   chartSymptoms: PropTypes.array,
   columnHeight: PropTypes.number.isRequired,
-  navigate: PropTypes.func.isRequired,
-  setDate: PropTypes.func.isRequired,
   shouldShowTemperatureColumn: PropTypes.bool,
   symptomHeight: PropTypes.number.isRequired,
   symptomRowSymptoms: PropTypes.array,
   xAxisHeight: PropTypes.number,
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 export default DayColumn

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

@@ -12,7 +12,8 @@ import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
+const CycleDayOverView = ({ route }) => {
+  const { date, isTemperatureEditView } = route.params
   const cycleDay = getCycleDay(date)
 
   const [editedSymptom, setEditedSymptom] = useState(
@@ -20,11 +21,11 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
   )
 
   const showNextCycleDay = () => {
-    setDate(nextDate(date))
+    //setDate(nextDate(date))
   }
 
   const showPrevCycleDay = () => {
-    setDate(prevDate(date))
+    //setDate(prevDate(date))
   }
 
   return (
@@ -57,10 +58,12 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
 }
 
 CycleDayOverView.propTypes = {
-  cycleDay: PropTypes.object,
+  route: PropTypes.shape({
+    params: PropTypes.shape({
       date: PropTypes.string,
-  setDate: PropTypes.func,
       isTemperatureEditView: PropTypes.bool,
+    }),
+  }),
 }
 
 const styles = StyleSheet.create({