Merge branch '381-real-autosave' into 'master'

Resolve "real autosave"

Closes #381

See merge request bloodyhealth/drip!225

components/app-text.js

@@ -18,19 +18,6 @@ export default function AppText(props) {
   )
 }
 
-export function ActionHint(props) {
-  if(props.isVisible) {
-    return (
-      <AppText
-        style={[styles.actionHint, props.style]}>
-        {props.children}
-      </AppText>
-    )
-  } else {
-    return null
-  }
-}
-
 export function SymptomSectionHeader(props) {
   return (
     <AppText style={styles.symptomViewHeading}>

components/cycle-day/symptoms/bleeding.js

@@ -22,7 +22,7 @@ export default class Bleeding extends SymptomView {
 
   symptomName = 'bleeding'
 
-  onBackButtonPress() {
+  autoSave = () => {
     if (typeof this.state.currentValue != 'number') {
       this.deleteSymptomEntry()
       return

components/cycle-day/symptoms/cervix.js

@@ -19,7 +19,7 @@ export default class Cervix extends SymptomView {
 
   symptomName = 'cervix'
 
-  onBackButtonPress() {
+  autoSave = () => {
     const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
     if (nothingEntered) {
       this.deleteSymptomEntry()

components/cycle-day/symptoms/desire.js

@@ -19,7 +19,7 @@ export default class Desire extends SymptomView {
 
   symptomName = 'desire'
 
-  onBackButtonPress() {
+  autoSave = () => {
     if (typeof this.state.currentValue != 'number') {
       this.deleteSymptomEntry()
       return

components/cycle-day/symptoms/mood.js

@@ -24,7 +24,7 @@ export default class Mood extends SymptomView {
 
   symptomName = "mood"
 
-  onBackButtonPress() {
+  autoSave = () => {
     const nothingEntered = Object.values(this.state).every(val => !val)
     if (nothingEntered) {
       this.deleteSymptomEntry()

components/cycle-day/symptoms/mucus.js

@@ -20,7 +20,7 @@ export default class Mucus extends SymptomView {
 
   symptomName = 'mucus'
 
-  onBackButtonPress() {
+  autoSave = () => {
     const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number')
     if (nothingEntered) {
       this.deleteSymptomEntry()

components/cycle-day/symptoms/note.js

@@ -23,7 +23,7 @@ export default class Note extends SymptomView {
 
   symptomName = 'note'
 
-  onBackButtonPress() {
+  autoSave = () => {
     if (!this.state.currentValue) {
       this.deleteSymptomEntry()
       return

components/cycle-day/symptoms/pain.js

@@ -26,7 +26,7 @@ export default class Pain extends SymptomView {
 
   symptomName = 'pain'
 
-  onBackButtonPress() {
+  autoSave = () => {
     const nothingEntered = Object.values(this.state).every(val => !val)
     if (nothingEntered) {
       this.deleteSymptomEntry()

components/cycle-day/symptoms/sex.js

@@ -26,7 +26,7 @@ export default class Sex extends SymptomView {
 
   symptomName = "sex"
 
-  onBackButtonPress() {
+  autoSave = () => {
     const nothingEntered = Object.values(this.state).every(val => !val)
     if (nothingEntered) {
       this.deleteSymptomEntry()

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import {
-  BackHandler, View, Alert, TouchableOpacity
+  View, Alert, TouchableOpacity
 } from 'react-native'
 import { saveSymptom } from '../../../db'
 import InfoPopUp from './info-symptom'
@@ -13,11 +13,6 @@ import styles, { iconStyles } from '../../../styles'
 export default class SymptomView extends Component {
   constructor(props) {
     super()
-    this.backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      this.handleBackButtonPressOnSymptomView.bind(this)
-    )
-    this.globalBackhandler = props.handleBackButtonPress
     this.date = props.date
     this.navigate = props.navigate
     this.state = {
@@ -25,10 +20,8 @@ export default class SymptomView extends Component {
     }
   }
 
-  async handleBackButtonPressOnSymptomView() {
+  componentDidUpdate() {
-    // every specific symptom view provides their own onBackButtonPress method
+    this.autoSave()
-    const stopHere = await this.onBackButtonPress()
-    if (!stopHere) this.globalBackhandler()
   }
 
   saveSymptomEntry(entry) {
@@ -39,10 +32,6 @@ export default class SymptomView extends Component {
     saveSymptom(this.symptomName, this.date)
   }
 
-  componentWillUnmount() {
-    this.backHandler.remove()
-  }
-
   isDeleteIconActive() {
     const symptomValueHasBeenFilledOut = key => {
       // the state tracks whether the symptom info should be shown,
@@ -63,7 +52,7 @@ export default class SymptomView extends Component {
         <Header
           title={headerTitles[this.symptomName].toLowerCase()}
           date={this.date}
-          goBack={this.handleBackButtonPressOnSymptomView.bind(this)}
+          goBack={this.props.handleBackButtonPress}
           deleteIconActive={this.isDeleteIconActive()}
           deleteEntry={() => {
             Alert.alert(

components/cycle-day/symptoms/temperature.js

@@ -3,7 +3,6 @@ import {
   View,
   Switch,
   Keyboard,
-  Alert,
   ScrollView
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -35,7 +34,6 @@ export default class Temp extends SymptomView {
       exclude: temp ? temp.exclude : false,
       time: temp ? temp.time : LocalTime.now().truncatedTo(minutes).toString(),
       isTimePickerVisible: false,
-      outOfRange: null,
       note: temp ? temp.note : null
     }
 
@@ -44,6 +42,7 @@ export default class Temp extends SymptomView {
       if (temp.value === Math.floor(temp.value)) {
         this.state.temperature = `${this.state.temperature}.0`
       }
+      this.state.outOfRangeWarning = makeOutOfRangeWarningMessage(this.state.temperature)
     } else {
       const prevTemp = getPreviousTemperature(props.date)
       if (prevTemp) {
@@ -63,19 +62,12 @@ export default class Temp extends SymptomView {
     })
   }
 
-  async onBackButtonPress() {
+  autoSave = () => {
     if (typeof this.state.temperature != 'string' || this.state.temperature === '') {
       this.deleteSymptomEntry()
       return
     }
 
-    const userWantsToSave = await this.warnUserIfTempOutOfRange()
-    if (!userWantsToSave) return true
-
-    this.saveTemperature()
-  }
-
-  saveTemperature = () => {
     const dataToSave = {
       value: Number(this.state.temperature),
       exclude: this.state.exclude,
@@ -86,44 +78,13 @@ export default class Temp extends SymptomView {
     this.saveSymptomEntry(dataToSave)
   }
 
-  warnUserIfTempOutOfRange = async () => {
-    const value = Number(this.state.temperature)
-    const { min, max } = config.temperatureScale
-    const range = { min, max }
-    const scale = scaleObservable.value
-    let warningMsg
-
-    if (value < range.min || value > range.max) {
-      warningMsg = labels.outOfAbsoluteRangeWarning
-    } else if (value < scale.min || value > scale.max) {
-      warningMsg = labels.outOfRangeWarning
-    }
-
-    // RN alert runs asynchronously but doesn't provide a callback, so wrap
-    // it in a promise
-    return new Promise(resolve => {
-      if (warningMsg) {
-        Alert.alert(
-          sharedLabels.warning,
-          warningMsg,
-          [
-            { text: sharedLabels.cancel, onPress: () => {
-              resolve(false)
-            }},
-            { text: sharedLabels.save, onPress: () => {
-              resolve(true)
-            }}
-          ]
-        )
-      } else {
-        resolve(true)
-      }
-    })
-  }
 
   setTemperature = (temperature) => {
     if (isNaN(Number(temperature))) return
-    this.setState({ temperature, isSuggestion: false })
+    this.setState({
+      temperature, isSuggestion: false,
+      outOfRangeWarning: makeOutOfRangeWarningMessage(temperature)
+    })
   }
 
   setNote = (note) => {
@@ -157,6 +118,11 @@ export default class Temp extends SymptomView {
             />
             <AppText style={{ marginLeft: 5 }}>°C</AppText>
           </View>
+          {this.state.outOfRangeWarning &&
+            <AppText style={styles.hint}>
+              {this.state.outOfRangeWarning}
+            </AppText>
+          }
         </SymptomSection>
         <SymptomSection
           header={labels.time}
@@ -208,3 +174,22 @@ export default class Temp extends SymptomView {
     )
   }
 }
+
+function makeOutOfRangeWarningMessage(temperature) {
+  if (temperature === '') return
+  const value = Number(temperature)
+  const { min, max } = config.temperatureScale
+  const range = { min, max }
+  const scale = scaleObservable.value
+  let warningMsg
+
+  if (value < range.min || value > range.max) {
+    warningMsg = labels.outOfAbsoluteRangeWarning
+  } else if (value < scale.min || value > scale.max) {
+    warningMsg = labels.outOfRangeWarning
+  } else {
+    warningMsg = null
+  }
+
+  return warningMsg
+}

ios/drip.xcodeproj/project.pbxproj

@@ -72,6 +72,7 @@
 		E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C225FC4966694B9FBD32E946 /* NodeMobile.framework */; };
 		E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */ = {isa = PBXBuildFile; fileRef = 6466AE2461BE4FA88B8372F0 /* nodejs-project */; };
 		77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3102FB76D69C42938E0E126D /* AntDesign.ttf */; };
+		AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -516,6 +517,7 @@
 		F59A471BDE4144A1A41D4B52 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNNodeJsMobile.a; sourceTree = "<group>"; };
 		3102FB76D69C42938E0E126D /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; name = "OpenSans-LightItalic.ttf"; path = "../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -608,6 +610,7 @@
 				673C016DDDD74C2F89050279 /* OpenSans-Light.ttf */,
 				644690BCCEBF41789960B9A2 /* OpenSans-SemiBold.ttf */,
 				3102FB76D69C42938E0E126D /* AntDesign.ttf */,
+				885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -951,9 +954,9 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
-				6A61F9B7BEB149D1894D6AB5 /* Build NodeJS Mobile Native Modules */,
+				D6AE48E8124449EE863F342D /* Build NodeJS Mobile Native Modules */,
-				53E84D10AC6B4045A1DBAB0C /* Sign NodeJS Mobile Native Modules */,
+				7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */,
-				F43CB3783FD9405C8198826C /* Remove NodeJS Mobile Framework Simulator Strips */,
+				54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */,
 			);
 			buildRules = (
 			);
@@ -1513,6 +1516,7 @@
 				5D921C348AC14944835A4D82 /* OpenSans-Light.ttf in Resources */,
 				71D0BCE4666A4AB8A0874B5A /* OpenSans-SemiBold.ttf in Resources */,
 				77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */,
+				AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1562,7 +1566,7 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		6A61F9B7BEB149D1894D6AB5 /* Build NodeJS Mobile Native Modules */ = {
+		D6AE48E8124449EE863F342D /* Build NodeJS Mobile Native Modules */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -1630,7 +1634,7 @@ fi
 popd
 ";
 		};
-		53E84D10AC6B4045A1DBAB0C /* Sign NodeJS Mobile Native Modules */ = {
+		7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -1690,7 +1694,7 @@ find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -del
 find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
 ";
 		};
-		F43CB3783FD9405C8198826C /* Remove NodeJS Mobile Framework Simulator Strips */ = {
+		54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (

ios/drip/Info.plist

@@ -87,6 +87,7 @@
 		<string>OpenSans-Regular.ttf</string>
 		<string>OpenSans-SemiBold.ttf</string>
 		<string>AntDesign.ttf</string>
+		<string>OpenSans-LightItalic.ttf</string>
 	</array>
 </dict>
 </plist>

styles/index.js

@@ -17,6 +17,7 @@ const headerFont = 'Prompt-ExtraLight'
 
 const textFont = 'OpenSans-Light'
 const textFontBold = 'OpenSans-SemiBold'
+const textFontItalic = 'OpenSans-LightItalic'
 
 const regularSize = 16
 const hintSize = 14
@@ -43,12 +44,9 @@ export default StyleSheet.create({
     fontSize: regularSize,
     letterSpacing: 0.5
   },
-  actionHint: {
+  hint: {
-    color: secondaryColor,
+    fontFamily: textFontItalic,
-    fontFamily: textFont,
     fontSize: hintSize,
-    fontWeight: 'bold',
-    margin: defaultIndentation
   },
   paragraph: {
     marginBottom: defaultBottomMargin