Use the date from context

components/Home.js

@@ -18,9 +18,11 @@ import {
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { LocalDate } from '@js-joda/core'
 import { useTranslation } from 'react-i18next'
+import { useDate } from '../hooks/useDate'
 
-const Home = ({ navigate, setDate }) => {
+const Home = ({ navigate }) => {
   const { t } = useTranslation()
+  const { setDate } = useDate()
 
   function navigateToCycleDayView() {
     setDate(todayDateString)
@@ -110,7 +112,6 @@ const styles = StyleSheet.create({
 
 Home.propTypes = {
   navigate: PropTypes.func,
-  setDate: PropTypes.func,
 }
 
 export default Home

components/app-wrapper.js

@@ -10,6 +10,8 @@ import AppStatusBar from './common/app-status-bar'
 import AcceptLicense from './AcceptLicense'
 import PasswordPrompt from './password-prompt'
 
+import { DateProvider } from '../hooks/useDate'
+
 export default function AppWrapper() {
   const [isLoading, setIsLoading] = useState(true)
   const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
@@ -47,7 +49,9 @@ export default function AppWrapper() {
       {isDbEncrypted ? (
         <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
       ) : (
-        <App restartApp={() => checkIsDbEncrypted()} />
+        <DateProvider>
+          <App restartApp={() => checkIsDbEncrypted()} />
+        </DateProvider>
       )}
     </>
   )

components/app.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { LocalDate } from '@js-joda/core'
+import { useDate } from '../hooks/useDate'
 
 import Header from './header'
 import Menu from './menu'
@@ -13,7 +13,8 @@ import setupNotifications from '../lib/notifications'
 import { closeDb } from '../db'
 
 const App = ({ restartApp }) => {
-  const [date, setDate] = useState(LocalDate.now().toString())
+  const { setDate } = useDate()
+
   const [currentPage, setCurrentPage] = useState('Home')
   const goBack = () => {
     if (currentPage === 'Home') {
@@ -43,8 +44,6 @@ const App = ({ restartApp }) => {
   const isTemperatureEditView = currentPage === 'TemperatureEditView'
   const headerProps = { navigate: setCurrentPage }
   const pageProps = {
-    date,
-    setDate,
     isTemperatureEditView,
     navigate: setCurrentPage,
   }

components/calendar.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
 
+import { useDate } from '../hooks/useDate'
+
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
 import {
@@ -12,7 +14,8 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-const CalendarView = ({ setDate, navigate }) => {
+const CalendarView = ({ navigate }) => {
+  const { setDate } = useDate()
   const bleedingDays = getBleedingDaysSortedByDate()
   const predictedMenses = cycleModule().getPredictedMenses()
 
@@ -49,7 +52,6 @@ const styles = StyleSheet.create({
 })
 
 CalendarView.propTypes = {
-  setDate: PropTypes.func.isRequired,
   navigate: PropTypes.func.isRequired,
 }
 

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 = ({ navigate }) => {
   const [shouldShowHint, setShouldShowHint] = useState(true)
 
   useEffect(() => {
@@ -84,7 +84,6 @@ const CycleChart = ({ navigate, setDate }) => {
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
-        setDate={setDate}
         dateString={item}
         navigate={navigate}
         symptomHeight={symptomHeight}
@@ -136,7 +135,6 @@ const CycleChart = ({ navigate, setDate }) => {
 
 CycleChart.propTypes = {
   navigate: PropTypes.func,
-  setDate: PropTypes.func,
 }
 
 const styles = StyleSheet.create({

components/chart/day-column.js

@@ -8,6 +8,8 @@ import SymptomCell from './symptom-cell'
 import TemperatureColumn from './temperature-column'
 import CycleDayLabel from './cycle-day-label'
 
+import { useDate } from '../../hooks/useDate'
+
 import {
   symptomColorMethods,
   getTemperatureProps,
@@ -19,13 +21,13 @@ const DayColumn = ({
   dateString,
   chartSymptoms,
   columnHeight,
-  setDate,
   navigate,
   shouldShowTemperatureColumn,
   symptomHeight,
   symptomRowSymptoms,
   xAxisHeight,
 }) => {
+  const { setDate } = useDate()
   const cycleDayData = getCycleDay(dateString)
   let data = {}
 
@@ -105,7 +107,6 @@ DayColumn.propTypes = {
   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,

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

@@ -9,10 +9,13 @@ import SymptomPageTitle from './symptom-page-title'
 import { getCycleDay } from '../../db'
 import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
+import { useDate } from '../../hooks/useDate'
+
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
+const CycleDayOverView = ({ isTemperatureEditView }) => {
+  const { date, setDate } = useDate()
   const cycleDay = getCycleDay(date)
 
   const [editedSymptom, setEditedSymptom] = useState(
@@ -58,8 +61,6 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
 
 CycleDayOverView.propTypes = {
   cycleDay: PropTypes.object,
-  date: PropTypes.string,
-  setDate: PropTypes.func,
   isTemperatureEditView: PropTypes.bool,
 }
 

hooks/useDate.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext, useState } from 'react'
+import PropTypes from 'prop-types'
+import { LocalDate } from '@js-joda/core'
+
+const DateContext = createContext()
+
+export const DateProvider = ({ children }) => {
+  const [date, setDate] = useState(LocalDate.now().toString())
+
+  return (
+    <DateContext.Provider value={{ date, setDate }}>
+      {children}
+    </DateContext.Provider>
+  )
+}
+
+DateProvider.propTypes = {
+  children: PropTypes.node,
+}
+
+export const useDate = () => {
+  const { date, setDate } = useContext(DateContext)
+  return { date, setDate }
+}