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 ded01cf..c9c2b1d 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 { yAxis, normalizeToScale, horizontalGrid } from './y-axis' @@ -21,7 +21,7 @@ export default class CycleChart extends Component { ) } @@ -41,21 +41,23 @@ export default class CycleChart extends Component { render() { return ( - - {yAxisView} - {horizontalGrid} - { item.dateString} - initialNumToRender={15} - maxToRenderPerBatch={5} - > - } - + + + {yAxisView} + {horizontalGrid} + { item.dateString} + initialNumToRender={15} + maxToRenderPerBatch={5} + > + } + + ) } } diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 88eb44e..a7ccfb1 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -15,7 +15,7 @@ const label = styles.column.label export default class DayColumn extends Component { passDateToDayView(dateString) { const cycleDay = getOrCreateCycleDay(dateString) - this.props.navigate('cycleDay', { cycleDay }) + this.props.navigate('CycleDay', { cycleDay }) } shouldComponentUpdate(newProps) { diff --git a/components/cycle-day/action-buttons.js b/components/cycle-day/action-buttons.js deleted file mode 100644 index 78e2479..0000000 --- a/components/cycle-day/action-buttons.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react' -import { - View, - Button, -} from 'react-native' -import { saveSymptom } from '../../db' - -const dayView = 'DayView' - -export default function (showView) { - return function ({ symptom, cycleDay, saveAction, saveDisabled}) { - const buttons = [ - { - title: 'Cancel', - action: () => showView(dayView) - }, - { - title: 'Delete', - action: () => { - saveSymptom(symptom, cycleDay) - showView(dayView) - } - }, { - title: 'Save', - action: () => { - saveAction() - showView(dayView) - }, - disabledCondition: saveDisabled - } - ] - - return buttons.map(({ title, action, disabledCondition }, i) => { - const style = { flex: 1, marginHorizontal: 10 } - if (i === 0) style.marginLeft = 0 - if (i === buttons.length - 1) style.marginRight = 0 - return ( - - - - ) - }) - } -} \ No newline at end of file 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 ee88428..fba3197 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 611f972..629f5b2 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -4,13 +4,15 @@ import { Text, TextInput, Switch, - Keyboard + Keyboard, + ScrollView } from 'react-native' import DateTimePicker from 'react-native-modal-datetime-picker-nevo' import { getPreviousTemperature, saveSymptom } from '../../../db' import styles from '../../../styles' import { LocalTime, ChronoUnit } from 'js-joda' +import ActionButtonFooter from './action-button-footer' const MINUTES = ChronoUnit.MINUTES @@ -40,71 +42,69 @@ export default class Temp extends Component { } render() { - const cycleDay = this.cycleDay return ( - - - Temperature (°C) - { - this.setState({ currentValue: val }) - }} - keyboardType='numeric' - value={this.state.currentValue} - /> - - - Time - { - Keyboard.dismiss() - this.setState({isTimePickerVisible: true}) - }} - value={this.state.time} - /> - - { - let hours = jsDate.getHours() - if (hours < 10) hours = `0${hours}` - let minutes = jsDate.getMinutes() - if (minutes < 10) minutes = `0${minutes}` - this.setState({ - time: `${hours}:${minutes}`, - isTimePickerVisible: false - }) + + + + + Temperature (°C) + { + this.setState({ currentValue: val }) + }} + keyboardType='numeric' + value={this.state.currentValue} + /> + + + 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.currentValue), + exclude: this.state.exclude, + time: this.state.time + } + saveSymptom('temperature', this.props.cycleDay, dataToSave) }} - onCancel={() => this.setState({isTimePickerVisible: false})} + saveDisabled={this.state.currentValue === '' || 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: () => { - const dataToSave = { - value: Number(this.state.currentValue), - exclude: this.state.exclude, - time: this.state.time - } - saveSymptom('temperature', cycleDay, dataToSave) - }, - saveDisabled: this.state.currentValue === '' || 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 af88ef8..4e69a95 100644 --- a/components/labels.js +++ b/components/labels.js @@ -32,6 +32,21 @@ export const 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.`, 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/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/styles/index.js b/styles/index.js index 6e92420..6e14c9f 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 }, @@ -104,5 +167,29 @@ export default StyleSheet.create({ 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