Chore/cleanup date usage
This commit is contained in:
+1
-9
@@ -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
@@ -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),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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)
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user