From e2d6387647f2cdba2352ebf60c9f18087494e0aa Mon Sep 17 00:00:00 2001 From: MariaZ Date: Wed, 28 Sep 2022 19:59:17 +0200 Subject: [PATCH] Substitute navigate&setDate props with naviation&route props --- components/Home.js | 20 +++++++++++--------- components/calendar.js | 10 +++++----- components/chart/chart.js | 12 ++++++------ components/chart/day-column.js | 14 ++++++-------- components/cycle-day/cycle-day-overview.js | 17 ++++++++++------- 5 files changed, 38 insertions(+), 35 deletions(-) diff --git a/components/Home.js b/components/Home.js index 820dc22..7a7888d 100644 --- a/components/Home.js +++ b/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() { - setDate(todayDateString) - navigate('CycleDay') - } + useEffect(() => setupNotifications(navigation), []) 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 ( { +const CalendarView = ({ navigation }) => { const bleedingDays = getBleedingDaysSortedByDate() const predictedMenses = cycleModule().getPredictedMenses() const passDateToDayView = ({ dateString }) => { - setDate(dateString) - navigate('CycleDay') + navigation.navigate('CycleDayOverview', { date: dateString }) } const markedDates = Object.assign( @@ -49,8 +48,9 @@ const styles = StyleSheet.create({ }) CalendarView.propTypes = { - setDate: PropTypes.func.isRequired, - navigate: PropTypes.func.isRequired, + navigation: PropTypes.shape({ + navigate: PropTypes.func.isRequired, + }).isRequired, } export default CalendarView diff --git a/components/chart/chart.js b/components/chart/chart.js index 3cdd364..2aee75c 100644 --- a/components/chart/chart.js +++ b/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 ( { const hasDataToDisplay = chartSymptoms.length > 0 if (!hasDataToDisplay) { - return + return } 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({ diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 7d9e0a0..42d4604 100644 --- a/components/chart/day-column.js +++ b/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 ( 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 diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index de5ab0c..fd34b67 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/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, - date: PropTypes.string, - setDate: PropTypes.func, - isTemperatureEditView: PropTypes.bool, + route: PropTypes.shape({ + params: PropTypes.shape({ + date: PropTypes.string, + isTemperatureEditView: PropTypes.bool, + }), + }), } const styles = StyleSheet.create({