Substitute navigate&setDate props with naviation&route props

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,
-  setDate: PropTypes.func,
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 const styles = StyleSheet.create({

components/chart/day-column.js

@@ -19,8 +19,7 @@ const DayColumn = ({
   dateString,
   chartSymptoms,
   columnHeight,
-  setDate,
-  navigate,
+  navigation,
   shouldShowTemperatureColumn,
   symptomHeight,
   symptomRowSymptoms,
@@ -60,10 +59,8 @@ const DayColumn = ({
     columnHeight
   )
 
-  const onDaySelect = (date) => {
-    setDate(date)
-    navigate('CycleDay')
-  }
+  const onDaySelect = (date) =>
+    navigation.navigate('CycleDayOverview', { date })
 
   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