lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into 133-make-temp-scale-a-config-setting-and-read-it-in-chart-and-temp-screen

Browse Source
This commit is contained in:
Julia Friesel
2018-08-22 17:33:23 +02:00
parent 0e77a2f613 7fcaa4af52
commit 7ef7bf7c10
26 changed files with 1215 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
-34
View File
@@ -1,34 +0,0 @@
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import Home from './components/home'
import Calendar from './components/calendar'
import CycleDay from './components/cycle-day'
import Chart from './components/chart/chart'
import Settings from './components/settings'
import Stats from './components/stats'
import styles from './styles'
// this is until react native fixes this bugg, see
// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
const routes = {
Home: createStackNavigator({Home, CycleDay}, {headerMode: 'none'}),
Calendar: createStackNavigator({Calendar, CycleDay}, {headerMode: 'none'}),
Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
Settings: { screen: Settings },
Stats: { screen: Stats}
}
const config = {
labeled: true,
shifting: false,
tabBarOptions: {
style: {backgroundColor: '#ff7e5f'},
labelStyle: {fontSize: 15, color: 'white'}
},
}
export default createBottomTabNavigator(routes, config)
components/app.js
+64
View File
@@ -0,0 +1,64 @@
import React, { Component } from 'react'
import { View, BackHandler } from 'react-native'
import Header from './header'
import Menu from './menu'
import Home from './home'
import Calendar from './calendar'
import CycleDay from './cycle-day/cycle-day-overview'
import symptomViews from './cycle-day/symptoms'
import Chart from './chart/chart'
import Settings from './settings'
import Stats from './stats'
import {headerTitles as titles} from './labels'
const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
currentPage: 'Home'
}
const handleBackButtonPress = function() {
if (this.state.currentPage === 'Home') return false
if (isSymptomView(this.state.currentPage)) {
this.navigate('CycleDay', {cycleDay: this.state.currentProps.cycleDay})
} else {
this.navigate('Home')
}
return true
}.bind(this)
this.backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButtonPress)
}
componentWillUnmount() {
this.backHandler.remove()
}
navigate(pageName, props) {
this.setState({currentPage: pageName, currentProps: props})
}
render() {
const page = {
Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
}[this.state.currentPage]
return (
<View style={{flex: 1}}>
{this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
{React.createElement(page, {
navigate: this.navigate.bind(this),
...this.state.currentProps
})}
{!isSymptomView(this.state.currentPage) &&
<Menu navigate={this.navigate.bind(this)} />
}
</View>
)
}
}
components/calendar.js
+8 -11
View File
@@ -1,7 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { View } from 'react-native'
import { CalendarList } from 'react-native-calendars' import { CalendarList } from 'react-native-calendars'
import * as styles from '../styles'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db' import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
export default class CalendarView extends Component { export default class CalendarView extends Component {
@@ -12,7 +10,8 @@ export default class CalendarView extends Component {
} }
this.setStateWithCalFormattedDays = (function (CalendarComponent) { this.setStateWithCalFormattedDays = (function (CalendarComponent) {
return function() { return function(_, changes) {
if (Object.values(changes).every(x => x && !x.length)) return
CalendarComponent.setState({ CalendarComponent.setState({
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate) bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
}) })
@@ -28,19 +27,17 @@ export default class CalendarView extends Component {
passDateToDayView(result) { passDateToDayView(result) {
const cycleDay = getOrCreateCycleDay(result.dateString) const cycleDay = getOrCreateCycleDay(result.dateString)
const navigate = this.props.navigation.navigate const navigate = this.props.navigate
navigate('CycleDay', { cycleDay }) navigate('CycleDay', { cycleDay })
} }
render() { render() {
return ( return (
<View style={styles.container}> <CalendarList
<CalendarList onDayPress={this.passDateToDayView.bind(this)}
onDayPress={ this.passDateToDayView.bind(this) } markedDates={this.state.bleedingDaysInCalFormat}
markedDates = { this.state.bleedingDaysInCalFormat } markingType={'period'}
markingType = {'period'} />
/>
</View>
) )
} }
} }
components/chart/chart.js
+19 -17
View File
@@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { View, FlatList } from 'react-native' import { View, FlatList, ScrollView } from 'react-native'
import range from 'date-range' import range from 'date-range'
import { LocalDate } from 'js-joda' import { LocalDate } from 'js-joda'
import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis' import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
@@ -20,7 +20,7 @@ export default class CycleChart extends Component {
<DayColumn <DayColumn
{...item} {...item}
index={index} index={index}
navigate={this.props.navigation.navigate} navigate={this.props.navigate}
/> />
) )
} }
@@ -42,21 +42,23 @@ export default class CycleChart extends Component {
render() { render() {
return ( return (
<View style={{ flexDirection: 'row', marginTop: 50 }}> <ScrollView>
<View {...styles.yAxis}>{makeYAxisLabels()}</View> <View style={{ flexDirection: 'row', marginTop: 50 }}>
{makeHorizontalGrid()} <View {...styles.yAxis}>{makeYAxisLabels()}</View>
{<FlatList {makeHorizontalGrid()}
horizontal={true} {<FlatList
inverted={true} horizontal={true}
showsHorizontalScrollIndicator={false} inverted={true}
data={this.state.columns} showsHorizontalScrollIndicator={false}
renderItem={this.renderColumn} data={this.state.columns}
keyExtractor={item => item.dateString} renderItem={this.renderColumn}
initialNumToRender={15} keyExtractor={item => item.dateString}
maxToRenderPerBatch={5} initialNumToRender={15}
> maxToRenderPerBatch={5}
</FlatList>} >
</View> </FlatList>}
</View>
</ScrollView>
) )
} }
} }
components/cycle-day/cycle-day-overview.js
+139 -111
View File
@@ -1,10 +1,17 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
ScrollView,
View, View,
Button, Text,
Text TouchableOpacity,
Dimensions
} from 'react-native' } from 'react-native'
import styles from '../../styles' import { LocalDate } from 'js-joda'
import Header from '../header'
import { getOrCreateCycleDay } from '../../db'
import cycleModule from '../../lib/cycle'
import Icon from 'react-native-vector-icons/FontAwesome'
import styles, { iconStyles } from '../../styles'
import { import {
bleeding as bleedingLabels, bleeding as bleedingLabels,
mucusFeeling as feelingLabels, mucusFeeling as feelingLabels,
@@ -15,103 +22,83 @@ import {
cervixPosition as positionLabels, cervixPosition as positionLabels,
intensity as intensityLabels intensity as intensityLabels
} from './labels/labels' } from './labels/labels'
import cycleDayModule from '../../lib/cycle'
import { bleedingDaysSortedByDate } from '../../db'
const getCycleDayNumber = cycleDayModule().getCycleDayNumber export default class CycleDayOverView extends Component {
export default class DayView extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.cycleDay = props.cycleDay
this.showView = props.showView
this.state = { this.state = {
cycleDayNumber: getCycleDayNumber(this.cycleDay.date), cycleDay: props.cycleDay
} }
this.setStateWithCycleDayNumber = (function (DayViewComponent) {
return function () {
DayViewComponent.setState({
cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
})
}
})(this)
bleedingDaysSortedByDate.addListener(this.setStateWithCycleDayNumber)
} }
componentWillUnmount() { goToCycleDay(target) {
bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber) const localDate = LocalDate.parse(this.state.cycleDay.date)
const targetDate = target === 'before' ?
localDate.minusDays(1).toString() :
localDate.plusDays(1).toString()
this.setState({ cycleDay: getOrCreateCycleDay(targetDate) })
}
navigate(symptom) {
this.props.navigate(symptom, {
cycleDay: this.state.cycleDay,
})
} }
render() { render() {
const cycleDay = this.cycleDay const cycleDay = this.state.cycleDay
const getCycleDayNumber = cycleModule().getCycleDayNumber
const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRowInline}> <Header
<Text style={styles.symptomDayView}>Bleeding</Text> isCycleDayOverView={true}
<View style={styles.symptomEditButton}> cycleDayNumber={cycleDayNumber}
<Button date={cycleDay.date}
onPress={() => this.showView('BleedingEditView')} goToCycleDay={this.goToCycleDay.bind(this)}
title={getLabel('bleeding', cycleDay.bleeding)}> />
</Button> <ScrollView>
</View> <View style={styles.symptomBoxesView}>
</View> <SymptomBox
<View style={styles.symptomViewRowInline}> title='Bleeding'
<Text style={styles.symptomDayView}>Temperature</Text> onPress={() => this.navigate('BleedingEditView')}
<View style={styles.symptomEditButton}> data={getLabel('bleeding', cycleDay.bleeding)}
<Button />
onPress={() => this.showView('TemperatureEditView')} <SymptomBox
title={getLabel('temperature', cycleDay.temperature)}> title='Temperature'
</Button> onPress={() => this.navigate('TemperatureEditView')}
</View> data={getLabel('temperature', cycleDay.temperature)}
</View> />
<View style={ styles.symptomViewRowInline }> <SymptomBox
<Text style={styles.symptomDayView}>Mucus</Text> title='Mucus'
<View style={styles.symptomEditButton}> onPress={() => this.navigate('MucusEditView')}
<Button data={getLabel('mucus', cycleDay.mucus)}
onPress={() => this.showView('MucusEditView')} />
title={getLabel('mucus', cycleDay.mucus)}> <SymptomBox
</Button> title='Cervix'
</View> onPress={() => this.navigate('CervixEditView')}
</View> data={getLabel('cervix', cycleDay.cervix)}
<View style={styles.symptomViewRowInline}> />
<Text style={styles.symptomDayView}>Cervix</Text> <SymptomBox
<View style={styles.symptomEditButton}> title='Note'
<Button onPress={() => this.navigate('NoteEditView')}
onPress={() => this.showView('CervixEditView')} data={getLabel('note', cycleDay.note)}
title={getLabel('cervix', cycleDay.cervix)}> />
</Button> <SymptomBox
</View> title='Desire'
</View> onPress={() => this.navigate('DesireEditView')}
<View style={styles.symptomViewRowInline}> data={getLabel('desire', cycleDay.desire)}
<Text style={styles.symptomDayView}>Note</Text> />
<View style={styles.symptomEditButton}> <SymptomBox
<Button title='Sex'
onPress={() => this.showView('NoteEditView')} onPress={() => this.navigate('SexEditView')}
title={getLabel('note', cycleDay.note)} data={getLabel('sex', cycleDay.sex)}
> />
</Button> {/* this is just to make the last row adhere to the grid
</View> (and) because there are no pseudo properties in RN */}
</View> <FillerBoxes />
<View style={ styles.symptomViewRowInline }> </View >
<Text style={styles.symptomDayView}>Desire</Text> </ScrollView >
<View style={styles.symptomEditButton}>
<Button
onPress={() => this.showView('DesireEditView')}
title={getLabel('desire', cycleDay.desire)}>
</Button>
</View>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Sex</Text>
<View style={styles.symptomEditButton}>
<Button
onPress={() => this.showView('SexEditView')}
title={getLabel('sex', cycleDay.sex)}>
</Button>
</View>
</View>
</View > </View >
) )
} }
@@ -136,33 +123,28 @@ function getLabel(symptomName, symptom) {
} }
}, },
mucus: mucus => { mucus: mucus => {
if ( const categories = ['feeling', 'texture', 'value']
typeof mucus.feeling === 'number' && if (categories.every(c => typeof mucus[c] === 'number')) {
typeof mucus.texture === 'number' && let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ')
typeof mucus.value === 'number' mucusLabel += `\n${computeSensiplanMucusLabels[mucus.value]}`
) { if (mucus.exclude) mucusLabel = `(${mucusLabel})`
let mucusLabel =
`${feelingLabels[mucus.feeling]} +
${textureLabels[mucus.texture]}
( ${computeSensiplanMucusLabels[mucus.value]} )`
if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
return mucusLabel return mucusLabel
} }
}, },
cervix: cervix => { cervix: cervix => {
let cervixLabel = []
if (cervix.opening > -1 && cervix.firmness > -1) { if (cervix.opening > -1 && cervix.firmness > -1) {
let cervixLabel = cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness])
`${openingLabels[cervix.opening]} +
${firmnessLabels[cervix.firmness]}`
if (cervix.position > -1) { if (cervix.position > -1) {
cervixLabel += `+ ${positionLabels[cervix.position]}` cervixLabel.push(positionLabels[cervix.position])
} }
if (cervix.exclude) cervixLabel = "( " + cervixLabel + " )" cervixLabel = cervixLabel.join(', ')
if (cervix.exclude) cervixLabel = `(${cervixLabel})`
return cervixLabel return cervixLabel
} }
}, },
note: note => { note: note => {
return note.value.slice(0, 12) + '...' return note.value
}, },
desire: desire => { desire: desire => {
if (typeof desire.value === 'number') { if (typeof desire.value === 'number') {
@@ -171,18 +153,64 @@ function getLabel(symptomName, symptom) {
} }
}, },
sex: sex => { sex: sex => {
let sexLabel = '' const sexLabel = []
if ( sex.solo || sex.partner ) { if ( sex.solo || sex.partner ) {
sexLabel += 'Activity ' sexLabel.push('activity')
} }
if (sex.condom || sex.pill || sex.iud || if (sex.condom || sex.pill || sex.iud ||
sex.patch || sex.ring || sex.implant || sex.other) { sex.patch || sex.ring || sex.implant || sex.other) {
sexLabel += 'Contraceptive' sexLabel.push('contraceptive')
} }
return sexLabel ? sexLabel : 'edit' return sexLabel.join(', ')
} }
} }
if (!symptom) return 'edit' if (!symptom) return
return labels[symptomName](symptom) || 'edit' const label = labels[symptomName](symptom)
if (label.length < 45) return label
return label.slice(0, 42) + '...'
}
class SymptomBox extends Component {
render() {
const d = this.props.data
const boxActive = d ? styles.symptomBoxActive : {}
const iconActive = d ? iconStyles.symptomBoxActive : {}
const textStyle = d ? styles.symptomTextActive : {}
const symptomBoxStyle = Object.assign({}, styles.symptomBox, boxActive)
const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive)
return (
<TouchableOpacity onPress={this.props.onPress}>
<View style={symptomBoxStyle}>
<Icon
name='thermometer'
{...iconStyle}
/>
<Text style={textStyle}>{this.props.title}</Text>
</View>
<View style={styles.symptomDataBox}>
<Text style={styles.symptomDataText}>{this.props.data}</Text>
</View>
</TouchableOpacity>
)
}
}
class FillerBoxes extends Component {
render() {
const n = Dimensions.get('window').width / styles.symptomBox.width
const fillerBoxes = []
for (let i = 0; i < Math.ceil(n); i++) {
fillerBoxes.push(
<View
width={styles.symptomBox.width}
height={0}
key={i.toString()}
/>
)
}
return fillerBoxes
}
} }
components/cycle-day/index.js
-77
View File
@@ -1,77 +0,0 @@
import React, { Component } from 'react'
import {
View,
Text,
ScrollView
} from 'react-native'
import cycleModule from '../../lib/cycle'
import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
import { formatDateForViewHeader } from './labels/format'
import styles from '../../styles'
import actionButtonModule from './action-buttons'
import symptomComponents from './symptoms'
import DayView from './cycle-day-overview'
const getCycleDayNumber = cycleModule().getCycleDayNumber
export default class Day extends Component {
constructor(props) {
super(props)
this.cycleDay = props.navigation.state.params.cycleDay
this.state = {
visibleComponent: 'DayView',
}
const showView = view => {
this.setState({visibleComponent: view})
}
const makeActionButtons = actionButtonModule(showView)
const symptomComponentNames = Object.keys(symptomComponents)
this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
acc[curr] = React.createElement(
symptomComponents[curr],
{
cycleDay: this.cycleDay,
makeActionButtons
}
)
return acc
}, {})
// DayView needs showView instead of makeActionButtons
this.cycleDayViews.DayView = React.createElement(DayView, {
cycleDay: this.cycleDay,
showView
})
}
render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date)
return (
<ScrollView>
<View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)}
</Text>
</View >
<View style={ styles.cycleDayNumberView }>
{ cycleDayNumber &&
<Text style={styles.cycleDayNumber} >
Cycle day {cycleDayNumber}
</Text> }
<Text style={styles.cycleDayNumber} >
{fertilityStatus}
</Text>
</View >
<View>
{ this.cycleDayViews[this.state.visibleComponent] }
</View >
</ScrollView >
)
}
}
components/cycle-day/labels/labels.js
+1 -1
View File
@@ -1,7 +1,7 @@
export const bleeding = ['spotting', 'light', 'medium', 'heavy'] export const bleeding = ['spotting', 'light', 'medium', 'heavy']
export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery'] export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
export const mucusTexture = ['nothing', 'creamy', 'egg white'] export const mucusTexture = ['nothing', 'creamy', 'egg white']
export const mucusNFP = ['t', 'Ø', 'f', 'S', '+S'] export const mucusNFP = ['t', 'Ø', 'f', 'S', 'S+']
export const cervixOpening = ['closed', 'medium', 'open'] export const cervixOpening = ['closed', 'medium', 'open']
export const cervixFirmness = ['hard', 'soft'] export const cervixFirmness = ['hard', 'soft']
export const cervixPosition = ['low', 'medium', 'high'] export const cervixPosition = ['low', 'medium', 'high']
components/cycle-day/symptoms/action-button-footer.js
+63
View File
@@ -0,0 +1,63 @@
import React, { Component } from 'react'
import {
View, TouchableOpacity, Text
} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { saveSymptom } from '../../../db'
import styles, {iconStyles} from '../../../styles'
export default class ActionButtonFooter extends Component {
render() {
const { symptom, cycleDay, saveAction, saveDisabled, navigate} = this.props
const navigateToOverView = () => navigate('CycleDay', {cycleDay})
const buttons = [
{
title: 'Cancel',
action: () => navigateToOverView(),
icon: 'cancel'
},
{
title: 'Delete',
action: () => {
saveSymptom(symptom, cycleDay)
navigateToOverView()
},
disabledCondition: !cycleDay[symptom],
icon: 'delete-outline'
}, {
title: 'Save',
action: () => {
saveAction()
navigateToOverView()
},
disabledCondition: saveDisabled,
icon: 'content-save-outline'
}
]
return (
<View style={styles.menu}>
{buttons.map(({ title, action, disabledCondition, icon }, i) => {
const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
const iconStyle = disabledCondition ?
Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
iconStyles.menuIcon
return (
<TouchableOpacity
onPress={action}
style={styles.menuItem}
disabled={disabledCondition}
key={i.toString()}
>
<Icon name={icon} {...iconStyle} />
<Text style={textStyle}>
{title}
</Text>
</TouchableOpacity>
)
})}
</View>
)
}
}
components/cycle-day/symptoms/bleeding.js
+41 -39
View File
@@ -2,12 +2,14 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import { bleeding as labels } from '../labels/labels' import { bleeding as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Bleeding extends Component { export default class Bleeding extends Component {
constructor(props) { constructor(props) {
@@ -32,44 +34,44 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 }, { label: labels[3], value: 3 },
] ]
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Bleeding</Text> <ScrollView>
<View style={styles.radioButtonRow}> <View>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={bleedingRadioProps} <RadioForm
initial={this.state.currentValue} radio_props={bleedingRadioProps}
formHorizontal={true} initial={this.state.currentValue}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({ currentValue: itemValue }) onPress={(itemValue) => {
}} this.setState({ currentValue: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'bleeding', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='bleeding'
saveAction: () => { cycleDay={this.props.cycleDay}
saveSymptom('bleeding', this.cycleDay, { saveAction={() => {
value: this.state.currentValue, saveSymptom('bleeding', this.props.cycleDay, {
exclude: this.state.exclude value: this.state.currentValue,
}) exclude: this.state.exclude
}, })
saveDisabled: this.state.currentValue === -1 }}
} saveDisabled={this.state.currentValue === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/cervix.js
+72 -70
View File
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
cervixFirmness as firmnessLabels, cervixFirmness as firmnessLabels,
cervixPosition as positionLabels cervixPosition as positionLabels
} from '../labels/labels' } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Cervix extends Component { export default class Cervix extends Component {
constructor(props) { constructor(props) {
@@ -45,76 +47,76 @@ export default class Cervix extends Component {
const cervixPositionRadioProps = [ const cervixPositionRadioProps = [
{label: positionLabels[0], value: 0 }, {label: positionLabels[0], value: 0 },
{label: positionLabels[1], value: 1 }, {label: positionLabels[1], value: 1 },
{label: positionLabels[2], value: 2 } { label: positionLabels[2], value: 2 }
] ]
return( return (
<View style={ styles.symptomEditView }> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Cervix</Text> <ScrollView>
<Text style={styles.symptomDayView}>Opening</Text> <View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Opening</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixOpeningRadioProps} <RadioForm
initial={this.state.opening} radio_props={cervixOpeningRadioProps}
formHorizontal={true} initial={this.state.opening}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({opening: itemValue}) onPress={(itemValue) => {
}} this.setState({ opening: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Firmness</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Firmness</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixFirmnessRadioProps} <RadioForm
initial={this.state.firmness} radio_props={cervixFirmnessRadioProps}
formHorizontal={true} initial={this.state.firmness}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({firmness: itemValue}) onPress={(itemValue) => {
}} this.setState({ firmness: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Position</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Position</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixPositionRadioProps} <RadioForm
initial={this.state.position} radio_props={cervixPositionRadioProps}
formHorizontal={true} initial={this.state.position}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({position: itemValue}) onPress={(itemValue) => {
}} this.setState({ position: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'cervix', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='cervix'
saveAction: () => { cycleDay={this.cycleDay}
saveSymptom('cervix', this.cycleDay, { saveAction={() => {
opening: this.state.opening, saveSymptom('cervix', this.cycleDay, {
firmness: this.state.firmness, opening: this.state.opening,
position: this.state.position, firmness: this.state.firmness,
exclude: this.state.exclude position: this.state.position,
}) exclude: this.state.exclude
}, })
saveDisabled: this.state.opening === -1 || this.state.firmness === -1 }}
} saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/desire.js
+28 -27
View File
@@ -1,12 +1,13 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
View, View,
Text ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import { intensity as labels } from '../labels/labels' import { intensity as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Desire extends Component { export default class Desire extends Component {
constructor(props) { constructor(props) {
@@ -27,32 +28,32 @@ export default class Desire extends Component {
{ label: labels[2], value: 2 } { label: labels[2], value: 2 }
] ]
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Desire</Text> <ScrollView>
<View style={styles.radioButtonRow}> <View>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={desireRadioProps} <RadioForm
initial={this.state.currentValue} radio_props={desireRadioProps}
formHorizontal={true} initial={this.state.currentValue}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({ currentValue: itemValue }) onPress={(itemValue) => {
}} this.setState({ currentValue: itemValue })
/> }}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'desire', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='desire'
saveAction: () => { cycleDay={this.cycleDay}
saveSymptom('desire', this.cycleDay, { value: this.state.currentValue }) saveAction={() => {
}, saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
saveDisabled: this.state.currentValue === -1 }}
} saveDisabled={this.state.currentValue === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/mucus.js
+65 -66
View File
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
mucusTexture as textureLabels mucusTexture as textureLabels
} from '../labels/labels' } from '../labels/labels'
import computeSensiplanValue from '../../../lib/sensiplan-mucus' import computeSensiplanValue from '../../../lib/sensiplan-mucus'
import ActionButtonFooter from './action-button-footer'
export default class Mucus extends Component { export default class Mucus extends Component {
@@ -31,78 +33,75 @@ export default class Mucus extends Component {
} }
}) })
/* eslint-enable react/no-direct-mutation-state */ /* eslint-enable react/no-direct-mutation-state */
} }
render() { render() {
const mucusFeelingRadioProps = [ const mucusFeelingRadioProps = [
{label: feelingLabels[0], value: 0 }, { label: feelingLabels[0], value: 0 },
{label: feelingLabels[1], value: 1 }, { label: feelingLabels[1], value: 1 },
{label: feelingLabels[2], value: 2 }, { label: feelingLabels[2], value: 2 },
{label: feelingLabels[3], value: 3 } { label: feelingLabels[3], value: 3 }
] ]
const mucusTextureRadioProps = [ const mucusTextureRadioProps = [
{label: textureLabels[0], value: 0 }, { label: textureLabels[0], value: 0 },
{label: textureLabels[1], value: 1 }, { label: textureLabels[1], value: 1 },
{label: textureLabels[2], value: 2 } { label: textureLabels[2], value: 2 }
] ]
return( return (
<View style={ styles.symptomEditView }> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Mucus</Text> <ScrollView>
<Text style={styles.symptomDayView}>Feeling</Text> <View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Feeling</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={mucusFeelingRadioProps} <RadioForm
initial={this.state.feeling} radio_props={mucusFeelingRadioProps}
formHorizontal={true} initial={this.state.feeling}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({feeling: itemValue }) onPress={(itemValue) => {
}} this.setState({ feeling: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Texture</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Texture</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={mucusTextureRadioProps} <RadioForm
initial={this.state.texture} radio_props={mucusTextureRadioProps}
formHorizontal={true} initial={this.state.texture}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({texture: itemValue }) onPress={(itemValue) => {
}} this.setState({ texture: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
</View>
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </ScrollView>
{ <ActionButtonFooter
symptom: 'mucus', symptom='mucus'
cycleDay: this.cycleDay, cycleDay={this.cycleDay}
saveAction: () => { saveAction={() => {
saveSymptom('mucus', this.cycleDay, { saveSymptom('mucus', this.cycleDay, {
feeling: this.state.feeling, feeling: this.state.feeling,
texture: this.state.texture, texture: this.state.texture,
value: computeSensiplanValue(this.state.feeling, this.state.texture), value: computeSensiplanValue(this.state.feeling, this.state.texture),
exclude: this.state.exclude exclude: this.state.exclude
}) })
}, }}
saveDisabled: this.state.feeling === -1 || this.state.texture === -1 saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
} navigate={this.props.navigate}
)} />
</View>
</View> </View>
) )
} }
components/cycle-day/symptoms/note.js
+26 -25
View File
@@ -1,12 +1,13 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
View, View,
Text, ScrollView,
TextInput, TextInput,
} from 'react-native' } from 'react-native'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import ActionButtonFooter from './action-button-footer'
export default class Temp extends Component { export default class Temp extends Component {
constructor(props) { constructor(props) {
@@ -22,30 +23,30 @@ export default class Temp extends Component {
render() { render() {
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRow}> <ScrollView>
<Text style={styles.symptomDayView}>Note</Text> <View style={styles.symptomViewRow}>
<TextInput <TextInput
multiline={true} multiline={true}
placeholder="Enter" placeholder="Enter"
onChangeText={(val) => { onChangeText={(val) => {
this.setState({ currentValue: val }) this.setState({ currentValue: val })
}} }}
value={this.state.currentValue} value={this.state.currentValue}
/> />
</View> </View>
<View style={styles.actionButtonRow}> </ScrollView>
{this.makeActionButtons({ <ActionButtonFooter
symptom: 'note', symptom='note'
cycleDay: this.cycleDay, cycleDay={this.cycleDay}
saveAction: () => { saveAction={() => {
saveSymptom('note', this.cycleDay, { saveSymptom('note', this.cycleDay, {
value: this.state.currentValue value: this.state.currentValue
}) })
}, }}
saveDisabled: !this.state.currentValue saveDisabled={!this.state.currentValue}
})} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/sex.js
+123 -121
View File
@@ -3,7 +3,8 @@ import {
CheckBox, CheckBox,
Text, Text,
TextInput, TextInput,
View View,
ScrollView
} from 'react-native' } from 'react-native'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
@@ -11,13 +12,14 @@ import {
sexActivity as activityLabels, sexActivity as activityLabels,
contraceptives as contraceptiveLabels contraceptives as contraceptiveLabels
} from '../labels/labels' } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Sex extends Component { export default class Sex extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.cycleDay = props.cycleDay this.cycleDay = props.cycleDay
this.state = {} this.state = {}
if (this.cycleDay.sex !== null ) { if (this.cycleDay.sex !== null) {
Object.assign(this.state, this.cycleDay.sex) Object.assign(this.state, this.cycleDay.sex)
// We make sure other is always true when there is a note, // We make sure other is always true when there is a note,
// e.g. when import is messed up. // e.g. when import is messed up.
@@ -30,126 +32,126 @@ export default class Sex extends Component {
render() { render() {
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>SEX</Text> <ScrollView>
<View style={styles.symptomViewRowInline}> <View>
<Text style={styles.symptomDayView}>{activityLabels.solo}</Text> <View style={styles.symptomViewRowInline}>
<CheckBox <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
value={this.state.solo} <CheckBox
onValueChange={(val) => { value={this.state.solo}
this.setState({solo: val}) onValueChange={(val) => {
}} this.setState({ solo: val })
/> }}
<Text style={styles.symptomDayView}>{activityLabels.partner}</Text> />
<CheckBox <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
value={this.state.partner} <CheckBox
onValueChange={(val) => { value={this.state.partner}
this.setState({partner: val}) onValueChange={(val) => {
}} this.setState({ partner: val })
/> }}
</View> />
<Text style={styles.symptomDayView}>CONTRACEPTIVES</Text> </View>
<View style={styles.symptomViewRowInline}> <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.condom} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.condom}
<CheckBox </Text>
value={this.state.condom} <CheckBox
onValueChange={(val) => { value={this.state.condom}
this.setState({condom: val}) onValueChange={(val) => {
}} this.setState({ condom: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.pill} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.pill}
<CheckBox </Text>
value={this.state.pill} <CheckBox
onValueChange={(val) => { value={this.state.pill}
this.setState({pill: val}) onValueChange={(val) => {
}} this.setState({ pill: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.iud} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.iud}
<CheckBox </Text>
value={this.state.iud} <CheckBox
onValueChange={(val) => { value={this.state.iud}
this.setState({iud: val}) onValueChange={(val) => {
}} this.setState({ iud: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.patch} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.patch}
<CheckBox </Text>
value={this.state.patch} <CheckBox
onValueChange={(val) => { value={this.state.patch}
this.setState({patch: val}) onValueChange={(val) => {
}} this.setState({ patch: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.ring} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.ring}
<CheckBox </Text>
value={this.state.ring} <CheckBox
onValueChange={(val) => { value={this.state.ring}
this.setState({ring: val}) onValueChange={(val) => {
}} this.setState({ ring: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.implant} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.implant}
<CheckBox </Text>
value={this.state.implant} <CheckBox
onValueChange={(val) => { value={this.state.implant}
this.setState({implant: val}) onValueChange={(val) => {
}} this.setState({ implant: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.other} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.other}
<CheckBox </Text>
value={this.state.other} <CheckBox
onValueChange={(val) => { value={this.state.other}
this.setState({ onValueChange={(val) => {
other: val, this.setState({
focusTextArea: true other: val,
}) focusTextArea: true
}} })
/> }}
</View> />
{ this.state.other && </View>
<TextInput {this.state.other &&
autoFocus={this.state.focusTextArea} <TextInput
multiline={true} autoFocus={this.state.focusTextArea}
placeholder="Enter" multiline={true}
value={this.state.note} placeholder="Enter"
onChangeText={(val) => { value={this.state.note}
this.setState({note: val}) onChangeText={(val) => {
}} this.setState({ note: val })
/> }}
} />
<View style={styles.actionButtonRow}>
{this.props.makeActionButtons(
{
symptom: 'sex',
cycleDay: this.cycleDay,
saveAction: () => {
const copyOfState = Object.assign({}, this.state)
if (!copyOfState.other) {
copyOfState.note = null
}
saveSymptom('sex', this.cycleDay, copyOfState)
},
saveDisabled: Object.values(this.state).every(value => !value)
} }
)} </View>
</View> </ScrollView>
<ActionButtonFooter
symptom='sex'
cycleDay={this.cycleDay}
saveAction={() => {
const copyOfState = Object.assign({}, this.state)
if (!copyOfState.other) {
copyOfState.note = null
}
saveSymptom('sex', this.cycleDay, copyOfState)
}}
saveDisabled={Object.values(this.state).every(value => !value)}
navigate={this.props.navigate}
/>
</View> </View>
) )
} }
components/cycle-day/symptoms/temperature.js
+63 -57
View File
@@ -5,7 +5,8 @@ import {
TextInput, TextInput,
Switch, Switch,
Keyboard, Keyboard,
Alert Alert,
ScrollView
} from 'react-native' } from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo' import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -15,6 +16,7 @@ import { LocalTime, ChronoUnit } from 'js-joda'
import { temperature as tempLabels } from '../labels/labels' import { temperature as tempLabels } from '../labels/labels'
import { scaleObservable } from '../../../local-storage' import { scaleObservable } from '../../../local-storage'
import { shared } from '../../labels' import { shared } from '../../labels'
import ActionButtonFooter from './action-button-footer'
const minutes = ChronoUnit.MINUTES const minutes = ChronoUnit.MINUTES
@@ -50,64 +52,68 @@ export default class Temp extends Component {
render() { render() {
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRowInline}> <ScrollView>
<Text style={styles.symptomDayView}>Temperature (°C)</Text> <View>
<TempInput <View style={styles.symptomViewRowInline}>
value={this.state.temperature} <Text style={styles.symptomDayView}>Temperature (°C)</Text>
setState={(val) => this.setState(val)} <TempInput
isSuggestion={this.state.isSuggestion} value={this.state.temperature}
/> setState={(val) => this.setState(val)}
</View> isSuggestion={this.state.isSuggestion}
<View style={styles.symptomViewRowInline}> />
<Text style={styles.symptomDayView}>Time</Text> </View>
<TextInput <View style={styles.symptomViewRowInline}>
style={styles.temperatureTextInput} <Text style={styles.symptomDayView}>Time</Text>
onFocus={() => { <TextInput
Keyboard.dismiss() style={styles.temperatureTextInput}
this.setState({isTimePickerVisible: true}) onFocus={() => {
}} Keyboard.dismiss()
value={this.state.time} this.setState({ isTimePickerVisible: true })
/> }}
</View> value={this.state.time}
<DateTimePicker />
mode="time" </View>
isVisible={this.state.isTimePickerVisible} <DateTimePicker
onConfirm={jsDate => { mode="time"
this.setState({ isVisible={this.state.isTimePickerVisible}
time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, onConfirm={jsDate => {
isTimePickerVisible: false this.setState({
}) time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
isTimePickerVisible: false
})
}}
onCancel={() => this.setState({ isTimePickerVisible: false })}
/>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
}}
value={this.state.exclude}
/>
</View>
</View>
</ScrollView>
<ActionButtonFooter
symptom='temperature'
cycleDay={this.cycleDay}
saveAction={() => {
const dataToSave = {
value: Number(this.state.temperature),
exclude: this.state.exclude,
time: this.state.time
}
saveSymptom('temperature', this.cycleDay, dataToSave)
}} }}
onCancel={() => this.setState({isTimePickerVisible: false})} saveDisabled={
this.state.temperature === '' ||
isNaN(Number(this.state.temperature)) ||
isInvalidTime(this.state.time)
}
navigate={this.props.navigate}
/> />
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
}}
value={this.state.exclude}
/>
</View>
<View style={styles.actionButtonRow}>
{this.makeActionButtons({
symptom: 'temperature',
cycleDay: this.cycleDay,
saveAction: async () => {
const dataToSave = {
value: Number(this.state.temperature),
exclude: this.state.exclude,
time: this.state.time
}
saveSymptom('temperature', this.cycleDay, dataToSave)
},
saveDisabled:
this.state.temperature === '' ||
isNaN(Number(this.state.temperature)) ||
isInvalidTime(this.state.time)
})}
</View>
</View> </View>
) )
} }
components/header.js
+43
View File
@@ -0,0 +1,43 @@
import React, { Component } from 'react'
import {
View,
Text
} from 'react-native'
import styles, { iconStyles } from '../styles'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
export default class Header extends Component {
render() {
return (
this.props.isCycleDayOverView ?
<View style={[styles.header, styles.headerCycleDay]}>
<Icon
name='arrow-left-drop-circle'
{...iconStyles.navigationArrow}
onPress={() => this.props.goToCycleDay('before')}
/>
<View>
<Text style={styles.dateHeader}>
{formatDateForViewHeader(this.props.date)}
</Text>
{this.props.cycleDayNumber &&
<Text style={styles.cycleDayNumber} >
Cycle day {this.props.cycleDayNumber}
</Text>}
</View >
<Icon
name='arrow-right-drop-circle'
{...iconStyles.navigationArrow}
onPress={() => this.props.goToCycleDay('after')}
/>
</View >
:
<View style={styles.header}>
<Text style={styles.dateHeader}>
{this.props.title}
</Text>
</View >
)
}
}
components/home.js
+1 -1
View File
@@ -41,7 +41,7 @@ export default class Home extends Component {
passTodayToDayView() { passTodayToDayView() {
const todayDateString = LocalDate.now().toString() const todayDateString = LocalDate.now().toString()
const cycleDay = getOrCreateCycleDay(todayDateString) const cycleDay = getOrCreateCycleDay(todayDateString)
const navigate = this.props.navigation.navigate const navigate = this.props.navigate
navigate('CycleDay', { cycleDay }) navigate('CycleDay', { cycleDay })
} }
components/labels.js
+26
View File
@@ -43,3 +43,29 @@ export const settings = {
saveError: 'Could not save temperature scale settings' saveError: 'Could not save temperature scale settings'
} }
} }
export const headerTitles = {
Home: 'Home',
Calendar: 'Calendar',
Chart: 'Chart',
Stats: 'Statistics',
Settings: 'Settings',
BleedingEditView: 'Bleeding',
TemperatureEditView: 'Temperature',
MucusEditView: 'Mucus',
CervixEditView: 'Cervix',
NoteEditView: 'Note',
DesireEditView: 'Desire',
SexEditView: 'Sex'
}
export const stats = {
emptyStats: 'At least one completed cycle is needed to present you with stats here.',
oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
daysLabel: 'days',
averageLabel: 'Average cycle length',
minLabel: 'Shortest cycle',
maxLabel: 'Longest cycle',
stdLabel: 'Standard deviation'
}
components/menu.js
+43
View File
@@ -0,0 +1,43 @@
import React, { Component } from 'react'
import {
View,
Text,
TouchableOpacity
} from 'react-native'
import styles, { iconStyles } from '../styles'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
export default class Menu extends Component {
makeMenuItem({ title, icon, onPress}, i) {
return (
<TouchableOpacity
onPress={onPress}
style={styles.menuItem}
key={i.toString()}
>
<Icon name={icon} {...iconStyles.menuIcon} />
<Text style={styles.menuText}>
{title}
</Text>
</TouchableOpacity>
)
}
goTo(componentName) {
this.props.navigate(componentName)
}
render() {
return (
<View style={styles.menu}>
{[
{ title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
{ title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
{ title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
{ title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
{ title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
].map(this.makeMenuItem.bind(this))}
</View >
)
}
}
components/stats.js
+37 -19
View File
@@ -8,15 +8,50 @@ import { LocalDate, ChronoUnit } from 'js-joda'
import styles from '../styles/index' import styles from '../styles/index'
import cycleModule from '../lib/cycle' import cycleModule from '../lib/cycle'
import getCycleInfo from '../lib/cycle-length' import getCycleInfo from '../lib/cycle-length'
import {stats as labels} from './labels'
export default class Stats extends Component { export default class Stats extends Component {
render() { render() {
const allMensesStarts = cycleModule().getAllMensesStarts() const allMensesStarts = cycleModule().getAllMensesStarts()
const statsText = determineStatsText(allMensesStarts) const atLeastOneCycle = allMensesStarts.length > 1
let cycleLengths
let numberOfCycles
let cycleInfo
if (atLeastOneCycle) {
cycleLengths = getCycleLength(allMensesStarts)
numberOfCycles = cycleLengths.length
if (numberOfCycles > 1) {
cycleInfo = getCycleInfo(cycleLengths)
}
}
return ( return (
<ScrollView> <ScrollView>
<View> <View>
<Text style={styles.stats}>{statsText}</Text> {!atLeastOneCycle &&
<Text style={styles.statsIntro}>{labels.emptyStats}</Text>
}
{atLeastOneCycle && numberOfCycles === 1 &&
<Text style={styles.statsIntro}>{labels.oneCycleStats(cycleLengths[0])}</Text>
}
{atLeastOneCycle && numberOfCycles > 1 && <View>
<Text style={styles.statsIntro}>{labels.getBasisOfStats(numberOfCycles)}</Text>
<View style={styles.statsRow}>
<Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
<Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
</View>
<View style={styles.statsRow}>
<Text style={styles.statsLabelLeft}>{labels.minLabel}</Text>
<Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text>
</View>
<View style={styles.statsRow}>
<Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text>
<Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text>
</View>
<View style={styles.statsRow}>
<Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text>
<Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text>
</View>
</View>}
</View> </View>
</ScrollView> </ScrollView>
) )
@@ -32,20 +67,3 @@ function getCycleLength(cycleStartDates) {
} }
return cycleLengths return cycleLengths
} }
function determineStatsText(allMensesStarts) {
const emptyStats = 'At least one completed cycle is needed to present you with stats here.'
if (allMensesStarts.length < 2) {
return emptyStats
} else {
const cycleLengths = getCycleLength(allMensesStarts)
const numberOfCycles = cycleLengths.length
if (numberOfCycles === 1) {
return `You have documented one cycle of ${cycleLengths[0]} days.`
}
const cycleInfo = getCycleInfo(cycleLengths)
const statsText = `Stats are based on ${numberOfCycles} completed cycles.\n\n\
Average cycle length: ${cycleInfo.mean} days\n\nShortest cycle: ${cycleInfo.minimum} days\nLongest cycle: ${cycleInfo.maximum} days\nMedian length (meaning 50% of cycles are of this length or shorter): ${cycleInfo.median} days\nStandard deviation: ${cycleInfo.stdDeviation}`
return statsText
}
}
index.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { AppRegistry } from 'react-native' import { AppRegistry } from 'react-native'
import App from './app' import App from './components/app'
AppRegistry.registerComponent('home', () => App) AppRegistry.registerComponent('home', () => App)
package-lock.json
Generated
+99 -85
View File
@@ -3721,8 +3721,8 @@
"integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==", "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
"optional": true, "optional": true,
"requires": { "requires": {
"nan": "^2.9.2", "nan": "2.10.0",
"node-pre-gyp": "^0.10.0" "node-pre-gyp": "0.10.0"
}, },
"dependencies": { "dependencies": {
"abbrev": { "abbrev": {
@@ -3744,19 +3744,21 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"delegates": "^1.0.0", "delegates": "1.0.0",
"readable-stream": "^2.0.6" "readable-stream": "2.3.6"
} }
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "bundled": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
} }
}, },
@@ -3767,15 +3769,18 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -3810,7 +3815,7 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "2.2.4"
} }
}, },
"fs.realpath": { "fs.realpath": {
@@ -3823,14 +3828,14 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"aproba": "^1.0.3", "aproba": "1.2.0",
"console-control-strings": "^1.0.0", "console-control-strings": "1.1.0",
"has-unicode": "^2.0.0", "has-unicode": "2.0.1",
"object-assign": "^4.1.0", "object-assign": "4.1.1",
"signal-exit": "^3.0.0", "signal-exit": "3.0.2",
"string-width": "^1.0.1", "string-width": "1.0.2",
"strip-ansi": "^3.0.1", "strip-ansi": "3.0.1",
"wide-align": "^1.1.0" "wide-align": "1.1.2"
} }
}, },
"glob": { "glob": {
@@ -3838,12 +3843,12 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"fs.realpath": "^1.0.0", "fs.realpath": "1.0.0",
"inflight": "^1.0.4", "inflight": "1.0.6",
"inherits": "2", "inherits": "2.0.3",
"minimatch": "^3.0.4", "minimatch": "3.0.4",
"once": "^1.3.0", "once": "1.4.0",
"path-is-absolute": "^1.0.0" "path-is-absolute": "1.0.1"
} }
}, },
"has-unicode": { "has-unicode": {
@@ -3856,7 +3861,7 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"safer-buffer": "^2.1.0" "safer-buffer": "2.1.2"
} }
}, },
"ignore-walk": { "ignore-walk": {
@@ -3864,7 +3869,7 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minimatch": "^3.0.4" "minimatch": "3.0.4"
} }
}, },
"inflight": { "inflight": {
@@ -3872,13 +3877,14 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"once": "^1.3.0", "once": "1.4.0",
"wrappy": "1" "wrappy": "1.0.2"
} }
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "bundled": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -3888,8 +3894,9 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "1.0.1"
} }
}, },
"isarray": { "isarray": {
@@ -3900,20 +3907,23 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "1.1.11"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "bundled": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "5.1.1",
"yallist": "^3.0.0" "yallist": "3.0.2"
} }
}, },
"minizlib": { "minizlib": {
@@ -3921,12 +3931,13 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"minipass": "^2.2.1" "minipass": "2.2.4"
} }
}, },
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -3941,9 +3952,9 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"debug": "^2.1.2", "debug": "2.6.9",
"iconv-lite": "^0.4.4", "iconv-lite": "0.4.21",
"sax": "^1.2.4" "sax": "1.2.4"
} }
}, },
"node-pre-gyp": { "node-pre-gyp": {
@@ -3951,16 +3962,16 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"detect-libc": "^1.0.2", "detect-libc": "1.0.3",
"mkdirp": "^0.5.1", "mkdirp": "0.5.1",
"needle": "^2.2.0", "needle": "2.2.0",
"nopt": "^4.0.1", "nopt": "4.0.1",
"npm-packlist": "^1.1.6", "npm-packlist": "1.1.10",
"npmlog": "^4.0.2", "npmlog": "4.1.2",
"rc": "^1.1.7", "rc": "1.2.7",
"rimraf": "^2.6.1", "rimraf": "2.6.2",
"semver": "^5.3.0", "semver": "5.5.0",
"tar": "^4" "tar": "4.4.1"
} }
}, },
"nopt": { "nopt": {
@@ -3968,8 +3979,8 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"abbrev": "1", "abbrev": "1.1.1",
"osenv": "^0.1.4" "osenv": "0.1.5"
} }
}, },
"npm-bundled": { "npm-bundled": {
@@ -3982,8 +3993,8 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"ignore-walk": "^3.0.1", "ignore-walk": "3.0.1",
"npm-bundled": "^1.0.1" "npm-bundled": "1.0.3"
} }
}, },
"npmlog": { "npmlog": {
@@ -3991,15 +4002,16 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"are-we-there-yet": "~1.1.2", "are-we-there-yet": "1.1.4",
"console-control-strings": "~1.1.0", "console-control-strings": "1.1.0",
"gauge": "~2.7.3", "gauge": "2.7.4",
"set-blocking": "~2.0.0" "set-blocking": "2.0.0"
} }
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -4009,8 +4021,9 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1.0.2"
} }
}, },
"os-homedir": { "os-homedir": {
@@ -4028,8 +4041,8 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"os-homedir": "^1.0.0", "os-homedir": "1.0.2",
"os-tmpdir": "^1.0.0" "os-tmpdir": "1.0.2"
} }
}, },
"path-is-absolute": { "path-is-absolute": {
@@ -4047,10 +4060,10 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"deep-extend": "^0.5.1", "deep-extend": "0.5.1",
"ini": "~1.3.0", "ini": "1.3.5",
"minimist": "^1.2.0", "minimist": "1.2.0",
"strip-json-comments": "~2.0.1" "strip-json-comments": "2.0.1"
}, },
"dependencies": { "dependencies": {
"minimist": { "minimist": {
@@ -4065,13 +4078,13 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"core-util-is": "~1.0.0", "core-util-is": "1.0.2",
"inherits": "~2.0.3", "inherits": "2.0.3",
"isarray": "~1.0.0", "isarray": "1.0.0",
"process-nextick-args": "~2.0.0", "process-nextick-args": "2.0.0",
"safe-buffer": "~5.1.1", "safe-buffer": "5.1.1",
"string_decoder": "~1.1.1", "string_decoder": "1.1.1",
"util-deprecate": "~1.0.1" "util-deprecate": "1.0.2"
} }
}, },
"rimraf": { "rimraf": {
@@ -4079,7 +4092,7 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"glob": "^7.0.5" "glob": "7.1.2"
} }
}, },
"safe-buffer": { "safe-buffer": {
@@ -4114,10 +4127,11 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "1.1.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "1.0.0",
"strip-ansi": "^3.0.0" "strip-ansi": "3.0.1"
} }
}, },
"string_decoder": { "string_decoder": {
@@ -4125,14 +4139,14 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"safe-buffer": "~5.1.0" "safe-buffer": "5.1.1"
} }
}, },
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "2.1.1"
} }
}, },
"strip-json-comments": { "strip-json-comments": {
@@ -4145,13 +4159,13 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"chownr": "^1.0.1", "chownr": "1.0.1",
"fs-minipass": "^1.2.5", "fs-minipass": "1.2.5",
"minipass": "^2.2.4", "minipass": "2.2.4",
"minizlib": "^1.1.0", "minizlib": "1.1.0",
"mkdirp": "^0.5.0", "mkdirp": "0.5.1",
"safe-buffer": "^5.1.1", "safe-buffer": "5.1.1",
"yallist": "^3.0.2" "yallist": "3.0.2"
} }
}, },
"util-deprecate": { "util-deprecate": {
@@ -4164,7 +4178,7 @@
"bundled": true, "bundled": true,
"optional": true, "optional": true,
"requires": { "requires": {
"string-width": "^1.0.2" "string-width": "1.0.2"
} }
}, },
"wrappy": { "wrappy": {
styles/index.js
+126 -26
View File
@@ -1,10 +1,10 @@
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export const fontOnPrimaryColor = 'white'
export default StyleSheet.create({ export default StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
welcome: { welcome: {
fontSize: 20, fontSize: 20,
margin: 30, margin: 30,
@@ -12,31 +12,72 @@ export default StyleSheet.create({
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
dateHeader: { dateHeader: {
fontSize: 20, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
margin: 15, color: fontOnPrimaryColor,
color: 'white',
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center'
}, },
cycleDayNumber: { cycleDayNumber: {
fontSize: 18, fontSize: 15,
color: fontOnPrimaryColor,
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' marginLeft: 15
}, },
symptomDayView: { symptomDayView: {
fontSize: 20, fontSize: 20,
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomBoxImage: {
width: 50,
height: 50
},
radioButton: { radioButton: {
fontSize: 18, fontSize: 18,
margin: 8, margin: 8,
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomEditView: { symptomBoxesView: {
justifyContent: 'space-between', flexDirection: 'row',
marginHorizontal: 15 flexWrap: 'wrap',
justifyContent: 'space-evenly'
},
symptomBox: {
borderColor: secondaryColor,
borderStyle: 'solid',
borderWidth: 1,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
alignItems: 'center',
marginTop: '10%',
paddingVertical: '6%',
marginHorizontal: 1,
width: 110,
height: 80,
},
symptomBoxActive: {
backgroundColor: secondaryColor,
},
symptomTextActive: {
color: fontOnPrimaryColor
},
symptomDataBox: {
borderColor: secondaryColor,
borderStyle: 'solid',
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
alignItems: 'center',
justifyContent: 'center',
padding: '3%',
marginHorizontal: 1,
width: 110,
height: 50,
},
symptomDataText: {
fontSize: 12
}, },
symptomEditRow: { symptomEditRow: {
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -49,16 +90,38 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
height: 50 height: 50
}, },
cycleDayDateView: { header: {
justifyContent: 'center', backgroundColor: primaryColor,
backgroundColor: 'steelblue' paddingVertical: 18,
paddingHorizontal: 15,
alignItems: 'center',
justifyContent: 'center'
}, },
cycleDayNumberView: { menu: {
justifyContent: 'center', backgroundColor: primaryColor,
backgroundColor: 'skyblue', alignItems: 'center',
marginBottom: 15, justifyContent: 'space-between',
flexDirection: 'row'
},
menuItem: {
alignItems: 'center',
flex: 1,
paddingVertical: 15 paddingVertical: 15
}, },
menuText: {
color: fontOnPrimaryColor
},
menuTextInActive: {
color: 'lightgrey'
},
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
},
navigationArrow: {
fontSize: 60,
color: fontOnPrimaryColor
},
homeButtons: { homeButtons: {
marginHorizontal: 15 marginHorizontal: 15
}, },
@@ -85,16 +148,16 @@ export default StyleSheet.create({
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto' marginRight: 'auto'
}, },
stats: { statsIntro: {
fontSize: 18, fontSize: 18,
margin: 30, margin: 10,
textAlign: 'left', textAlign: 'left',
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
settingsSegment: { settingsSegment: {
backgroundColor: 'lightgrey', backgroundColor: 'lightgrey',
padding: 10, padding: 10,
marginTop: 10, marginBottom: 10,
}, },
settingsSegmentTitle: { settingsSegmentTitle: {
fontWeight: 'bold' fontWeight: 'bold'
@@ -108,7 +171,44 @@ export default StyleSheet.create({
settingsButtonText: { settingsButtonText: {
color: 'white' color: 'white'
}, },
warning: { statsRow: {
color: 'red' flexDirection: 'row',
} width: '100%'
},
statsLabelLeft: {
fontSize: 18,
width: '60%',
textAlign: 'left',
textAlignVertical: 'center',
marginLeft: 10
},
statsLabelRight: {
fontSize: 18,
textAlign: 'left',
textAlignVertical: 'center'
},
menuLabel: {
fontSize: 15,
color: fontOnPrimaryColor
},
}) })
export const iconStyles = {
navigationArrow: {
size: 45,
color: fontOnPrimaryColor
},
symptomBox: {
size: 40
},
symptomBoxActive: {
color: fontOnPrimaryColor
},
menuIcon: {
size: 20,
color: fontOnPrimaryColor
},
menuIconInactive: {
color: 'lightgrey'
}
}
test/cycle-length.spec.js
+46 -5
View File
@@ -17,7 +17,7 @@ describe('getCycleLengthStats', () => {
stdDeviation: 53.06 stdDeviation: 53.06
} }
expect(result).to.eql(expectedResult) expect(result).to.eql(expectedResult)
}) }),
it('works for a simple even-numbered array', () => { it('works for a simple even-numbered array', () => {
const cycleLengths = [4, 1, 15, 2, 20, 5] const cycleLengths = [4, 1, 15, 2, 20, 5]
@@ -30,7 +30,8 @@ describe('getCycleLengthStats', () => {
stdDeviation: 7.78 stdDeviation: 7.78
} }
expect(result).to.eql(expectedResult) expect(result).to.eql(expectedResult)
}) }),
it('works for an one-element array', () => { it('works for an one-element array', () => {
const cycleLengths = [42] const cycleLengths = [42]
const result = cycleInfo(cycleLengths) const result = cycleInfo(cycleLengths)
@@ -42,20 +43,60 @@ describe('getCycleLengthStats', () => {
stdDeviation: null stdDeviation: null
} }
expect(result).to.eql(expectedResult) expect(result).to.eql(expectedResult)
}),
describe('works for more realistic examples', () => {
it('1 day difference between shortest and longest period', () => {
const cycleLengths = [28, 29, 28, 28, 28, 29, 28, 28, 28, 29, 29, 28]
const result = cycleInfo(cycleLengths)
const expectedResult = {
minimum: 28,
maximum: 29,
mean: 28.33,
median: 28,
stdDeviation: 0.49
}
expect(result).to.eql(expectedResult)
}),
it('3 days difference between shortest and longest period', () => {
const cycleLengths = [28, 29, 28, 28, 27, 30, 28, 27, 28, 28, 29, 27]
const result = cycleInfo(cycleLengths)
const expectedResult = {
minimum: 27,
maximum: 30,
mean: 28.08,
median: 28,
stdDeviation: 0.90
}
expect(result).to.eql(expectedResult)
}),
it('8 days difference between shortest and longest period', () => {
const cycleLengths = [28, 32, 29, 27, 28, 26, 33, 28, 29, 34, 27, 29]
const result = cycleInfo(cycleLengths)
const expectedResult = {
minimum: 26,
maximum: 34,
mean: 29.17,
median: 28.5,
stdDeviation: 2.52
}
expect(result).to.eql(expectedResult)
})
}) })
describe('when args are wrong', () => { describe('when args are wrong', () => {
it('throws when arg object is an empty array', () => { it('throws when arg object is an empty array', () => {
const cycleLengths = [] const cycleLengths = []
expect(() => cycleInfo(cycleLengths).to.throw(AssertionError)) expect(() => cycleInfo(cycleLengths).to.throw(AssertionError))
}) }),
it('throws when arg object is not in right format', () => { it('throws when arg object is not in right format', () => {
const wrongObject = { hello: 'world' } const wrongObject = { hello: 'world' }
expect(() => cycleInfo(wrongObject).to.throw(AssertionError)) expect(() => cycleInfo(wrongObject).to.throw(AssertionError))
}) }),
it('throws when arg array contains a string', () => { it('throws when arg array contains a string', () => {
const wrongElement = [4, 1, 15, '2', 20, 5] const wrongElement = [4, 1, 15, '2', 20, 5]
expect(() => cycleInfo(wrongElement).to.throw(AssertionError)) expect(() => cycleInfo(wrongElement).to.throw(AssertionError))
}) }),
it('throws when arg array contains a NaN', () => { it('throws when arg array contains a NaN', () => {
const wrongElement = [4, 1, 15, NaN, 20, 5] const wrongElement = [4, 1, 15, NaN, 20, 5]
expect(() => cycleInfo(wrongElement).to.throw(AssertionError)) expect(() => cycleInfo(wrongElement).to.throw(AssertionError))
test/cycle.spec.js
+78
View File
@@ -344,3 +344,81 @@ describe('getCycleForDay', () => {
]) ])
}) })
}) })
describe('getAllMensesStart', () => {
it('works for one cycle start', () => {
const cycleDaysSortedByDate = [
{
date: '2018-05-01',
bleeding: { value: 1 }
}
]
const { getAllMensesStarts } = cycleModule({
cycleDaysSortedByDate,
bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
})
const result = getAllMensesStarts()
expect(result.length).to.eql(1)
expect(result).to.eql(['2018-05-01'])
}),
it('works for two cycle starts', () => {
const cycleDaysSortedByDate = [
{
date: '2018-06-02',
bleeding: { value: 2 }
},
{
date: '2018-06-01',
bleeding: { value: 2 }
},
{
date: '2018-05-01',
bleeding: { value: 2 }
}
]
const { getAllMensesStarts } = cycleModule({
cycleDaysSortedByDate,
bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
})
const result = getAllMensesStarts()
expect(result.length).to.eql(2)
expect(result).to.eql(['2018-06-01', '2018-05-01'])
}),
it('works for two cycle starts with excluded data', () => {
const cycleDaysSortedByDate = [
{
date: '2018-06-01',
bleeding: { value: 2 }
},
{
date: '2018-05-01',
bleeding: { value: 2 }
},
{
date: '2018-04-31',
bleeding: { value: 2 , exclude: true}
},
]
const { getAllMensesStarts } = cycleModule({
cycleDaysSortedByDate,
bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
})
const result = getAllMensesStarts()
expect(result.length).to.eql(2)
expect(result).to.eql(['2018-06-01', '2018-05-01'])
}),
it('returns an empty array if no bleeding days are given', () => {
const cycleDaysSortedByDate = [ {} ]
const { getAllMensesStarts } = cycleModule({
cycleDaysSortedByDate,
bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
})
const result = getAllMensesStarts()
expect(result.length).to.eql(0)
expect(result).to.eql([])
})
})