From 08fd3afc3444e38bf6f237cfe1e9b39e1dd32e8c Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 11 May 2019 17:42:57 +0200 Subject: [PATCH] Add symptom view component with back button listener --- components/cycle-day/symptoms/bleeding.js | 19 +++++++------ components/cycle-day/symptoms/cervix.js | 16 +++++++++-- components/cycle-day/symptoms/desire.js | 14 ++++++---- components/cycle-day/symptoms/info-symptom.js | 5 ++-- components/cycle-day/symptoms/mood.js | 22 ++++++++------- components/cycle-day/symptoms/mucus.js | 28 ++++++++++--------- components/cycle-day/symptoms/note.js | 16 ++++++----- components/cycle-day/symptoms/pain.js | 20 +++++++------ components/cycle-day/symptoms/sex.js | 20 +++++++------ components/cycle-day/symptoms/symptom-view.js | 13 +++++++++ components/cycle-day/symptoms/temperature.js | 12 +++++--- 11 files changed, 113 insertions(+), 72 deletions(-) create mode 100644 components/cycle-day/symptoms/symptom-view.js diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index faebf1b..890df1b 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, Switch, @@ -10,8 +10,9 @@ import { bleeding } from '../../../i18n/en/cycle-day' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' -export default class Bleeding extends Component { +export default class Bleeding extends SymptomView { constructor(props) { super(props) const cycleDay = props.cycleDay @@ -22,6 +23,13 @@ export default class Bleeding extends Component { } } + save() { + saveSymptom('bleeding', this.props.date, { + value: this.state.currentValue, + exclude: this.state.exclude + }) + } + render() { const bleedingRadioProps = [ { label: bleeding.labels[0], value: 0 }, @@ -59,13 +67,6 @@ export default class Bleeding extends Component { symptom='bleeding' date={this.props.date} currentSymptomValue={this.bleeding} - saveAction={() => { - saveSymptom('bleeding', this.props.date, { - value: this.state.currentValue, - exclude: this.state.exclude - }) - }} - saveDisabled={typeof this.state.currentValue != 'number'} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index 457c914..811cb2e 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, Switch, @@ -10,15 +10,25 @@ import { cervix as labels } from '../../../i18n/en/cycle-day' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' -export default class Cervix extends Component { +export default class Cervix extends SymptomView { constructor(props) { - super(props) + super() const cycleDay = props.cycleDay this.cervix = cycleDay && cycleDay.cervix this.state = this.cervix ? this.cervix : {} } + save() { + saveSymptom('cervix', this.props.date, { + opening: this.state.opening, + firmness: this.state.firmness, + position: this.state.position, + exclude: Boolean(this.state.exclude) + }) + } + render() { const cervixOpeningRadioProps = [ { label: labels.opening.categories[0], value: 0 }, diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js index 6c20bf0..6b690db 100644 --- a/components/cycle-day/symptoms/desire.js +++ b/components/cycle-day/symptoms/desire.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, ScrollView @@ -9,16 +9,21 @@ import { intensity, desire } from '../../../i18n/en/cycle-day' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' -export default class Desire extends Component { +export default class Desire extends SymptomView { constructor(props) { - super(props) + super() const cycleDay = props.cycleDay this.desire = cycleDay && cycleDay.desire const desireValue = this.desire && this.desire.value this.state = { currentValue: desireValue } } + save() { + saveSymptom('desire', this.props.date, { value: this.state.currentValue }) + } + render() { const desireRadioProps = [ { label: intensity[0], value: 0 }, @@ -43,9 +48,6 @@ export default class Desire extends Component { symptom='desire' date={this.props.date} currentSymptomValue={this.desire} - saveAction={() => { - saveSymptom('desire', this.props.date, { value: this.state.currentValue }) - }} saveDisabled={typeof this.state.currentValue != 'number'} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/info-symptom.js b/components/cycle-day/symptoms/info-symptom.js index 951ed47..2c75e88 100644 --- a/components/cycle-day/symptoms/info-symptom.js +++ b/components/cycle-day/symptoms/info-symptom.js @@ -1,11 +1,12 @@ -import React, { Component } from 'react' +import React from 'react' import { ScrollView } from 'react-native' import AppText from '../../app-text' import labels from '../../../i18n/en/symptom-info.js' import FramedSegment from '../../framed-segment' import styles from '../../../styles/index' +import SymptomView from './symptom-view' -export default class InfoSymptom extends Component { +export default class InfoSymptom extends SymptomView { render() { const symptomView = this.props.symptomView const symptomMapping = { diff --git a/components/cycle-day/symptoms/mood.js b/components/cycle-day/symptoms/mood.js index 903d5d9..bbaa2e4 100644 --- a/components/cycle-day/symptoms/mood.js +++ b/components/cycle-day/symptoms/mood.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { ScrollView, TextInput, @@ -10,10 +10,11 @@ import ActionButtonFooter from './action-button-footer' import SelectBoxGroup from '../select-box-group' import SymptomSection from './symptom-section' import styles from '../../../styles' +import SymptomView from './symptom-view' -export default class Mood extends Component { +export default class Mood extends SymptomView { constructor(props) { - super(props) + super() const cycleDay = props.cycleDay if (cycleDay && cycleDay.mood) { this.state = Object.assign({}, cycleDay.mood) @@ -25,6 +26,14 @@ export default class Mood extends Component { } } + save() { + const copyOfState = Object.assign({}, this.state) + if (!copyOfState.other) { + copyOfState.note = null + } + saveSymptom('mood', this.props.date, copyOfState) + } + toggleState = (key) => { const curr = this.state[key] this.setState({[key]: !curr}) @@ -62,13 +71,6 @@ export default class Mood extends Component { symptom='mood' date={this.props.date} currentSymptomValue={this.state} - saveAction={() => { - const copyOfState = Object.assign({}, this.state) - if (!copyOfState.other) { - copyOfState.note = null - } - saveSymptom('mood', this.props.date, copyOfState) - }} saveDisabled={Object.values(this.state).every(value => !value)} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index e46acb2..16e5529 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, Switch, @@ -11,15 +11,27 @@ import computeNfpValue from '../../../lib/nfp-mucus' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' -export default class Mucus extends Component { +export default class Mucus extends SymptomView { constructor(props) { - super(props) + super() const cycleDay = props.cycleDay this.mucus = cycleDay && cycleDay.mucus this.state = this.mucus ? this.mucus : {} } + save() { + const feeling = this.state.feeling + const texture = this.state.texture + saveSymptom('mucus', this.props.date, { + feeling, + texture, + value: computeNfpValue(feeling, texture), + exclude: Boolean(this.state.exclude) + }) + } + render() { const mucusFeeling = [ { label: labels.feeling.categories[0], value: 0 }, @@ -73,16 +85,6 @@ export default class Mucus extends Component { symptom='mucus' date={this.props.date} currentSymptomValue={this.mucus} - saveAction={() => { - const feeling = this.state.feeling - const texture = this.state.texture - saveSymptom('mucus', this.props.date, { - feeling, - texture, - value: computeNfpValue(feeling, texture), - exclude: Boolean(this.state.exclude) - }) - }} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/note.js b/components/cycle-day/symptoms/note.js index 4df8a55..06ee83a 100644 --- a/components/cycle-day/symptoms/note.js +++ b/components/cycle-day/symptoms/note.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, ScrollView, @@ -11,8 +11,9 @@ import ActionButtonFooter from './action-button-footer' import SymptomSection from './symptom-section' import { noteExplainer } from '../../../i18n/en/cycle-day' import { shared as sharedLabels } from '../../../i18n/en/labels' +import SymptomView from './symptom-view' -export default class Note extends Component { +export default class Note extends SymptomView { constructor(props) { super(props) const cycleDay = props.cycleDay @@ -23,6 +24,12 @@ export default class Note extends Component { } } + save() { + saveSymptom('note', this.props.date, { + value: this.state.currentValue + }) + } + render() { return ( @@ -45,11 +52,6 @@ export default class Note extends Component { symptom='note' date={this.props.date} currentSymptomValue={this.note} - saveAction={() => { - saveSymptom('note', this.props.date, { - value: this.state.currentValue - }) - }} saveDisabled={!this.state.currentValue} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/pain.js b/components/cycle-day/symptoms/pain.js index 7a2d9e3..48eb15b 100644 --- a/components/cycle-day/symptoms/pain.js +++ b/components/cycle-day/symptoms/pain.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { ScrollView, TextInput, @@ -11,8 +11,9 @@ import ActionButtonFooter from './action-button-footer' import SelectBoxGroup from '../select-box-group' import SymptomSection from './symptom-section' import styles from '../../../styles' +import SymptomView from './symptom-view' -export default class Pain extends Component { +export default class Pain extends SymptomView { constructor(props) { super(props) const cycleDay = props.cycleDay @@ -26,6 +27,14 @@ export default class Pain extends Component { } } + save() { + const copyOfState = Object.assign({}, this.state) + if (!copyOfState.other) { + copyOfState.note = null + } + saveSymptom('pain', this.props.date, copyOfState) + } + toggleState = (key) => { const curr = this.state[key] this.setState({[key]: !curr}) @@ -63,13 +72,6 @@ export default class Pain extends Component { symptom='pain' date={this.props.date} currentSymptomValue={this.state} - saveAction={() => { - const copyOfState = Object.assign({}, this.state) - if (!copyOfState.other) { - copyOfState.note = null - } - saveSymptom('pain', this.props.date, copyOfState) - }} saveDisabled={Object.values(this.state).every(value => !value)} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js index 0e5649b..4d5c8e6 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { TextInput, View, @@ -11,8 +11,9 @@ import { shared as sharedLabels } from '../../../i18n/en/labels' import ActionButtonFooter from './action-button-footer' import SelectBoxGroup from '../select-box-group' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' -export default class Sex extends Component { +export default class Sex extends SymptomView { constructor(props) { super(props) const cycleDay = props.cycleDay @@ -26,6 +27,14 @@ export default class Sex extends Component { if (this.state.note) this.state.other = true } + save() { + const copyOfState = Object.assign({}, this.state) + if (!copyOfState.other) { + copyOfState.note = null + } + saveSymptom('sex', this.props.date, copyOfState) + } + toggleState = (key) => { const curr = this.state[key] this.setState({[key]: !curr}) @@ -75,13 +84,6 @@ export default class Sex extends Component { symptom='sex' date={this.props.date} currentSymptomValue={this.state} - saveAction={() => { - const copyOfState = Object.assign({}, this.state) - if (!copyOfState.other) { - copyOfState.note = null - } - saveSymptom('sex', this.props.date, copyOfState) - }} saveDisabled={Object.values(this.state).every(value => !value)} navigate={this.props.navigate} /> diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js new file mode 100644 index 0000000..4110d99 --- /dev/null +++ b/components/cycle-day/symptoms/symptom-view.js @@ -0,0 +1,13 @@ +import { Component } from 'react' +import { BackHandler } from 'react-native' + +export default class SymptomView extends Component { + constructor() { + super() + this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.save.bind(this)) + } + + componentWillUnmount() { + this.backHandler.remove() + } +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index 6ebada9..f9de279 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import { View, Switch, @@ -20,10 +20,11 @@ import config from '../../../config' import AppTextInput from '../../app-text-input' import AppText from '../../app-text' import SymptomSection from './symptom-section' +import SymptomView from './symptom-view' const minutes = ChronoUnit.MINUTES -export default class Temp extends Component { +export default class Temp extends SymptomView { constructor(props) { super(props) const cycleDay = props.cycleDay @@ -45,7 +46,7 @@ export default class Temp extends Component { this.state.temperature = `${this.state.temperature}.0` } } else { - const prevTemp = getPreviousTemperature(this.props.date) + const prevTemp = getPreviousTemperature(props.date) if (prevTemp) { this.state.temperature = prevTemp.toString() this.state.isSuggestion = true @@ -53,6 +54,10 @@ export default class Temp extends Component { } } + save() { + this.checkRangeAndSave() + } + saveTemperature = () => { const dataToSave = { value: Number(this.state.temperature), @@ -182,7 +187,6 @@ export default class Temp extends Component { symptom='temperature' date={this.props.date} currentSymptomValue={this.temperature} - saveAction={() => this.checkRangeAndSave()} saveDisabled={ this.state.temperature === '' || isNaN(Number(this.state.temperature)) ||