From 8629fd53691184c2b3a962d3bcc83f9268a40aa0 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Mon, 20 Aug 2018 13:44:05 +0200 Subject: [PATCH] Replace action button footer in remaining symptom views --- app.js | 42 +--- components/cycle-day/symptoms/bleeding.js | 32 ++- components/cycle-day/symptoms/cervix.js | 136 +++++------ components/cycle-day/symptoms/desire.js | 50 ++-- components/cycle-day/symptoms/mucus.js | 125 +++++----- components/cycle-day/symptoms/note.js | 28 +-- components/cycle-day/symptoms/sex.js | 238 +++++++++---------- components/cycle-day/symptoms/temperature.js | 113 +++++---- components/stats.js | 1 - styles/index.js | 4 + 10 files changed, 375 insertions(+), 394 deletions(-) diff --git a/app.js b/app.js index b6e9ff5..fe0f57c 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { View, BackHandler, ScrollView } from 'react-native' +import { View, BackHandler } from 'react-native' import Header from './components/header' import Menu from './components/menu' import Home from './components/home' @@ -9,11 +9,11 @@ import symptomViews from './components/cycle-day/symptoms' 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' -import ActionButtonFooter from './components/cycle-day/symptoms/action-button-footer'; YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']) const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1 @@ -46,38 +46,22 @@ export default class App extends Component { this.setState({currentPage: pageName, currentProps: props}) } - setActionButtonState(actionButtonInfo) { - this.setState({actionButtonInfo}) - } - - unsetActionButtonState() { - this.setState({actionButtonInfo: null}) - } - 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), - setActionButtonState: this.setActionButtonState.bind(this), - unsetActionButtonState: this.unsetActionButtonState.bind(this), - ...this.state.currentProps - })} - - - {isSymptomView(this.state.currentPage) && this.state.actionButtonInfo ? - - : - + + + {this.state.currentPage != 'CycleDay' &&
} + + {React.createElement(page, { + navigate: this.navigate.bind(this), + ...this.state.currentProps + })} + + {!isSymptomView(this.state.currentPage) && + } ) diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index ffd1836..ce27ba1 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -8,6 +8,7 @@ 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,8 +33,8 @@ export default class Bleeding extends Component { { label: labels[3], value: 3 }, ] return ( - - + + Bleeding - - {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 - } - )} - + { + 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..2de5582 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -12,6 +12,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 +46,75 @@ 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 ( + + + 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} + /> + + { + 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..351dc97 100644 --- a/components/cycle-day/symptoms/desire.js +++ b/components/cycle-day/symptoms/desire.js @@ -7,6 +7,7 @@ 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,31 @@ 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 - } - )} + + + Desire + + { + 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/mucus.js b/components/cycle-day/symptoms/mucus.js index abafe56..2df033d 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -12,6 +12,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 +32,74 @@ 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 }) - }} - /> + return ( + + + Mucus + Feeling + + { + this.setState({ feeling: itemValue }) + }} + /> + + Texture + + { + this.setState({ texture: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + - 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 - } - )} - - + { + 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..6100a7a 100644 --- a/components/cycle-day/symptoms/note.js +++ b/components/cycle-day/symptoms/note.js @@ -7,6 +7,7 @@ import { import styles from '../../../styles' import { saveSymptom } from '../../../db' +import ActionButtonFooter from './action-button-footer' export default class Temp extends Component { constructor(props) { @@ -22,7 +23,7 @@ export default class Temp extends Component { render() { return ( - + Note - - {this.makeActionButtons({ - symptom: 'note', - cycleDay: this.cycleDay, - saveAction: () => { - saveSymptom('note', this.cycleDay, { - value: this.state.currentValue - }) - }, - saveDisabled: !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..9adb224 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -11,6 +11,7 @@ import { sexActivity as activityLabels, contraceptives as contraceptiveLabels } from '../labels/labels' +import ActionButtonFooter from './action-button-footer' export default class Sex extends Component { constructor(props) { @@ -30,127 +31,126 @@ export default class Sex extends Component { render() { return ( - - SEX - - {activityLabels.solo} - { - this.setState({solo: val}) - }} - /> - {activityLabels.partner} - { - this.setState({partner: val}) - }} - /> + + + 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 }) + }} + /> + } - 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) + { + 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 a7bd55e..4c2d97e 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -11,6 +11,7 @@ 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 @@ -37,72 +38,70 @@ export default class Temp extends Component { time: this.time || LocalTime.now().truncatedTo(MINUTES).toString(), isTimePickerVisible: false } - - props.setActionButtonState({ - symptom : 'temperature', - cycleDay: props.cycleDay, - saveAction: () => { - const dataToSave = { - value: Number(this.state.currentValue), - exclude: this.state.exclude, - time: this.state.time - } - saveSymptom('temperature', props.cycleDay, dataToSave) - }, - saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time) - }) - } - - componentWillUnmount() { - this.props.unsetActionButtonState() } render() { return ( - - - Temperature (°C) - { - this.setState({ currentValue: val }) + + + + 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 + }) }} - keyboardType='numeric' - value={this.state.currentValue} + onCancel={() => this.setState({ isTimePickerVisible: false })} /> + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + - - Time - { - Keyboard.dismiss() - this.setState({ isTimePickerVisible: true }) - }} - value={this.state.time} - /> - - { - this.setState({ - time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, - isTimePickerVisible: false - }) + { + 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} - /> - ) } diff --git a/components/stats.js b/components/stats.js index 864c139..4021fde 100644 --- a/components/stats.js +++ b/components/stats.js @@ -5,7 +5,6 @@ import { ScrollView } from 'react-native' import { LocalDate, ChronoUnit } from 'js-joda' -import Header from './header' import styles from '../styles/index' import cycleModule from '../lib/cycle' import getCycleInfo from '../lib/cycle-length' diff --git a/styles/index.js b/styles/index.js index 6cf269e..b1476b0 100644 --- a/styles/index.js +++ b/styles/index.js @@ -83,6 +83,10 @@ export default StyleSheet.create({ symptomDataText: { fontSize: 12 }, + menuOnBottom: { + flex: 1, + justifyContent: 'space-between' + }, symptomEditRow: { justifyContent: 'space-between', marginBottom: 10,