Make header back arrow function for auto save

components/app.js

@@ -125,19 +125,12 @@ export default class App extends Component {
             goBack={this.handleBackButtonPress}
           />
         }
-        {this.isSymptomView() &&
-          <Header
-            title={title}
-            isSymptomView={true}
-            goBack={this.handleBackButtonPress}
-            date={currentProps.date}
-            goToSymptomInfo={() => this.navigate(INFO_SYMPTOM_PAGE, {
-              symptomView: currentPage,
-              ...currentProps
-            })}
-          />}
 
-        <Page navigate={this.navigate} {...currentProps} />
+        <Page
+          navigate={this.navigate}
+          {...currentProps}
+          handleBackButtonPress={this.handleBackButtonPress}
+        />
 
         {!this.isSymptomView() &&
           <Menu navigate={this.navigate} currentPage={currentPage} />

components/cycle-day/symptoms/bleeding.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import {
-  View,
   Switch,
   ScrollView
 } from 'react-native'
@@ -34,7 +33,7 @@ export default class Bleeding extends SymptomView {
     })
   }
 
-  render() {
+  renderContent() {
     const bleedingRadioProps = [
       { label: bleeding.labels[0], value: 0 },
       { label: bleeding.labels[1], value: 1 },
@@ -42,7 +41,6 @@ export default class Bleeding extends SymptomView {
       { label: bleeding.labels[3], value: 3 },
     ]
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           header={bleeding.heaviness.header}
@@ -67,7 +65,6 @@ export default class Bleeding extends SymptomView {
           />
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/cervix.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import {
-  View,
   Switch,
   ScrollView
 } from 'react-native'
@@ -35,7 +34,7 @@ export default class Cervix extends SymptomView {
     })
   }
 
-  render() {
+  renderContent() {
     const cervixOpeningRadioProps = [
       { label: labels.opening.categories[0], value: 0 },
       { label: labels.opening.categories[1], value: 1 },
@@ -52,7 +51,6 @@ export default class Cervix extends SymptomView {
     ]
     const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           header="Opening"
@@ -97,7 +95,6 @@ export default class Cervix extends SymptomView {
           />
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/desire.js

@@ -28,14 +28,13 @@ export default class Desire extends SymptomView {
     this.saveSymptomEntry({ value: this.state.currentValue })
   }
 
-  render() {
+  renderContent() {
     const desireRadioProps = [
       { label: intensity[0], value: 0 },
       { label: intensity[1], value: 1 },
       { label: intensity[2], value: 2 }
     ]
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           header={desire.header}
@@ -48,7 +47,6 @@ export default class Desire extends SymptomView {
           />
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/mood.js

@@ -47,9 +47,8 @@ export default class Mood extends SymptomView {
     }
   }
 
-  render() {
+  renderContent() {
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           explainer={labels.explainer}
@@ -72,7 +71,6 @@ export default class Mood extends SymptomView {
           }
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/mucus.js

@@ -38,7 +38,7 @@ export default class Mucus extends SymptomView {
     })
   }
 
-  render() {
+  renderContent() {
     const mucusFeeling = [
       { label: labels.feeling.categories[0], value: 0 },
       { label: labels.feeling.categories[1], value: 1 },
@@ -52,7 +52,6 @@ export default class Mucus extends SymptomView {
     ]
     const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           header='Feeling'
@@ -87,7 +86,6 @@ export default class Mucus extends SymptomView {
           />
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/note.js

@@ -34,9 +34,8 @@ export default class Note extends SymptomView {
     })
   }
 
-  render() {
+  renderContent() {
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           explainer={noteExplainer}
@@ -52,7 +51,6 @@ export default class Note extends SymptomView {
           />
         </SymptomSection>
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/pain.js

@@ -2,7 +2,6 @@ import React from 'react'
 import {
   ScrollView,
   TextInput,
-  View
 } from 'react-native'
 import { pain as labels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
@@ -49,9 +48,8 @@ export default class Pain extends SymptomView {
     }
   }
 
-  render() {
+  renderContent() {
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           explainer={labels.explainer}
@@ -73,8 +71,6 @@ export default class Pain extends SymptomView {
               />
           }
         </SymptomSection>
-        </ScrollView>
+      </ScrollView>)
-      </View>
-    )
   }
 }

components/cycle-day/symptoms/sex.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   TextInput,
-  View,
   ScrollView
 } from 'react-native'
 import styles from '../../../styles'
@@ -49,9 +48,8 @@ export default class Sex extends SymptomView {
     }
   }
 
-  render() {
+  renderContent() {
     return (
-      <View style={{ flex: 1 }}>
       <ScrollView style={styles.page}>
         <SymptomSection
           header={sexLabels.header}
@@ -86,7 +84,6 @@ export default class Sex extends SymptomView {
             />
         }
       </ScrollView>
-      </View>
     )
   }
 }

components/cycle-day/symptoms/symptom-view.js

@@ -1,11 +1,15 @@
+import React from 'react'
 import { Component } from 'react'
-import { BackHandler } from 'react-native'
+import { BackHandler, View } from 'react-native'
 import { saveSymptom } from '../../../db'
+import Header from '../../header/symptom-view'
+import { headerTitles } from '../../../i18n/en/labels'
 
 export default class SymptomView extends Component {
   constructor(props) {
     super()
     this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPress.bind(this))
+    this.globalBackhandler = props.handleBackButtonPress
     this.symptomName = props.symptomName
     this.date = props.date
   }
@@ -21,4 +25,20 @@ export default class SymptomView extends Component {
   componentWillUnmount() {
     this.backHandler.remove()
   }
+
+  render() {
+    return (
+      <View style={{flex: 1}}>
+        <Header
+          title={headerTitles[this.symptomName].toLowerCase()}
+          date={this.date}
+          goBack={() => {
+            this.onBackButtonPress()
+            this.globalBackhandler()
+          }}
+        />
+        {this.renderContent()}
+      </View>
+    )
+  }
 }

components/cycle-day/symptoms/temperature.js

@@ -116,13 +116,12 @@ export default class Temp extends SymptomView {
     this.setState({ isTimePickerVisible: true })
   }
 
-  render() {
+  renderContent() {
     const inputStyle = [styles.temperatureTextInput]
     if (this.state.isSuggestion) {
       inputStyle.push(styles.temperatureTextInputSuggestion)
     }
     return (
-      <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <SymptomSection
             header={labels.temperature.header}
@@ -189,7 +188,6 @@ export default class Temp extends SymptomView {
             />
           </SymptomSection>
         </ScrollView>
-      </View>
     )
   }
 }

components/header/index.js

@@ -3,7 +3,6 @@ import { Dimensions } from 'react-native'
 import CycleDayHeader from './cycle-day'
 import DefaultHeader from './default'
 import BackButtonHeader from './back-button'
-import SymptomViewHeader from './symptom-view'
 
 export default function Header(p) {
   const middle = Dimensions.get('window').width / 2
@@ -11,11 +10,7 @@ export default function Header(p) {
 
   if (props.isCycleDayOverView) {
     return (<CycleDayHeader {...props} />)
-  }
+  } else if (props.showBackButton) {
-  else if (props.isSymptomView) {
-    return (<SymptomViewHeader {...props} />)
-  }
-  else if (props.showBackButton) {
     return (<BackButtonHeader {...props} />)
   }
   else {

components/header/symptom-view.js

@@ -2,7 +2,8 @@ import React from 'react'
 import {
   View,
   Text,
-  TouchableOpacity
+  TouchableOpacity,
+  Dimensions
 } from 'react-native'
 import styles, { iconStyles } from '../../styles'
 import FeatherIcon from 'react-native-vector-icons/Feather'
@@ -10,11 +11,12 @@ import NavigationArrow from './navigation-arrow'
 import formatDate from '../helpers/format-date'
 
 export default function SymptomViewHeader(props) {
+  const middle = Dimensions.get('window').width / 2
   return (
     <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
       <View
         style={styles.accentCircle}
-        left={props.middle - styles.accentCircle.width / 2}
+        left={middle - styles.accentCircle.width / 2}
       />
       <NavigationArrow
         direction='left'

i18n/en/labels.js

@@ -32,15 +32,15 @@ export const headerTitles = {
   Password: settingsTitles.password,
   About: settingsTitles.about,
   License: settingsTitles.license,
-  BleedingEditView: 'Bleeding',
+  bleeding: 'Bleeding',
-  TemperatureEditView: 'Temperature',
+  temperature: 'Temperature',
-  MucusEditView: 'Mucus',
+  mucus: 'Mucus',
-  CervixEditView: 'Cervix',
+  cervix: 'Cervix',
-  NoteEditView: 'Note',
+  note: 'Note',
-  DesireEditView: 'Desire',
+  desire: 'Desire',
-  SexEditView: 'Sex',
+  sex: 'Sex',
-  PainEditView: 'Pain',
+  pain: 'Pain',
-  MoodEditView: 'Mood',
+  mood: 'Mood',
   InfoSymptom: 'Info'
 }