Add symptom view component with back button listener

This commit is contained in:
Julia Friesel
2019-05-11 17:42:57 +02:00
parent 2528c03315
commit 08fd3afc34
11 changed files with 113 additions and 72 deletions
+10 -9
View File
@@ -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}
/>
</View>
+13 -3
View File
@@ -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 },
+8 -6
View File
@@ -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}
/>
@@ -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 = {
+12 -10
View File
@@ -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}
/>
+15 -13
View File
@@ -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}
/>
</View>
+9 -7
View File
@@ -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 (
<View style={{ flex: 1 }}>
@@ -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}
/>
+11 -9
View File
@@ -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}
/>
+11 -9
View File
@@ -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}
/>
@@ -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()
}
}
+8 -4
View File
@@ -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)) ||