diff --git a/app.js b/app.js deleted file mode 100644 index 7735256..0000000 --- a/app.js +++ /dev/null @@ -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) \ No newline at end of file diff --git a/components/app.js b/components/app.js new file mode 100644 index 0000000..b0924aa --- /dev/null +++ b/components/app.js @@ -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 ( + + + {this.state.currentPage != 'CycleDay' &&
} + + {React.createElement(page, { + navigate: this.navigate.bind(this), + ...this.state.currentProps + })} + + {!isSymptomView(this.state.currentPage) && + + } + + ) + } +} \ No newline at end of file diff --git a/components/calendar.js b/components/calendar.js index 4aa7f13..72fb1ba 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -1,7 +1,5 @@ import React, { Component } from 'react' -import { View } from 'react-native' import { CalendarList } from 'react-native-calendars' -import * as styles from '../styles' import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db' export default class CalendarView extends Component { @@ -12,7 +10,8 @@ export default class CalendarView extends Component { } this.setStateWithCalFormattedDays = (function (CalendarComponent) { - return function() { + return function(_, changes) { + if (Object.values(changes).every(x => x && !x.length)) return CalendarComponent.setState({ bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate) }) @@ -28,19 +27,17 @@ export default class CalendarView extends Component { passDateToDayView(result) { const cycleDay = getOrCreateCycleDay(result.dateString) - const navigate = this.props.navigation.navigate + const navigate = this.props.navigate navigate('CycleDay', { cycleDay }) } render() { return ( - - - + ) } } diff --git a/components/chart/chart.js b/components/chart/chart.js index da19f2c..09bcf44 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { View, FlatList } from 'react-native' +import { View, FlatList, ScrollView } from 'react-native' import range from 'date-range' import { LocalDate } from 'js-joda' import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis' @@ -20,7 +20,7 @@ export default class CycleChart extends Component { ) } @@ -42,21 +42,23 @@ export default class CycleChart extends Component { render() { return ( - - {makeYAxisLabels()} - {makeHorizontalGrid()} - { item.dateString} - initialNumToRender={15} - maxToRenderPerBatch={5} - > - } - + + + {makeYAxisLabels()} + {makeHorizontalGrid()} + { item.dateString} + initialNumToRender={15} + maxToRenderPerBatch={5} + > + } + + ) } } diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index b127b74..168954f 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -1,10 +1,17 @@ import React, { Component } from 'react' import { + ScrollView, View, - Button, - Text + Text, + TouchableOpacity, + Dimensions } 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 { bleeding as bleedingLabels, mucusFeeling as feelingLabels, @@ -15,103 +22,83 @@ import { cervixPosition as positionLabels, intensity as intensityLabels } from './labels/labels' -import cycleDayModule from '../../lib/cycle' -import { bleedingDaysSortedByDate } from '../../db' -const getCycleDayNumber = cycleDayModule().getCycleDayNumber - -export default class DayView extends Component { +export default class CycleDayOverView extends Component { constructor(props) { super(props) - this.cycleDay = props.cycleDay - this.showView = props.showView 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() { - bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber) + goToCycleDay(target) { + 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() { - const cycleDay = this.cycleDay + const cycleDay = this.state.cycleDay + const getCycleDayNumber = cycleModule().getCycleDayNumber + const cycleDayNumber = getCycleDayNumber(cycleDay.date) return ( - - - Bleeding - - - - - - Temperature - - - - - - Mucus - - - - - - Cervix - - - - - - Note - - - - - - Desire - - - - - - Sex - - - - + +
+ + + this.navigate('BleedingEditView')} + data={getLabel('bleeding', cycleDay.bleeding)} + /> + this.navigate('TemperatureEditView')} + data={getLabel('temperature', cycleDay.temperature)} + /> + this.navigate('MucusEditView')} + data={getLabel('mucus', cycleDay.mucus)} + /> + this.navigate('CervixEditView')} + data={getLabel('cervix', cycleDay.cervix)} + /> + this.navigate('NoteEditView')} + data={getLabel('note', cycleDay.note)} + /> + this.navigate('DesireEditView')} + data={getLabel('desire', cycleDay.desire)} + /> + this.navigate('SexEditView')} + data={getLabel('sex', cycleDay.sex)} + /> + {/* this is just to make the last row adhere to the grid + (and) because there are no pseudo properties in RN */} + + + ) } @@ -136,33 +123,28 @@ function getLabel(symptomName, symptom) { } }, mucus: mucus => { - if ( - typeof mucus.feeling === 'number' && - typeof mucus.texture === 'number' && - typeof mucus.value === 'number' - ) { - let mucusLabel = - `${feelingLabels[mucus.feeling]} + - ${textureLabels[mucus.texture]} - ( ${computeSensiplanMucusLabels[mucus.value]} )` - if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )" + const categories = ['feeling', 'texture', 'value'] + if (categories.every(c => typeof mucus[c] === 'number')) { + let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ') + mucusLabel += `\n${computeSensiplanMucusLabels[mucus.value]}` + if (mucus.exclude) mucusLabel = `(${mucusLabel})` return mucusLabel } }, cervix: cervix => { + let cervixLabel = [] if (cervix.opening > -1 && cervix.firmness > -1) { - let cervixLabel = - `${openingLabels[cervix.opening]} + - ${firmnessLabels[cervix.firmness]}` + cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness]) 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 } }, note: note => { - return note.value.slice(0, 12) + '...' + return note.value }, desire: desire => { if (typeof desire.value === 'number') { @@ -171,18 +153,64 @@ function getLabel(symptomName, symptom) { } }, sex: sex => { - let sexLabel = '' + const sexLabel = [] if ( sex.solo || sex.partner ) { - sexLabel += 'Activity ' + sexLabel.push('activity') } if (sex.condom || sex.pill || sex.iud || sex.patch || sex.ring || sex.implant || sex.other) { - sexLabel += 'Contraceptive' + sexLabel.push('contraceptive') } - return sexLabel ? sexLabel : 'edit' + return sexLabel.join(', ') } } - if (!symptom) return 'edit' - return labels[symptomName](symptom) || 'edit' + if (!symptom) return + 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 ( + + + + {this.props.title} + + + {this.props.data} + + + ) + } +} + +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( + + ) + } + return fillerBoxes + } +} \ No newline at end of file diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js deleted file mode 100644 index 94bb51e..0000000 --- a/components/cycle-day/index.js +++ /dev/null @@ -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 ( - - - - {formatDateForViewHeader(this.cycleDay.date)} - - - - { cycleDayNumber && - - Cycle day {cycleDayNumber} - } - - - {fertilityStatus} - - - - { this.cycleDayViews[this.state.visibleComponent] } - - - ) - } -} diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js index c2e185b..910e6c9 100644 --- a/components/cycle-day/labels/labels.js +++ b/components/cycle-day/labels/labels.js @@ -1,7 +1,7 @@ export const bleeding = ['spotting', 'light', 'medium', 'heavy'] export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery'] 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 cervixFirmness = ['hard', 'soft'] export const cervixPosition = ['low', 'medium', 'high'] diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js new file mode 100644 index 0000000..a153496 --- /dev/null +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -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 ( + + {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 ( + + + + {title} + + + ) + })} + + ) + } +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 7ec0574..bd24b9e 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -2,12 +2,14 @@ import React, { Component } from 'react' import { View, Text, - Switch + Switch, + ScrollView } from 'react-native' import RadioForm from 'react-native-simple-radio-button' import styles from '../../../styles' import { saveSymptom } from '../../../db' import { bleeding as labels } from '../labels/labels' +import ActionButtonFooter from './action-button-footer' export default class Bleeding extends Component { constructor(props) { @@ -32,44 +34,44 @@ export default class Bleeding extends Component { { label: labels[3], value: 3 }, ] return ( - - Bleeding - - { - this.setState({ currentValue: itemValue }) - }} - /> - - - Exclude - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> - - - {this.makeActionButtons( - { - symptom: 'bleeding', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('bleeding', this.cycleDay, { - value: this.state.currentValue, - exclude: this.state.exclude - }) - }, - saveDisabled: this.state.currentValue === -1 - } - )} - + + + + + { + this.setState({ currentValue: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + + { + saveSymptom('bleeding', this.props.cycleDay, { + value: this.state.currentValue, + exclude: this.state.exclude + }) + }} + saveDisabled={this.state.currentValue === -1} + navigate={this.props.navigate} + /> ) } diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index 59d9d8b..d1d8ba6 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -2,7 +2,8 @@ import React, { Component } from 'react' import { View, Text, - Switch + Switch, + ScrollView } from 'react-native' import RadioForm from 'react-native-simple-radio-button' import styles from '../../../styles' @@ -12,6 +13,7 @@ import { cervixFirmness as firmnessLabels, cervixPosition as positionLabels } from '../labels/labels' +import ActionButtonFooter from './action-button-footer' export default class Cervix extends Component { constructor(props) { @@ -45,76 +47,76 @@ export default class Cervix extends Component { const cervixPositionRadioProps = [ {label: positionLabels[0], value: 0 }, {label: positionLabels[1], value: 1 }, - {label: positionLabels[2], value: 2 } + { label: positionLabels[2], value: 2 } ] - return( - - Cervix - Opening - - { - this.setState({opening: itemValue}) - }} - /> - - Firmness - - { - this.setState({firmness: itemValue}) - }} - /> - - Position - - { - this.setState({position: itemValue}) - }} - /> - - - Exclude - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> - - - {this.makeActionButtons( - { - symptom: 'cervix', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('cervix', this.cycleDay, { - opening: this.state.opening, - firmness: this.state.firmness, - position: this.state.position, - exclude: this.state.exclude - }) - }, - saveDisabled: this.state.opening === -1 || this.state.firmness === -1 - } - )} - + return ( + + + + Opening + + { + this.setState({ opening: itemValue }) + }} + /> + + Firmness + + { + this.setState({ firmness: itemValue }) + }} + /> + + Position + + { + this.setState({ position: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + + { + saveSymptom('cervix', this.cycleDay, { + opening: this.state.opening, + firmness: this.state.firmness, + position: this.state.position, + exclude: this.state.exclude + }) + }} + saveDisabled={this.state.opening === -1 || this.state.firmness === -1} + navigate={this.props.navigate} + /> ) } diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js index 58a7ceb..2dd6fc6 100644 --- a/components/cycle-day/symptoms/desire.js +++ b/components/cycle-day/symptoms/desire.js @@ -1,12 +1,13 @@ import React, { Component } from 'react' import { View, - Text + ScrollView } from 'react-native' import RadioForm from 'react-native-simple-radio-button' import styles from '../../../styles' import { saveSymptom } from '../../../db' import { intensity as labels } from '../labels/labels' +import ActionButtonFooter from './action-button-footer' export default class Desire extends Component { constructor(props) { @@ -27,32 +28,32 @@ export default class Desire extends Component { { label: labels[2], value: 2 } ] return ( - - Desire - - { - this.setState({ currentValue: itemValue }) - }} - /> - - - {this.makeActionButtons( - { - symptom: 'desire', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('desire', this.cycleDay, { value: this.state.currentValue }) - }, - saveDisabled: this.state.currentValue === -1 - } - )} - + + + + + { + this.setState({ currentValue: itemValue }) + }} + /> + + + + { + saveSymptom('desire', this.cycleDay, { value: this.state.currentValue }) + }} + saveDisabled={this.state.currentValue === -1} + navigate={this.props.navigate} + /> ) } diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js index c3583df..12622b7 100644 --- a/components/cycle-day/symptoms/index.js +++ b/components/cycle-day/symptoms/index.js @@ -14,4 +14,4 @@ export default { NoteEditView, DesireEditView, SexEditView -} +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index abafe56..f846bfd 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -2,7 +2,8 @@ import React, { Component } from 'react' import { View, Text, - Switch + Switch, + ScrollView } from 'react-native' import RadioForm from 'react-native-simple-radio-button' import styles from '../../../styles' @@ -12,6 +13,7 @@ import { mucusTexture as textureLabels } from '../labels/labels' import computeSensiplanValue from '../../../lib/sensiplan-mucus' +import ActionButtonFooter from './action-button-footer' export default class Mucus extends Component { @@ -31,78 +33,75 @@ export default class Mucus extends Component { } }) /* eslint-enable react/no-direct-mutation-state */ - } render() { const mucusFeelingRadioProps = [ - {label: feelingLabels[0], value: 0 }, - {label: feelingLabels[1], value: 1 }, - {label: feelingLabels[2], value: 2 }, - {label: feelingLabels[3], value: 3 } + { label: feelingLabels[0], value: 0 }, + { label: feelingLabels[1], value: 1 }, + { label: feelingLabels[2], value: 2 }, + { label: feelingLabels[3], value: 3 } ] const mucusTextureRadioProps = [ - {label: textureLabels[0], value: 0 }, - {label: textureLabels[1], value: 1 }, - {label: textureLabels[2], value: 2 } + { label: textureLabels[0], value: 0 }, + { label: textureLabels[1], value: 1 }, + { label: textureLabels[2], value: 2 } ] - return( - - Mucus - Feeling - - { - this.setState({feeling: itemValue }) - }} - /> - - Texture - - { - this.setState({texture: itemValue }) - }} - /> - - - Exclude - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> - - - - {this.makeActionButtons( - { - symptom: 'mucus', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('mucus', this.cycleDay, { - feeling: this.state.feeling, - texture: this.state.texture, - value: computeSensiplanValue(this.state.feeling, this.state.texture), - exclude: this.state.exclude - }) - }, - saveDisabled: this.state.feeling === -1 || this.state.texture === -1 - } - )} - - + return ( + + + + Feeling + + { + this.setState({ feeling: itemValue }) + }} + /> + + Texture + + { + this.setState({ texture: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + + { + saveSymptom('mucus', this.cycleDay, { + feeling: this.state.feeling, + texture: this.state.texture, + value: computeSensiplanValue(this.state.feeling, this.state.texture), + exclude: this.state.exclude + }) + }} + saveDisabled={this.state.feeling === -1 || this.state.texture === -1} + navigate={this.props.navigate} + /> ) } diff --git a/components/cycle-day/symptoms/note.js b/components/cycle-day/symptoms/note.js index 1796600..6bf0cb6 100644 --- a/components/cycle-day/symptoms/note.js +++ b/components/cycle-day/symptoms/note.js @@ -1,12 +1,13 @@ import React, { Component } from 'react' import { View, - Text, + ScrollView, TextInput, } from 'react-native' import styles from '../../../styles' import { saveSymptom } from '../../../db' +import ActionButtonFooter from './action-button-footer' export default class Temp extends Component { constructor(props) { @@ -22,31 +23,31 @@ export default class Temp extends Component { render() { return ( - - - Note - { - this.setState({ currentValue: val }) - }} - value={this.state.currentValue} - /> - - - {this.makeActionButtons({ - symptom: 'note', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('note', this.cycleDay, { - value: this.state.currentValue - }) - }, - saveDisabled: !this.state.currentValue - })} - + + + + { + this.setState({ currentValue: val }) + }} + value={this.state.currentValue} + /> + + + { + saveSymptom('note', this.cycleDay, { + value: this.state.currentValue + }) + }} + saveDisabled={!this.state.currentValue} + navigate={this.props.navigate} + /> ) } -} +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js index d9ec336..2ca06ef 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -3,7 +3,8 @@ import { CheckBox, Text, TextInput, - View + View, + ScrollView } from 'react-native' import styles from '../../../styles' import { saveSymptom } from '../../../db' @@ -11,13 +12,14 @@ import { sexActivity as activityLabels, contraceptives as contraceptiveLabels } from '../labels/labels' +import ActionButtonFooter from './action-button-footer' export default class Sex extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay this.state = {} - if (this.cycleDay.sex !== null ) { + if (this.cycleDay.sex !== null) { Object.assign(this.state, this.cycleDay.sex) // We make sure other is always true when there is a note, // e.g. when import is messed up. @@ -30,127 +32,127 @@ export default class Sex extends Component { render() { return ( - - SEX - - {activityLabels.solo} - { - this.setState({solo: val}) - }} - /> - {activityLabels.partner} - { - this.setState({partner: val}) - }} - /> - - CONTRACEPTIVES - - - {contraceptiveLabels.condom} - - { - this.setState({condom: val}) - }} - /> - - {contraceptiveLabels.pill} - - { - this.setState({pill: val}) - }} - /> - - - - {contraceptiveLabels.iud} - - { - this.setState({iud: val}) - }} - /> - - {contraceptiveLabels.patch} - - { - this.setState({patch: val}) - }} - /> - - - - {contraceptiveLabels.ring} - - { - this.setState({ring: val}) - }} - /> - - {contraceptiveLabels.implant} - - { - this.setState({implant: val}) - }} - /> - - - - {contraceptiveLabels.other} - - { - this.setState({ - other: val, - focusTextArea: true - }) - }} - /> - - { this.state.other && - { - this.setState({note: val}) - }} - /> - } - - {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) + + + + + {activityLabels.solo} + { + this.setState({ solo: val }) + }} + /> + {activityLabels.partner} + { + this.setState({ partner: val }) + }} + /> + + CONTRACEPTIVES + + + {contraceptiveLabels.condom} + + { + this.setState({ condom: val }) + }} + /> + + {contraceptiveLabels.pill} + + { + this.setState({ pill: val }) + }} + /> + + + + {contraceptiveLabels.iud} + + { + this.setState({ iud: val }) + }} + /> + + {contraceptiveLabels.patch} + + { + this.setState({ patch: val }) + }} + /> + + + + {contraceptiveLabels.ring} + + { + this.setState({ ring: val }) + }} + /> + + {contraceptiveLabels.implant} + + { + this.setState({ implant: val }) + }} + /> + + + + {contraceptiveLabels.other} + + { + this.setState({ + other: val, + focusTextArea: true + }) + }} + /> + + {this.state.other && + { + this.setState({ note: val }) + }} + /> } - )} - + + + { + 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} + /> ) } -} +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index 955fe16..fd3f905 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -5,7 +5,8 @@ import { TextInput, Switch, Keyboard, - Alert + Alert, + ScrollView } from 'react-native' 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 { scaleObservable } from '../../../local-storage' import { shared } from '../../labels' +import ActionButtonFooter from './action-button-footer' const minutes = ChronoUnit.MINUTES @@ -50,64 +52,68 @@ export default class Temp extends Component { render() { return ( - - - Temperature (°C) - this.setState(val)} - isSuggestion={this.state.isSuggestion} - /> - - - Time - { - Keyboard.dismiss() - this.setState({isTimePickerVisible: true}) - }} - value={this.state.time} - /> - - { - this.setState({ - time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, - isTimePickerVisible: false - }) + + + + + Temperature (°C) + this.setState(val)} + isSuggestion={this.state.isSuggestion} + /> + + + Time + { + Keyboard.dismiss() + this.setState({ isTimePickerVisible: true }) + }} + value={this.state.time} + /> + + { + this.setState({ + time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, + isTimePickerVisible: false + }) + }} + onCancel={() => this.setState({ isTimePickerVisible: false })} + /> + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + + { + 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} /> - - Exclude - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> - - - {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) - })} - ) } diff --git a/components/header.js b/components/header.js new file mode 100644 index 0000000..a4d3414 --- /dev/null +++ b/components/header.js @@ -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 ? + + this.props.goToCycleDay('before')} + /> + + + {formatDateForViewHeader(this.props.date)} + + {this.props.cycleDayNumber && + + Cycle day {this.props.cycleDayNumber} + } + + this.props.goToCycleDay('after')} + /> + + : + + + {this.props.title} + + + ) + } +} \ No newline at end of file diff --git a/components/home.js b/components/home.js index 5381e3b..2962492 100644 --- a/components/home.js +++ b/components/home.js @@ -41,7 +41,7 @@ export default class Home extends Component { passTodayToDayView() { const todayDateString = LocalDate.now().toString() const cycleDay = getOrCreateCycleDay(todayDateString) - const navigate = this.props.navigation.navigate + const navigate = this.props.navigate navigate('CycleDay', { cycleDay }) } diff --git a/components/labels.js b/components/labels.js index 27cef63..6abed86 100644 --- a/components/labels.js +++ b/components/labels.js @@ -42,4 +42,30 @@ export const settings = { loadError: 'Could not load saved 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' } \ No newline at end of file diff --git a/components/menu.js b/components/menu.js new file mode 100644 index 0000000..8a55187 --- /dev/null +++ b/components/menu.js @@ -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 ( + + + + {title} + + + ) + } + + goTo(componentName) { + this.props.navigate(componentName) + } + + render() { + return ( + + {[ + { 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))} + + ) + } +} diff --git a/components/stats.js b/components/stats.js index 4021fde..f3f136c 100644 --- a/components/stats.js +++ b/components/stats.js @@ -8,15 +8,50 @@ import { LocalDate, ChronoUnit } from 'js-joda' import styles from '../styles/index' import cycleModule from '../lib/cycle' import getCycleInfo from '../lib/cycle-length' +import {stats as labels} from './labels' export default class Stats extends Component { render() { 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 ( - {statsText} + {!atLeastOneCycle && + {labels.emptyStats} + } + {atLeastOneCycle && numberOfCycles === 1 && + {labels.oneCycleStats(cycleLengths[0])} + } + {atLeastOneCycle && numberOfCycles > 1 && + {labels.getBasisOfStats(numberOfCycles)} + + {labels.averageLabel} + {cycleInfo.mean + ' ' + labels.daysLabel} + + + {labels.minLabel} + {cycleInfo.minimum + ' ' + labels.daysLabel} + + + {labels.maxLabel} + {cycleInfo.maximum + ' ' + labels.daysLabel} + + + {labels.stdLabel} + {cycleInfo.stdDeviation + ' ' + labels.daysLabel} + + } ) @@ -31,21 +66,4 @@ function getCycleLength(cycleStartDates) { cycleLengths.push(cycleStart.until(nextCycleStart, ChronoUnit.DAYS)) } 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 - } } \ No newline at end of file diff --git a/index.js b/index.js index 408a2f0..25e2616 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ import { AppRegistry } from 'react-native' -import App from './app' +import App from './components/app' AppRegistry.registerComponent('home', () => App) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2df2c48..9c136b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3721,8 +3721,8 @@ "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==", "optional": true, "requires": { - "nan": "^2.9.2", - "node-pre-gyp": "^0.10.0" + "nan": "2.10.0", + "node-pre-gyp": "0.10.0" }, "dependencies": { "abbrev": { @@ -3744,19 +3744,21 @@ "bundled": true, "optional": true, "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" + "delegates": "1.0.0", + "readable-stream": "2.3.6" } }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { - "balanced-match": "^1.0.0", + "balanced-match": "1.0.0", "concat-map": "0.0.1" } }, @@ -3767,15 +3769,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3810,7 +3815,7 @@ "bundled": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "2.2.4" } }, "fs.realpath": { @@ -3823,14 +3828,14 @@ "bundled": true, "optional": true, "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" + "aproba": "1.2.0", + "console-control-strings": "1.1.0", + "has-unicode": "2.0.1", + "object-assign": "4.1.1", + "signal-exit": "3.0.2", + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wide-align": "1.1.2" } }, "glob": { @@ -3838,12 +3843,12 @@ "bundled": true, "optional": true, "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" } }, "has-unicode": { @@ -3856,7 +3861,7 @@ "bundled": true, "optional": true, "requires": { - "safer-buffer": "^2.1.0" + "safer-buffer": "2.1.2" } }, "ignore-walk": { @@ -3864,7 +3869,7 @@ "bundled": true, "optional": true, "requires": { - "minimatch": "^3.0.4" + "minimatch": "3.0.4" } }, "inflight": { @@ -3872,13 +3877,14 @@ "bundled": true, "optional": true, "requires": { - "once": "^1.3.0", - "wrappy": "1" + "once": "1.4.0", + "wrappy": "1.0.2" } }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3888,8 +3894,9 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { - "number-is-nan": "^1.0.0" + "number-is-nan": "1.0.1" } }, "isarray": { @@ -3900,20 +3907,23 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { - "brace-expansion": "^1.1.7" + "brace-expansion": "1.1.11" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { - "safe-buffer": "^5.1.1", - "yallist": "^3.0.0" + "safe-buffer": "5.1.1", + "yallist": "3.0.2" } }, "minizlib": { @@ -3921,12 +3931,13 @@ "bundled": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "2.2.4" } }, "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3941,9 +3952,9 @@ "bundled": true, "optional": true, "requires": { - "debug": "^2.1.2", - "iconv-lite": "^0.4.4", - "sax": "^1.2.4" + "debug": "2.6.9", + "iconv-lite": "0.4.21", + "sax": "1.2.4" } }, "node-pre-gyp": { @@ -3951,16 +3962,16 @@ "bundled": true, "optional": true, "requires": { - "detect-libc": "^1.0.2", - "mkdirp": "^0.5.1", - "needle": "^2.2.0", - "nopt": "^4.0.1", - "npm-packlist": "^1.1.6", - "npmlog": "^4.0.2", - "rc": "^1.1.7", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^4" + "detect-libc": "1.0.3", + "mkdirp": "0.5.1", + "needle": "2.2.0", + "nopt": "4.0.1", + "npm-packlist": "1.1.10", + "npmlog": "4.1.2", + "rc": "1.2.7", + "rimraf": "2.6.2", + "semver": "5.5.0", + "tar": "4.4.1" } }, "nopt": { @@ -3968,8 +3979,8 @@ "bundled": true, "optional": true, "requires": { - "abbrev": "1", - "osenv": "^0.1.4" + "abbrev": "1.1.1", + "osenv": "0.1.5" } }, "npm-bundled": { @@ -3982,8 +3993,8 @@ "bundled": true, "optional": true, "requires": { - "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1" + "ignore-walk": "3.0.1", + "npm-bundled": "1.0.3" } }, "npmlog": { @@ -3991,15 +4002,16 @@ "bundled": true, "optional": true, "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" + "are-we-there-yet": "1.1.4", + "console-control-strings": "1.1.0", + "gauge": "2.7.4", + "set-blocking": "2.0.0" } }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4009,8 +4021,9 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { - "wrappy": "1" + "wrappy": "1.0.2" } }, "os-homedir": { @@ -4028,8 +4041,8 @@ "bundled": true, "optional": true, "requires": { - "os-homedir": "^1.0.0", - "os-tmpdir": "^1.0.0" + "os-homedir": "1.0.2", + "os-tmpdir": "1.0.2" } }, "path-is-absolute": { @@ -4047,10 +4060,10 @@ "bundled": true, "optional": true, "requires": { - "deep-extend": "^0.5.1", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" + "deep-extend": "0.5.1", + "ini": "1.3.5", + "minimist": "1.2.0", + "strip-json-comments": "2.0.1" }, "dependencies": { "minimist": { @@ -4065,13 +4078,13 @@ "bundled": true, "optional": true, "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "2.0.0", + "safe-buffer": "5.1.1", + "string_decoder": "1.1.1", + "util-deprecate": "1.0.2" } }, "rimraf": { @@ -4079,7 +4092,7 @@ "bundled": true, "optional": true, "requires": { - "glob": "^7.0.5" + "glob": "7.1.2" } }, "safe-buffer": { @@ -4114,10 +4127,11 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" + "code-point-at": "1.1.0", + "is-fullwidth-code-point": "1.0.0", + "strip-ansi": "3.0.1" } }, "string_decoder": { @@ -4125,14 +4139,14 @@ "bundled": true, "optional": true, "requires": { - "safe-buffer": "~5.1.0" + "safe-buffer": "5.1.1" } }, "strip-ansi": { "version": "3.0.1", "bundled": true, "requires": { - "ansi-regex": "^2.0.0" + "ansi-regex": "2.1.1" } }, "strip-json-comments": { @@ -4145,13 +4159,13 @@ "bundled": true, "optional": true, "requires": { - "chownr": "^1.0.1", - "fs-minipass": "^1.2.5", - "minipass": "^2.2.4", - "minizlib": "^1.1.0", - "mkdirp": "^0.5.0", - "safe-buffer": "^5.1.1", - "yallist": "^3.0.2" + "chownr": "1.0.1", + "fs-minipass": "1.2.5", + "minipass": "2.2.4", + "minizlib": "1.1.0", + "mkdirp": "0.5.1", + "safe-buffer": "5.1.1", + "yallist": "3.0.2" } }, "util-deprecate": { @@ -4164,7 +4178,7 @@ "bundled": true, "optional": true, "requires": { - "string-width": "^1.0.2" + "string-width": "1.0.2" } }, "wrappy": { diff --git a/styles/index.js b/styles/index.js index a8844b1..2019b9c 100644 --- a/styles/index.js +++ b/styles/index.js @@ -1,10 +1,10 @@ import { StyleSheet } from 'react-native' +export const primaryColor = '#ff7e5f' +export const secondaryColor = '#351c4d' +export const fontOnPrimaryColor = 'white' + export default StyleSheet.create({ - container: { - justifyContent: 'center', - alignItems: 'center' - }, welcome: { fontSize: 20, margin: 30, @@ -12,31 +12,72 @@ export default StyleSheet.create({ textAlignVertical: 'center' }, dateHeader: { - fontSize: 20, + fontSize: 18, fontWeight: 'bold', - margin: 15, - color: 'white', + color: fontOnPrimaryColor, textAlign: 'center', - textAlignVertical: 'center' }, cycleDayNumber: { - fontSize: 18, + fontSize: 15, + color: fontOnPrimaryColor, textAlign: 'center', - textAlignVertical: 'center' + marginLeft: 15 }, symptomDayView: { fontSize: 20, textAlignVertical: 'center' }, + symptomBoxImage: { + width: 50, + height: 50 + }, radioButton: { fontSize: 18, margin: 8, textAlign: 'center', textAlignVertical: 'center' }, - symptomEditView: { - justifyContent: 'space-between', - marginHorizontal: 15 + symptomBoxesView: { + flexDirection: 'row', + 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: { justifyContent: 'space-between', @@ -49,16 +90,38 @@ export default StyleSheet.create({ alignItems: 'center', height: 50 }, - cycleDayDateView: { - justifyContent: 'center', - backgroundColor: 'steelblue' + header: { + backgroundColor: primaryColor, + paddingVertical: 18, + paddingHorizontal: 15, + alignItems: 'center', + justifyContent: 'center' }, - cycleDayNumberView: { - justifyContent: 'center', - backgroundColor: 'skyblue', - marginBottom: 15, + menu: { + backgroundColor: primaryColor, + alignItems: 'center', + justifyContent: 'space-between', + flexDirection: 'row' + }, + menuItem: { + alignItems: 'center', + flex: 1, paddingVertical: 15 }, + menuText: { + color: fontOnPrimaryColor + }, + menuTextInActive: { + color: 'lightgrey' + }, + headerCycleDay: { + flexDirection: 'row', + justifyContent: 'space-between' + }, + navigationArrow: { + fontSize: 60, + color: fontOnPrimaryColor + }, homeButtons: { marginHorizontal: 15 }, @@ -85,16 +148,16 @@ export default StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto' }, - stats: { + statsIntro: { fontSize: 18, - margin: 30, + margin: 10, textAlign: 'left', textAlignVertical: 'center' }, settingsSegment: { backgroundColor: 'lightgrey', padding: 10, - marginTop: 10, + marginBottom: 10, }, settingsSegmentTitle: { fontWeight: 'bold' @@ -108,7 +171,44 @@ export default StyleSheet.create({ settingsButtonText: { color: 'white' }, - warning: { - color: 'red' + statsRow: { + 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' } -}) \ No newline at end of file +} \ No newline at end of file diff --git a/test/cycle-length.spec.js b/test/cycle-length.spec.js index 043cf96..ee05fcb 100644 --- a/test/cycle-length.spec.js +++ b/test/cycle-length.spec.js @@ -17,7 +17,7 @@ describe('getCycleLengthStats', () => { stdDeviation: 53.06 } expect(result).to.eql(expectedResult) - }) + }), it('works for a simple even-numbered array', () => { const cycleLengths = [4, 1, 15, 2, 20, 5] @@ -30,7 +30,8 @@ describe('getCycleLengthStats', () => { stdDeviation: 7.78 } expect(result).to.eql(expectedResult) - }) + }), + it('works for an one-element array', () => { const cycleLengths = [42] const result = cycleInfo(cycleLengths) @@ -42,20 +43,60 @@ describe('getCycleLengthStats', () => { stdDeviation: null } 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', () => { it('throws when arg object is an empty array', () => { const cycleLengths = [] expect(() => cycleInfo(cycleLengths).to.throw(AssertionError)) - }) + }), it('throws when arg object is not in right format', () => { const wrongObject = { hello: 'world' } expect(() => cycleInfo(wrongObject).to.throw(AssertionError)) - }) + }), it('throws when arg array contains a string', () => { const wrongElement = [4, 1, 15, '2', 20, 5] expect(() => cycleInfo(wrongElement).to.throw(AssertionError)) - }) + }), it('throws when arg array contains a NaN', () => { const wrongElement = [4, 1, 15, NaN, 20, 5] expect(() => cycleInfo(wrongElement).to.throw(AssertionError)) diff --git a/test/cycle.spec.js b/test/cycle.spec.js index a0efa7d..3aa3462 100644 --- a/test/cycle.spec.js +++ b/test/cycle.spec.js @@ -343,4 +343,82 @@ 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([]) + }) }) \ No newline at end of file