Chore/cleanup date usage

This commit is contained in:
Sofiya Tepikin
2022-08-19 15:27:20 +00:00
parent 505584f1eb
commit 6446073125
13 changed files with 156 additions and 212 deletions
+1 -9
View File
@@ -5,7 +5,6 @@ import moment from 'moment'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { navigate } from '../slices/navigation' import { navigate } from '../slices/navigation'
import { getDate, setDate } from '../slices/date'
import AppText from './common/app-text' import AppText from './common/app-text'
import Button from './common/button' import Button from './common/button'
@@ -137,16 +136,9 @@ const styles = StyleSheet.create({
}, },
}) })
const mapStateToProps = (state) => {
return {
date: getDate(state),
}
}
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
navigate: (page) => dispatch(navigate(page)), navigate: (page) => dispatch(navigate(page)),
setDate: (date) => dispatch(setDate(date)),
} }
} }
@@ -155,4 +147,4 @@ Home.propTypes = {
setDate: PropTypes.func, setDate: PropTypes.func,
} }
export default connect(mapStateToProps, mapDispatchToProps)(Home) export default connect(null, mapDispatchToProps)(Home)
+15 -6
View File
@@ -3,8 +3,8 @@ import { BackHandler, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { LocalDate } from '@js-joda/core'
import { getDate } from '../slices/date'
import { getNavigation, navigate, goBack } from '../slices/navigation' import { getNavigation, navigate, goBack } from '../slices/navigation'
import Header from './header' import Header from './header'
@@ -14,13 +14,14 @@ import { isSettingsView } from './pages'
import { headerTitles } from '../i18n/en/labels' import { headerTitles } from '../i18n/en/labels'
import setupNotifications from '../lib/notifications' import setupNotifications from '../lib/notifications'
import { getCycleDay, closeDb } from '../db' import { closeDb } from '../db'
class App extends Component { class App extends Component {
static propTypes = { static propTypes = {
date: PropTypes.string, date: PropTypes.string,
navigation: PropTypes.object.isRequired, navigation: PropTypes.object.isRequired,
navigate: PropTypes.func, navigate: PropTypes.func,
setDate: PropTypes.func,
goBack: PropTypes.func, goBack: PropTypes.func,
restartApp: PropTypes.func, restartApp: PropTypes.func,
} }
@@ -33,7 +34,15 @@ class App extends Component {
this.goBack 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 = () => { goBack = () => {
@@ -54,7 +63,8 @@ class App extends Component {
} }
render() { render() {
const { date, navigation, goBack, restartApp } = this.props const { navigation, goBack, restartApp } = this.props
const { date } = this.state
const { currentPage } = navigation const { currentPage } = navigation
if (!currentPage) { if (!currentPage) {
@@ -73,8 +83,8 @@ class App extends Component {
} }
const pageProps = { const pageProps = {
cycleDay: date && getCycleDay(date),
date, date,
setDate: this.setDate,
isTemperatureEditView, isTemperatureEditView,
} }
@@ -96,7 +106,6 @@ const styles = StyleSheet.create({
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
date: getDate(state),
navigation: getNavigation(state), navigation: getNavigation(state),
} }
} }
+1 -3
View File
@@ -4,7 +4,6 @@ import { StyleSheet, View } from 'react-native'
import { CalendarList } from 'react-native-calendars' import { CalendarList } from 'react-native-calendars'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { setDate } from '../slices/date'
import { navigate } from '../slices/navigation' import { navigate } from '../slices/navigation'
import { getBleedingDaysSortedByDate } from '../db' import { getBleedingDaysSortedByDate } from '../db'
@@ -75,7 +74,7 @@ class CalendarView extends Component {
firstDay={1} firstDay={1}
onDayPress={this.passDateToDayView.bind(this)} onDayPress={this.passDateToDayView.bind(this)}
markedDates={markedDates} markedDates={markedDates}
markingType='custom' markingType="custom"
theme={calendarTheme} theme={calendarTheme}
// Max amount of months allowed to scroll to the past. // Max amount of months allowed to scroll to the past.
pastScrollRange={120} pastScrollRange={120}
@@ -91,7 +90,6 @@ const styles = StyleSheet.create({
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
setDate: (date) => dispatch(setDate(date)),
navigate: (page) => dispatch(navigate(page)), navigate: (page) => dispatch(navigate(page)),
} }
} }
+48 -45
View File
@@ -6,7 +6,7 @@ import {
FlatList, FlatList,
PixelRatio, PixelRatio,
StyleSheet, StyleSheet,
View View,
} from 'react-native' } from 'react-native'
import AppLoadingView from '../common/app-loading' import AppLoadingView from '../common/app-loading'
@@ -24,7 +24,11 @@ import { navigate } from '../../slices/navigation'
import { getCycleDaysSortedByDate } from '../../db' import { getCycleDaysSortedByDate } from '../../db'
import nothingChanged from '../../db/db-unchanged' 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 { makeColumnInfo, nfpLines } from '../helpers/chart'
import { import {
@@ -32,7 +36,7 @@ import {
CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH,
CHART_SYMPTOM_HEIGHT_RATIO, CHART_SYMPTOM_HEIGHT_RATIO,
CHART_XAXIS_HEIGHT_RATIO, CHART_XAXIS_HEIGHT_RATIO,
SYMPTOMS SYMPTOMS,
} from '../../config' } from '../../config'
import { shared } from '../../i18n/en/labels' import { shared } from '../../i18n/en/labels'
import { Colors, Spacing } from '../../styles' import { Colors, Spacing } from '../../styles'
@@ -40,7 +44,8 @@ import { Colors, Spacing } from '../../styles'
class CycleChart extends Component { class CycleChart extends Component {
static propTypes = { static propTypes = {
navigate: PropTypes.func, navigate: PropTypes.func,
end: PropTypes.bool end: PropTypes.bool,
setDate: PropTypes.func,
} }
constructor(props) { constructor(props) {
@@ -80,12 +85,12 @@ class CycleChart extends Component {
prepareSymptomData = () => { prepareSymptomData = () => {
this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => { this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
return this.cycleDaysSortedByDate.some(cycleDay => { return this.cycleDaysSortedByDate.some((cycleDay) => {
return (symptomName !== 'temperature') && cycleDay[symptomName] return symptomName !== 'temperature' && cycleDay[symptomName]
}) })
}) })
this.chartSymptoms = [...this.symptomRowSymptoms] this.chartSymptoms = [...this.symptomRowSymptoms]
if (this.cycleDaysSortedByDate.some(day => day.temperature)) { if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
this.chartSymptoms.push('temperature') this.chartSymptoms.push('temperature')
this.shouldShowTemperatureColumn = true this.shouldShowTemperatureColumn = true
} }
@@ -94,6 +99,7 @@ class CycleChart extends Component {
renderColumn = ({ item, index }) => { renderColumn = ({ item, index }) => {
return ( return (
<DayColumn <DayColumn
setDate={this.props.setDate}
dateString={item} dateString={item}
index={index} index={index}
navigate={this.props.navigate} navigate={this.props.navigate}
@@ -114,15 +120,16 @@ class CycleChart extends Component {
this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
const remainingHeight = height * 0.7 - this.xAxisHeight const remainingHeight = height * 0.7 - this.xAxisHeight
this.symptomHeight = PixelRatio.roundToNearestPixel( this.symptomHeight = PixelRatio.roundToNearestPixel(
remainingHeight remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
* CHART_SYMPTOM_HEIGHT_RATIO
) )
this.symptomRowHeight = PixelRatio.roundToNearestPixel( this.symptomRowHeight =
PixelRatio.roundToNearestPixel(
this.symptomRowSymptoms.length * this.symptomHeight this.symptomRowSymptoms.length * this.symptomHeight
) + CHART_GRID_LINE_HORIZONTAL_WIDTH ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
this.columnHeight = remainingHeight - this.symptomRowHeight this.columnHeight = remainingHeight - this.symptomRowHeight
const chartHeight = this.shouldShowTemperatureColumn ? const chartHeight = this.shouldShowTemperatureColumn
height * 0.7 : (this.symptomRowHeight + this.xAxisHeight) ? height * 0.7
: this.symptomRowHeight + this.xAxisHeight
const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH) const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
const columns = makeColumnInfo() const columns = makeColumnInfo()
@@ -131,7 +138,7 @@ class CycleChart extends Component {
updateListeners(dataUpdateHandler) { updateListeners(dataUpdateHandler) {
// remove existing listeners // remove existing listeners
if(this.handleDbChange) { if (this.handleDbChange) {
this.cycleDaysSortedByDate.removeListener(this.handleDbChange) this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
} }
if (this.removeObvListener) this.removeObvListener() if (this.removeObvListener) this.removeObvListener()
@@ -150,7 +157,7 @@ class CycleChart extends Component {
chartHeight, chartHeight,
chartLoaded, chartLoaded,
shouldShowHint, shouldShowHint,
numberOfColumnsToRender numberOfColumnsToRender,
} = this.state } = this.state
const hasDataToDisplay = this.chartSymptoms.length > 0 const hasDataToDisplay = this.chartSymptoms.length > 0
@@ -163,53 +170,52 @@ class CycleChart extends Component {
{!hasDataToDisplay && <NoData />} {!hasDataToDisplay && <NoData />}
{hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />} {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
<View style={styles.chartContainer}> <View style={styles.chartContainer}>
{shouldShowHint && chartLoaded && {shouldShowHint && chartLoaded && (
<Tutorial onClose={this.setShouldShowHint} /> <Tutorial onClose={this.setShouldShowHint} />
} )}
{hasDataToDisplay && chartLoaded && {hasDataToDisplay &&
!this.shouldShowTemperatureColumn && chartLoaded &&
!this.shouldShowTemperatureColumn && (
<View style={styles.centerItem}> <View style={styles.centerItem}>
<AppText style={styles.warning}> <AppText style={styles.warning}>
{shared.noTemperatureWarning} {shared.noTemperatureWarning}
</AppText> </AppText>
</View> </View>
} )}
{hasDataToDisplay && ( {hasDataToDisplay && (
<View style={styles.chartArea}> <View style={styles.chartArea}>
{chartHeight && chartLoaded && ( {chartHeight && chartLoaded && (
<YAxis <YAxis
height={this.columnHeight} height={this.columnHeight}
symptomsToDisplay={this.symptomRowSymptoms} symptomsToDisplay={this.symptomRowSymptoms}
symptomsSectionHeight={this.symptomRowHeight} symptomsSectionHeight={this.symptomRowHeight}
shouldShowTemperatureColumn= shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
{this.shouldShowTemperatureColumn}
xAxisHeight={this.xAxisHeight} xAxisHeight={this.xAxisHeight}
/> />
)} )}
{chartHeight && {chartHeight && (
<FlatList <FlatList
horizontal={true} horizontal={true}
inverted={true} inverted={true}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
data={this.state.columns} data={this.state.columns}
renderItem={this.renderColumn} renderItem={this.renderColumn}
keyExtractor={item => item} keyExtractor={(item) => item}
initialNumToRender={numberOfColumnsToRender} initialNumToRender={numberOfColumnsToRender}
windowSize={30} windowSize={30}
onLayout={() => this.setState({chartLoaded: true})} onLayout={() => this.setState({ chartLoaded: true })}
onEndReached={() => this.setState({end: true})} onEndReached={() => this.setState({ end: true })}
ListFooterComponent={<LoadingMoreView end={this.state.end}/>} ListFooterComponent={<LoadingMoreView end={this.state.end} />}
updateCellsBatchingPeriod={800} updateCellsBatchingPeriod={800}
contentContainerStyle={{ height: chartHeight }} contentContainerStyle={{ height: chartHeight }}
/> />
} )}
{chartHeight && chartLoaded && ( {chartHeight && chartLoaded && (
<React.Fragment> <React.Fragment>
{this.shouldShowTemperatureColumn && {this.shouldShowTemperatureColumn && (
<HorizontalGrid height={this.columnHeight} /> <HorizontalGrid height={this.columnHeight} />
} )}
</React.Fragment> </React.Fragment>
)} )}
</View> </View>
@@ -223,45 +229,42 @@ class CycleChart extends Component {
function LoadingMoreView({ end }) { function LoadingMoreView({ end }) {
return ( return (
<View style={styles.loadingContainer}> <View style={styles.loadingContainer}>
{!end && <ActivityIndicator size={'large'} color={Colors.orange}/>} {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
</View> </View>
) )
} }
LoadingMoreView.propTypes = { LoadingMoreView.propTypes = {
end: PropTypes.bool end: PropTypes.bool,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
chartArea: { chartArea: {
flexDirection: 'row' flexDirection: 'row',
}, },
chartContainer: { chartContainer: {
flexDirection: 'column' flexDirection: 'column',
}, },
loadingContainer: { loadingContainer: {
height: '100%', height: '100%',
backgroundColor: Colors.turquoiseLight, backgroundColor: Colors.turquoiseLight,
justifyContent: 'center' justifyContent: 'center',
}, },
page: { page: {
marginVertical: Spacing.small marginVertical: Spacing.small,
}, },
pageContainer: { pageContainer: {
paddingHorizontal: Spacing.base paddingHorizontal: Spacing.base,
}, },
warning: { warning: {
padding: Spacing.large padding: Spacing.large,
} },
}) })
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return({ return {
navigate: (page) => dispatch(navigate(page)), navigate: (page) => dispatch(navigate(page)),
}) }
} }
export default connect( export default connect(null, mapDispatchToProps)(CycleChart)
null,
mapDispatchToProps,
)(CycleChart)
+27 -29
View File
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import { TouchableOpacity } from 'react-native' import { TouchableOpacity } from 'react-native'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { setDate } from '../../slices/date'
import { navigate } from '../../slices/navigation' import { navigate } from '../../slices/navigation'
import { getCycleDay } from '../../db' import { getCycleDay } from '../../db'
@@ -15,7 +14,7 @@ import CycleDayLabel from './cycle-day-label'
import { import {
symptomColorMethods, symptomColorMethods,
getTemperatureProps, getTemperatureProps,
isSymptomDataComplete isSymptomDataComplete,
} from '../helpers/chart' } from '../helpers/chart'
class DayColumn extends Component { class DayColumn extends Component {
@@ -40,14 +39,17 @@ class DayColumn extends Component {
this.data = {} this.data = {}
if (cycleDayData) { if (cycleDayData) {
this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => { this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
const symptomData = cycleDayData[symptom] const symptomData = cycleDayData[symptom]
if (symptomData && symptom === 'temperature') { if (symptomData && symptom === 'temperature') {
symptomDataToDisplay[symptom] = symptomDataToDisplay[symptom] = getTemperatureProps(
getTemperatureProps(symptomData, columnHeight, dateString) symptomData,
columnHeight,
dateString
)
} else { } else {
if (symptomData && ! symptomData.exclude) { if (symptomData && !symptomData.exclude) {
// if symptomColorMethods entry doesn't exist for given symptom, // if symptomColorMethods entry doesn't exist for given symptom,
// use 'default' // use 'default'
const getSymptomColorIndex = const getSymptomColorIndex =
@@ -78,12 +80,13 @@ class DayColumn extends Component {
} }
render() { render() {
const { columnHeight, const {
columnHeight,
dateString, dateString,
shouldShowTemperatureColumn, shouldShowTemperatureColumn,
symptomHeight, symptomHeight,
symptomRowSymptoms, symptomRowSymptoms,
xAxisHeight xAxisHeight,
} = this.props } = this.props
return ( return (
@@ -91,22 +94,22 @@ class DayColumn extends Component {
onPress={() => this.onDaySelect(dateString)} onPress={() => this.onDaySelect(dateString)}
activeOpacity={1} activeOpacity={1}
> >
{shouldShowTemperatureColumn && (
{shouldShowTemperatureColumn && <TemperatureColumn <TemperatureColumn
horizontalLinePosition={this.fhmAndLtl.drawLtlAt} horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
isVerticalLine={this.fhmAndLtl.drawFhmLine} isVerticalLine={this.fhmAndLtl.drawFhmLine}
data={this.data && this.data.temperature} data={this.data && this.data.temperature}
columnHeight={columnHeight} columnHeight={columnHeight}
/>}
<CycleDayLabel
height={xAxisHeight}
date={dateString}
/> />
)}
{ symptomRowSymptoms.map((symptom, i) => { <CycleDayLabel height={xAxisHeight} date={dateString} />
const hasSymptomData =
Object.prototype.hasOwnProperty.call(this.data, symptom) {symptomRowSymptoms.map((symptom, i) => {
const hasSymptomData = Object.prototype.hasOwnProperty.call(
this.data,
symptom
)
return ( return (
<SymptomCell <SymptomCell
index={i} index={i}
@@ -117,23 +120,18 @@ class DayColumn extends Component {
hasSymptomData && isSymptomDataComplete(symptom, dateString) hasSymptomData && isSymptomDataComplete(symptom, dateString)
} }
height={symptomHeight} height={symptomHeight}
/>) />
} )
)} })}
</TouchableOpacity> </TouchableOpacity>
) )
} }
} }
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return({ return {
setDate: (date) => dispatch(setDate(date)),
navigate: (page) => dispatch(navigate(page)), navigate: (page) => dispatch(navigate(page)),
}) }
} }
export default connect( export default connect(null, mapDispatchToProps)(DayColumn)
null,
mapDispatchToProps,
)(DayColumn)
+18 -19
View File
@@ -6,31 +6,34 @@ import AppPage from '../common/app-page'
import SymptomBox from './symptom-box' import SymptomBox from './symptom-box'
import SymptomPageTitle from './symptom-page-title' 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 { 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 { Spacing } from '../../styles'
import { SYMPTOMS } from '../../config' import { SYMPTOMS } from '../../config'
const CycleDayOverView = ({ date, isTemperatureEditView }) => { const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
const cycleDay = getCycleDay(date) const cycleDay = getCycleDay(date)
const { getCycleDayNumber } = cycleModule()
const cycleDayNumber = getCycleDayNumber(date)
const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
const [editedSymptom, setEditedSymptom] = useState( const [editedSymptom, setEditedSymptom] = useState(
isTemperatureEditView ? 'temperature' : '' isTemperatureEditView ? 'temperature' : ''
) )
const showNextCycleDay = () => {
setDate(nextDate(date))
}
const showPrevCycleDay = () => {
setDate(prevDate(date))
}
return ( return (
<AppPage> <AppPage>
<SymptomPageTitle subtitle={subtitle} title={dateToTitle(date)} /> <SymptomPageTitle
date={date}
onNextCycleDay={showNextCycleDay}
onPrevCycleDay={showPrevCycleDay}
/>
<View style={styles.container}> <View style={styles.container}>
{SYMPTOMS.map((symptom) => { {SYMPTOMS.map((symptom) => {
const symptomData = const symptomData =
@@ -38,6 +41,7 @@ const CycleDayOverView = ({ date, isTemperatureEditView }) => {
return ( return (
<SymptomBox <SymptomBox
date={date}
key={symptom} key={symptom}
symptom={symptom} symptom={symptom}
symptomData={symptomData} symptomData={symptomData}
@@ -55,6 +59,7 @@ const CycleDayOverView = ({ date, isTemperatureEditView }) => {
CycleDayOverView.propTypes = { CycleDayOverView.propTypes = {
cycleDay: PropTypes.object, cycleDay: PropTypes.object,
date: PropTypes.string, date: PropTypes.string,
setDate: PropTypes.func,
isTemperatureEditView: PropTypes.bool, 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)
+2 -9
View File
@@ -7,8 +7,6 @@ import AppText from '../common/app-text'
import DripIcon from '../../assets/drip-icons' import DripIcon from '../../assets/drip-icons'
import SymptomEditView from './symptom-edit-view' import SymptomEditView from './symptom-edit-view'
import { connect } from 'react-redux'
import { getDate } from '../../slices/date'
import { isDateInFuture } from '../helpers/cycle-day' import { isDateInFuture } from '../helpers/cycle-day'
import { Colors, Sizes, Spacing } from '../../styles' import { Colors, Sizes, Spacing } from '../../styles'
@@ -43,6 +41,7 @@ const SymptomBox = ({
<> <>
{isSymptomEdited && ( {isSymptomEdited && (
<SymptomEditView <SymptomEditView
date={date}
symptom={symptom} symptom={symptom}
symptomData={symptomData} symptomData={symptomData}
onClose={() => setEditedSymptom('')} 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)
+2 -9
View File
@@ -1,7 +1,6 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Dimensions, ScrollView, StyleSheet, View } from 'react-native' import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
import { connect } from 'react-redux'
import AppModal from '../common/app-modal' import AppModal from '../common/app-modal'
import AppSwitch from '../common/app-switch' import AppSwitch from '../common/app-switch'
@@ -14,7 +13,6 @@ import SelectBoxGroup from './select-box-group'
import SelectTabGroup from './select-tab-group' import SelectTabGroup from './select-tab-group'
import Temperature from './temperature' import Temperature from './temperature'
import { getDate } from '../../slices/date'
import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day' import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
import { showToast } from '../helpers/general' import { showToast } from '../helpers/general'
@@ -168,6 +166,7 @@ class SymptomEditView extends Component {
</View> </View>
{symptom === 'temperature' && ( {symptom === 'temperature' && (
<Temperature <Temperature
date={this.props.date}
data={data} data={data}
save={(value, field) => this.onSaveTemperature(value, field)} 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)
+15 -26
View File
@@ -5,31 +5,33 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
import AppIcon from '../common/app-icon' import AppIcon from '../common/app-icon'
import AppText from '../common/app-text' 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 { Colors, Containers, Spacing, Typography } from '../../styles'
import { HIT_SLOP } from '../../config' 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 = const formattedTitle =
title.length > 21 ? title.substring(0, 18) + '...' : title title.length > 21 ? title.substring(0, 18) + '...' : title
return ( return (
<View style={styles.container}> <View style={styles.container}>
<TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}> <TouchableOpacity onPress={onPrevCycleDay} hitSlop={HIT_SLOP}>
<AppIcon name="chevron-left" color={Colors.orange} /> <AppIcon name="chevron-left" color={Colors.orange} />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.textContainer}> <View style={styles.textContainer}>
<AppText style={styles.title}>{formattedTitle}</AppText> <AppText style={styles.title}>{formattedTitle}</AppText>
{subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>} {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
</View> </View>
<TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}> <TouchableOpacity onPress={onNextCycleDay} hitSlop={HIT_SLOP}>
<AppIcon name="chevron-right" color={Colors.orange} /> <AppIcon name="chevron-right" color={Colors.orange} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@@ -38,9 +40,8 @@ const SymptomPageTitle = ({ date, setDate, subtitle, title }) => {
SymptomPageTitle.propTypes = { SymptomPageTitle.propTypes = {
date: PropTypes.string.isRequired, 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({ 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)
+1 -9
View File
@@ -10,8 +10,6 @@ import AppText from '../common/app-text'
import AppTextInput from '../common/app-text-input' import AppTextInput from '../common/app-text-input'
import Segment from '../common/segment' import Segment from '../common/segment'
import { connect } from 'react-redux'
import { getDate } from '../../slices/date'
import { import {
getTemperatureOutOfRangeMessage, getTemperatureOutOfRangeMessage,
getPreviousTemperature, getPreviousTemperature,
@@ -125,10 +123,4 @@ Temperature.propTypes = {
save: PropTypes.func.isRequired, save: PropTypes.func.isRequired,
} }
const mapStateToProps = (state) => { export default Temperature
return {
date: getDate(state),
}
}
export default connect(mapStateToProps, null)(Temperature)
+1 -2
View File
@@ -11,9 +11,8 @@ import { getBleedingDaysSortedByDate } from '../db'
import cycleModule from './cycle' import cycleModule from './cycle'
import nothingChanged from '../db/db-unchanged' import nothingChanged from '../db/db-unchanged'
import store from '../store' import store from '../store'
import { setDate } from '../slices/date'
export default function setupNotifications(navigate) { export default function setupNotifications(navigate, setDate) {
Notification.configure({ Notification.configure({
onNotification: (notification) => { onNotification: (notification) => {
// https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106 // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106
-19
View File
@@ -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
+3 -5
View File
@@ -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({ const reducer = combineReducers({
date, navigation,
navigation
}) })
const store = createStore(reducer) const store = createStore(reducer)