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 80ac49f..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' @@ -75,7 +74,7 @@ class CalendarView extends Component { firstDay={1} onDayPress={this.passDateToDayView.bind(this)} markedDates={markedDates} - markingType='custom' + markingType="custom" theme={calendarTheme} // Max amount of months allowed to scroll to the past. pastScrollRange={120} @@ -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 4b9573d..3155d08 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -6,7 +6,7 @@ import { FlatList, PixelRatio, StyleSheet, - View + View, } from 'react-native' import AppLoadingView from '../common/app-loading' @@ -24,7 +24,11 @@ import { navigate } from '../../slices/navigation' import { getCycleDaysSortedByDate } from '../../db' import nothingChanged from '../../db/db-unchanged' -import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage' +import { + getChartFlag, + scaleObservable, + setChartFlag, +} from '../../local-storage' import { makeColumnInfo, nfpLines } from '../helpers/chart' import { @@ -32,7 +36,7 @@ import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_SYMPTOM_HEIGHT_RATIO, CHART_XAXIS_HEIGHT_RATIO, - SYMPTOMS + SYMPTOMS, } from '../../config' import { shared } from '../../i18n/en/labels' import { Colors, Spacing } from '../../styles' @@ -40,7 +44,8 @@ import { Colors, Spacing } from '../../styles' class CycleChart extends Component { static propTypes = { navigate: PropTypes.func, - end: PropTypes.bool + end: PropTypes.bool, + setDate: PropTypes.func, } constructor(props) { @@ -80,12 +85,12 @@ class CycleChart extends Component { prepareSymptomData = () => { this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => { - return this.cycleDaysSortedByDate.some(cycleDay => { - return (symptomName !== 'temperature') && cycleDay[symptomName] + return this.cycleDaysSortedByDate.some((cycleDay) => { + return symptomName !== 'temperature' && cycleDay[symptomName] }) }) this.chartSymptoms = [...this.symptomRowSymptoms] - if (this.cycleDaysSortedByDate.some(day => day.temperature)) { + if (this.cycleDaysSortedByDate.some((day) => day.temperature)) { this.chartSymptoms.push('temperature') this.shouldShowTemperatureColumn = true } @@ -94,6 +99,7 @@ class CycleChart extends Component { renderColumn = ({ item, index }) => { return ( 0 @@ -163,53 +170,52 @@ class CycleChart extends Component { {!hasDataToDisplay && } {hasDataToDisplay && !chartHeight && !chartLoaded && } - {shouldShowHint && chartLoaded && + {shouldShowHint && chartLoaded && ( - } - {hasDataToDisplay && chartLoaded && - !this.shouldShowTemperatureColumn && - - - {shared.noTemperatureWarning} - - - } + )} + {hasDataToDisplay && + chartLoaded && + !this.shouldShowTemperatureColumn && ( + + + {shared.noTemperatureWarning} + + + )} {hasDataToDisplay && ( - {chartHeight && chartLoaded && ( )} - {chartHeight && - item} - initialNumToRender={numberOfColumnsToRender} - windowSize={30} - onLayout={() => this.setState({chartLoaded: true})} - onEndReached={() => this.setState({end: true})} - ListFooterComponent={} - updateCellsBatchingPeriod={800} - contentContainerStyle={{ height: chartHeight }} - /> - } + {chartHeight && ( + item} + initialNumToRender={numberOfColumnsToRender} + windowSize={30} + onLayout={() => this.setState({ chartLoaded: true })} + onEndReached={() => this.setState({ end: true })} + ListFooterComponent={} + updateCellsBatchingPeriod={800} + contentContainerStyle={{ height: chartHeight }} + /> + )} {chartHeight && chartLoaded && ( - {this.shouldShowTemperatureColumn && + {this.shouldShowTemperatureColumn && ( - } + )} )} @@ -223,45 +229,42 @@ class CycleChart extends Component { function LoadingMoreView({ end }) { return ( - {!end && } + {!end && } ) } LoadingMoreView.propTypes = { - end: PropTypes.bool + end: PropTypes.bool, } const styles = StyleSheet.create({ chartArea: { - flexDirection: 'row' + flexDirection: 'row', }, chartContainer: { - flexDirection: 'column' + flexDirection: 'column', }, loadingContainer: { height: '100%', backgroundColor: Colors.turquoiseLight, - justifyContent: 'center' + justifyContent: 'center', }, page: { - marginVertical: Spacing.small + marginVertical: Spacing.small, }, pageContainer: { - paddingHorizontal: Spacing.base + paddingHorizontal: Spacing.base, }, warning: { - padding: Spacing.large - } + padding: Spacing.large, + }, }) const mapDispatchToProps = (dispatch) => { - return({ + return { navigate: (page) => dispatch(navigate(page)), - }) + } } -export default connect( - null, - mapDispatchToProps, -)(CycleChart) +export default connect(null, mapDispatchToProps)(CycleChart) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 7404e53..f260e27 100644 --- a/components/chart/day-column.js +++ b/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' @@ -15,7 +14,7 @@ import CycleDayLabel from './cycle-day-label' import { symptomColorMethods, getTemperatureProps, - isSymptomDataComplete + isSymptomDataComplete, } from '../helpers/chart' class DayColumn extends Component { @@ -40,14 +39,17 @@ class DayColumn extends Component { this.data = {} if (cycleDayData) { - this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => { + this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => { const symptomData = cycleDayData[symptom] if (symptomData && symptom === 'temperature') { - symptomDataToDisplay[symptom] = - getTemperatureProps(symptomData, columnHeight, dateString) + symptomDataToDisplay[symptom] = getTemperatureProps( + symptomData, + columnHeight, + dateString + ) } else { - if (symptomData && ! symptomData.exclude) { + if (symptomData && !symptomData.exclude) { // if symptomColorMethods entry doesn't exist for given symptom, // use 'default' const getSymptomColorIndex = @@ -78,12 +80,13 @@ class DayColumn extends Component { } render() { - const { columnHeight, + const { + columnHeight, dateString, shouldShowTemperatureColumn, symptomHeight, symptomRowSymptoms, - xAxisHeight + xAxisHeight, } = this.props return ( @@ -91,22 +94,22 @@ class DayColumn extends Component { onPress={() => this.onDaySelect(dateString)} activeOpacity={1} > + {shouldShowTemperatureColumn && ( + + )} - {shouldShowTemperatureColumn && } + - - - { symptomRowSymptoms.map((symptom, i) => { - const hasSymptomData = - Object.prototype.hasOwnProperty.call(this.data, symptom) + {symptomRowSymptoms.map((symptom, i) => { + const hasSymptomData = Object.prototype.hasOwnProperty.call( + this.data, + symptom + ) return ( ) - } - )} - + /> + ) + })} ) } } const mapDispatchToProps = (dispatch) => { - return({ - setDate: (date) => dispatch(setDate(date)), + return { navigate: (page) => dispatch(navigate(page)), - }) + } } -export default connect( - null, - mapDispatchToProps, -)(DayColumn) +export default connect(null, mapDispatchToProps)(DayColumn) 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 8df7a4c..26b18bf 100644 --- a/components/cycle-day/temperature.js +++ b/components/cycle-day/temperature.js @@ -10,8 +10,6 @@ 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, @@ -125,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)