diff --git a/components/Home.js b/components/Home.js index 16f0d96..97ea60b 100644 --- a/components/Home.js +++ b/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) diff --git a/components/app.js b/components/app.js index 83afdf9..9613f19 100644 --- a/components/app.js +++ b/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), } } diff --git a/components/calendar.js b/components/calendar.js index dcff78d..9cebb66 100644 --- a/components/calendar.js +++ b/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)), } } diff --git a/components/chart/chart.js b/components/chart/chart.js index 14e1afd..3155d08 100644 --- a/components/chart/chart.js +++ b/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 ( { return { - setDate: (date) => dispatch(setDate(date)), navigate: (page) => dispatch(navigate(page)), } } diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index 932531b..de5ab0c 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/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 ( - + {SYMPTOMS.map((symptom) => { const symptomData = @@ -38,6 +41,7 @@ const CycleDayOverView = ({ date, isTemperatureEditView }) => { return ( { 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) => { - return { - date: getDate(state), - } -} - -export default connect(mapStateToProps, null)(CycleDayOverView) +export default CycleDayOverView diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index 837c89b..f3f8842 100644 --- a/components/cycle-day/symptom-box.js +++ b/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 && ( setEditedSymptom('')} @@ -128,10 +127,4 @@ const styles = StyleSheet.create({ }, }) -const mapStateToProps = (state) => { - return { - date: getDate(state), - } -} - -export default connect(mapStateToProps, null)(SymptomBox) +export default SymptomBox diff --git a/components/cycle-day/symptom-edit-view.js b/components/cycle-day/symptom-edit-view.js index a5efaff..710e10b 100644 --- a/components/cycle-day/symptom-edit-view.js +++ b/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 { {symptom === 'temperature' && ( this.onSaveTemperature(value, field)} /> @@ -285,10 +284,4 @@ const styles = StyleSheet.create({ }, }) -const mapStateToProps = (state) => { - return { - date: getDate(state), - } -} - -export default connect(mapStateToProps, null)(SymptomEditView) +export default SymptomEditView diff --git a/components/cycle-day/symptom-page-title.js b/components/cycle-day/symptom-page-title.js index 62dbc46..ecf2b15 100644 --- a/components/cycle-day/symptom-page-title.js +++ b/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 { getDate, setDate } from '../../slices/date' +import cycleModule from '../../lib/cycle' +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 navigate = (isForward) => { - const newDate = isForward ? nextDate(date) : prevDate(date) - setDate(newDate) - } +const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => { + const title = dateToTitle(date) + + const { getCycleDayNumber } = cycleModule() + const cycleDayNumber = getCycleDayNumber(date) + const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}` + const formattedTitle = title.length > 21 ? title.substring(0, 18) + '...' : title return ( - navigate(false)} hitSlop={HIT_SLOP}> + {formattedTitle} {subtitle && {subtitle}} - navigate(true)} hitSlop={HIT_SLOP}> + @@ -38,9 +40,8 @@ const SymptomPageTitle = ({ date, setDate, subtitle, title }) => { SymptomPageTitle.propTypes = { date: PropTypes.string.isRequired, - setDate: PropTypes.func.isRequired, - subtitle: PropTypes.string, - title: PropTypes.string, + onNextCycleDay: PropTypes.func.isRequired, + onPrevCycleDay: PropTypes.func.isRequired, } const styles = StyleSheet.create({ @@ -58,16 +59,4 @@ const styles = StyleSheet.create({ }, }) -const mapStateToProps = (state) => { - return { - date: getDate(state), - } -} - -const mapDispatchToProps = (dispatch) => { - return { - setDate: (date) => dispatch(setDate(date)), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle) +export default SymptomPageTitle diff --git a/components/cycle-day/temperature.js b/components/cycle-day/temperature.js index af1e99e..26b18bf 100644 --- a/components/cycle-day/temperature.js +++ b/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')} /> @@ -122,10 +123,4 @@ Temperature.propTypes = { save: PropTypes.func.isRequired, } -const mapStateToProps = (state) => { - return { - date: getDate(state), - } -} - -export default connect(mapStateToProps, null)(Temperature) +export default Temperature diff --git a/lib/notifications.js b/lib/notifications.js index 3be60f8..53328e8 100644 --- a/lib/notifications.js +++ b/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 diff --git a/slices/date.js b/slices/date.js deleted file mode 100644 index 19f1076..0000000 --- a/slices/date.js +++ /dev/null @@ -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 diff --git a/store.js b/store.js index 7887652..8471dd9 100644 --- a/store.js +++ b/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)