Add symptom view component with back button listener

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}
         />