Merge branch 'chore/remove-date-usage' into 'main'

Chore/remove date usage

See merge request bloodyhealth/drip!508

components/Home.js

@@ -5,7 +5,6 @@ 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'
@@ -137,16 +136,9 @@ 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)),
   }
 }
 
@@ -155,4 +147,4 @@ Home.propTypes = {
   setDate: PropTypes.func,
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Home)
+export default connect(null, 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,13 +14,14 @@ import { isSettingsView } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { getCycleDay, closeDb } from '../db'
+import { 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,
   }
@@ -33,7 +34,15 @@ class App extends Component {
       this.goBack
     )
 
-    setupNotifications(this.props.navigate)
+    this.state = {
+      date: LocalDate.now().toString(),
+    }
+
+    setupNotifications(this.props.navigate, this.props.setDate)
+  }
+
+  setDate = (date) => {
+    this.setState({ date })
   }
 
   goBack = () => {
@@ -54,7 +63,8 @@ class App extends Component {
   }
 
   render() {
-    const { date, navigation, goBack, restartApp } = this.props
+    const { navigation, goBack, restartApp } = this.props
+    const { date } = this.state
     const { currentPage } = navigation
 
     if (!currentPage) {
@@ -73,8 +83,8 @@ class App extends Component {
     }
 
     const pageProps = {
-      cycleDay: date && getCycleDay(date),
       date,
+      setDate: this.setDate,
       isTemperatureEditView,
     }
 
@@ -96,7 +106,6 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state) => {
   return {
-    date: getDate(state),
     navigation: getNavigation(state),
   }
 }

components/calendar.js

@@ -4,7 +4,6 @@ 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'
@@ -91,7 +90,6 @@ const styles = StyleSheet.create({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
   }
 }

components/chart/chart.js

@@ -45,6 +45,7 @@ class CycleChart extends Component {
   static propTypes = {
     navigate: PropTypes.func,
     end: PropTypes.bool,
+    setDate: PropTypes.func,
   }
 
   constructor(props) {
@@ -98,6 +99,7 @@ class CycleChart extends Component {
   renderColumn = ({ item, index }) => {
     return (
       <DayColumn
+        setDate={this.props.setDate}
         dateString={item}
         index={index}
         navigate={this.props.navigate}

components/chart/day-column.js

@@ -3,7 +3,6 @@ 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'
@@ -131,7 +130,6 @@ class DayColumn extends Component {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
   }
 }

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

@@ -6,31 +6,34 @@ import AppPage from '../common/app-page'
 import SymptomBox from './symptom-box'
 import SymptomPageTitle from './symptom-page-title'
 
-import { connect } from 'react-redux'
-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 { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
-import { general as labels } from '../../i18n/en/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ date, isTemperatureEditView }) => {
+const CycleDayOverView = ({ date, setDate, 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 subtitle={subtitle} title={dateToTitle(date)} />
+      <SymptomPageTitle
+        date={date}
+        onNextCycleDay={showNextCycleDay}
+        onPrevCycleDay={showPrevCycleDay}
+      />
       <View style={styles.container}>
         {SYMPTOMS.map((symptom) => {
           const symptomData =
@@ -38,6 +41,7 @@ const CycleDayOverView = ({ date, isTemperatureEditView }) => {
 
           return (
             <SymptomBox
+              date={date}
               key={symptom}
               symptom={symptom}
               symptomData={symptomData}
@@ -55,6 +59,7 @@ const CycleDayOverView = ({ date, isTemperatureEditView }) => {
 CycleDayOverView.propTypes = {
   cycleDay: PropTypes.object,
   date: PropTypes.string,
+  setDate: PropTypes.func,
   isTemperatureEditView: PropTypes.bool,
 }
 
@@ -67,10 +72,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
+export default CycleDayOverView
-  return {
-    date: getDate(state),
-  }
-}
-
-export default connect(mapStateToProps, null)(CycleDayOverView)

components/cycle-day/symptom-box.js

@@ -7,8 +7,6 @@ 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'
@@ -43,6 +41,7 @@ const SymptomBox = ({
     <>
       {isSymptomEdited && (
         <SymptomEditView
+          date={date}
           symptom={symptom}
           symptomData={symptomData}
           onClose={() => setEditedSymptom('')}
@@ -128,10 +127,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomBox
-  return {
-    date: getDate(state),
-  }
-}
-
-export default connect(mapStateToProps, null)(SymptomBox)

components/cycle-day/symptom-edit-view.js

@@ -1,7 +1,6 @@
 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'
@@ -14,7 +13,6 @@ 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'
 
@@ -168,6 +166,7 @@ class SymptomEditView extends Component {
           </View>
           {symptom === 'temperature' && (
             <Temperature
+              date={this.props.date}
               data={data}
               save={(value, field) => this.onSaveTemperature(value, field)}
             />
@@ -285,10 +284,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomEditView
-  return {
-    date: getDate(state),
-  }
-}
-
-export default connect(mapStateToProps, null)(SymptomEditView)

components/cycle-day/symptom-page-title.js

@@ -5,31 +5,33 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import AppText from '../common/app-text'
 
-import { connect } from 'react-redux'
+import cycleModule from '../../lib/cycle'
-import { getDate, setDate } from '../../slices/date'
+import { dateToTitle } from '../helpers/format-date'
 
-import { nextDate, prevDate } from '../helpers/cycle-day'
+import { general as labels } from '../../i18n/en/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
 
-const SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
+const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
-  const navigate = (isForward) => {
+  const title = dateToTitle(date)
-    const newDate = isForward ? nextDate(date) : prevDate(date)
+
-    setDate(newDate)
+  const { getCycleDayNumber } = cycleModule()
-  }
+  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={() => navigate(false)} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={onPrevCycleDay} 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={() => navigate(true)} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={onNextCycleDay} hitSlop={HIT_SLOP}>
         <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>
     </View>
@@ -38,9 +40,8 @@ const SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
 
 SymptomPageTitle.propTypes = {
   date: PropTypes.string.isRequired,
-  setDate: PropTypes.func.isRequired,
+  onNextCycleDay: PropTypes.func.isRequired,
-  subtitle: PropTypes.string,
+  onPrevCycleDay: PropTypes.func.isRequired,
-  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
@@ -58,16 +59,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomPageTitle
-  return {
-    date: getDate(state),
-  }
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setDate: (date) => dispatch(setDate(date)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/cycle-day/temperature.js

@@ -4,13 +4,12 @@ import PropTypes from 'prop-types'
 import { Keyboard } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker'
 import moment from 'moment'
+import { useTranslation } from 'react-i18next'
 
 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,
@@ -22,6 +21,7 @@ import { temperature as labels } from '../../i18n/en/cycle-day'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 const Temperature = ({ data, date, save }) => {
+  const { t } = useTranslation()
   const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
   const [temperature, setTemperature] = useState(
     formatTemperature(data.value) || getPreviousTemperature(date)
@@ -94,6 +94,7 @@ const Temperature = ({ data, date, save }) => {
           onConfirm={setTime}
           onCancel={() => setIsTimePickerVisible(false)}
           display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          headerTextIOS={t('labels.shared.dateTimePickerTitle')}
         />
       </Segment>
     </React.Fragment>
@@ -122,10 +123,4 @@ Temperature.propTypes = {
   save: PropTypes.func.isRequired,
 }
 
-const mapStateToProps = (state) => {
+export default Temperature
-  return {
-    date: getDate(state),
-  }
-}
-
-export default connect(mapStateToProps, null)(Temperature)

lib/notifications.js

@@ -11,9 +11,8 @@ 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) {
+export default function setupNotifications(navigate, setDate) {
   Notification.configure({
     onNotification: (notification) => {
       // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106

slices/date.js

@@ -1,19 +0,0 @@
-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,11 +1,9 @@
-import { combineReducers, createStore } from "redux"
+import { combineReducers, createStore } from 'redux'
 
-import date from "./slices/date"
+import navigation from './slices/navigation'
-import navigation from "./slices/navigation"
 
 const reducer = combineReducers({
-  date,
+  navigation,
-  navigation
 })
 
 const store = createStore(reducer)