Adds symptom info screens to each symptom

components/app.js

@@ -11,6 +11,7 @@ import SettingsMenu from './settings/settings-menu'
 import settingsViews from './settings'
 import Stats from './stats'
 import {headerTitles, menuTitles} from '../i18n/en/labels'
+import InfoSymptom from './cycle-day/symptoms/info-symptom'
 import setupNotifications from '../lib/notifications'
 
 // design wants everyhting lowercased, but we don't
@@ -50,7 +51,9 @@ export default class App extends Component {
     if (isMenuItem(this.state.currentPage)) {
       this.menuOrigin = this.state.currentPage
     }
-    this.originForSymptomView = this.state.currentPage
+    if (this.state.currentPage !== 'InfoSymptom') {
+      this.originForSymptomView = this.state.currentPage
+    }
     this.setState({currentPage: pageName, currentProps: props})
   }
 
@@ -62,30 +65,53 @@ export default class App extends Component {
       )
     } else if (isSettingsView(this.state.currentPage)) {
       this.navigate('SettingsMenu')
-    } else if(this.state.currentPage === 'CycleDay') {
+    } else if (this.state.currentPage === 'CycleDay') {
       this.navigate(this.menuOrigin)
+    } else if (this.state.currentPage === 'InfoSymptom') {
+      this.navigate(
+        this.originForSymptomView, { date: this.state.currentProps.date }
+      )
     } else {
       this.navigate('Home')
     }
     return true
   }
 
+  isDefaultView() {
+    return this.state.currentPage !== 'CycleDay' &&
+      !isSymptomView(this.state.currentPage) &&
+      this.state.currentPage !== 'InfoSymptom'
+  }
+
   render() {
     const page = {
-      Home, Calendar, CycleDay, Chart, SettingsMenu, ...settingsViews, Stats, ...symptomViews
+      Home, Calendar, CycleDay, Chart, InfoSymptom,
+      SettingsMenu, ...settingsViews, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
       <View style={{flex: 1}}>
-        {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) &&
+        {this.isDefaultView() &&
           <Header
             title={headerTitlesLowerCase[this.state.currentPage]}
-          />}
+          />
+        }
+        {this.state.currentPage === 'InfoSymptom' &&
+          <Header
+            title={headerTitlesLowerCase[this.state.currentPage]}
+            goBack={this.handleBackButtonPress}
+          />
+        }
         {isSymptomView(this.state.currentPage) &&
           <Header
             title={headerTitlesLowerCase[this.state.currentPage]}
             isSymptomView={true}
             goBack={this.handleBackButtonPress}
             date={this.state.currentProps.date}
+            goToSymptomInfo={() => this.navigate('InfoSymptom', {
+              date: this.state.currentProps.date,
+              symptomView: this.state.currentPage,
+              cycleDay: this.state.currentProps.cycleDay
+            })}
           />}
 
 

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

+import React, { Component } from 'react'
+import {
+  View,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
+import AppText from '../../app-text'
+import * as labels from '../../../i18n/en/symptom-info.js'
+
+export default class InfoSymptom extends Component {
+  render() {
+    const symptomView = this.props.symptomView
+    const symptomMapping = {
+      BleedingEditView: 'bleeding',
+      CervixEditView: 'cervix',
+      DesireEditView: 'desire',
+      MucusEditView: 'mucus',
+      NoteEditView: 'note',
+      PainEditView: 'pain',
+      SexEditView: 'sex',
+      TemperatureEditView: 'temperature'
+    }
+    const currentSymptom = symptomMapping[symptomView]
+    const currentSymptomText = labels.symptomInfo[currentSymptom]
+    const currentSymptomTitle = labels.symptomTitle[currentSymptom]
+    return (
+      <ScrollView>
+        <View style={[styles.textWrappingView]}>
+          <AppText style={styles.title}>
+            {currentSymptomTitle}
+          </AppText>
+          <AppText style={styles.paragraph}>
+            {currentSymptomText}
+            {labels.symptomTitle.currentSymptomTitle}
+          </AppText>
+          <AppText style={styles.paragraph}>
+            {labels.symptomInfo.currentSymptomText}
+          </AppText>
+        </View>
+      </ScrollView>
+    )
+  }
+}

components/header/default.js

+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles from '../../styles'
+
+export default function DefaultHeader(props) {
+  return (
+    <View style={styles.header}>
+      <View style={styles.accentCircle} />
+      <Text style={styles.headerText}>
+        {props.title}
+      </Text>
+    </View >
+  )
+}

components/header/index.js

 import React from 'react'
-import {
-  View,
-  Text,
-  Dimensions
-} from 'react-native'
-import styles from '../../styles'
+import { Dimensions } from 'react-native'
 import CycleDayHeader from './cycle-day'
+import DefaultHeader from './default'
+import InfoSymptomHeader from './info-symptom'
 import SymptomViewHeader from './symptom-view'
 
 export default function Header(p) {
   const middle = Dimensions.get('window').width / 2
   const props = Object.assign({}, p, {middle})
-  return (
-    props.isCycleDayOverView ?
-      <CycleDayHeader {...props} />
-      : props.isSymptomView ?
-        <SymptomViewHeader {...props}/>
-        :
-        <View style={styles.header}>
-          <View style={styles.accentCircle} />
-          <Text style={styles.headerText}>
-            {props.title}
-          </Text>
-        </View >
-  )
-}
+
+  if (props.isCycleDayOverView) {
+    return (<CycleDayHeader {...props} />)
+  }
+  else if (props.isSymptomView) {
+    return (<SymptomViewHeader {...props} />)
+  }
+  else if (props.title === 'info') {
+    return (<InfoSymptomHeader {...props} />)
+  }
+  else {
+    return (<DefaultHeader {...props} />)
+  }
+}
\ No newline at end of file

components/header/info-symptom.js

+import React from 'react'
+import {
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import NavigationArrow from './navigation-arrow'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function InfoSymptomHeader(props) {
+  return (
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={props.middle - styles.accentCircle.width / 2}
+      />
+      <NavigationArrow direction='left' {...props}/>
+      <View>
+        <Text style={styles.headerText}>
+          {props.title}
+        </Text>
+      </View>
+      <TouchableOpacity style={styles.hiddenIcon}>
+        <Icon
+          name={'chevron-thin-right'}
+          {...iconStyles.hiddenIcon}
+        />
+      </TouchableOpacity>
+    </View>
+  )
+}

components/header/symptom-view.js

 import React from 'react'
 import {
   View,
-  Text} from 'react-native'
+  Text,
+  TouchableOpacity
+} from 'react-native'
 import styles, { iconStyles } from '../../styles'
 import FeatherIcon from 'react-native-vector-icons/Feather'
 import NavigationArrow from './navigation-arrow'
@@ -26,11 +28,17 @@ export default function SymptomViewHeader(props) {
           {formatDate(props.date)}
         </Text>
       </View >
-      <FeatherIcon
-        name='info'
-        style={styles.symptomInfoIcon}
-        {...iconStyles.symptomHeaderIcons}
-      />
+      <TouchableOpacity
+        onPress={() => props.goToSymptomInfo()}
+        style={styles.infoButton}
+      >
+        <FeatherIcon
+          name="info"
+          style={styles.symptomInfoIcon}
+          {...iconStyles.symptomHeaderIcons}
+        />
+      </TouchableOpacity>
+
     </View>
   )
 }

i18n/en/labels.js

@@ -39,7 +39,8 @@ export const headerTitles = {
   NoteEditView: 'Note',
   DesireEditView: 'Desire',
   SexEditView: 'Sex',
-  PainEditView: 'Pain'
+  PainEditView: 'Pain',
+  InfoSymptom: 'Info'
 }
 
 export const menuTitles = {

i18n/en/symptom-info.js

+export const symptomInfo = {
+  bleeding: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
+
+After a while of tracking it you will get an overview of how long your cycles last on average, whether the length of your last cycles vary a lot and how many days of menstrual bleeding you usually experience.
+
+The app allows you to track different intensity of bleeding: spotting, light, medium and heavy. Every bleeding value that is not excluded is taken into account for fertility calculation and prediction for the start of next cycles.
+
+Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before,
+e.g. bleeding caused by miscarriage or ovulation.`,
+  cervix: `The cervix is located inside the body at the end of the vaginal canal, between the vagina and the uterus.
+
+Tracking how open and how firm the cervix feels like can help determine in which phase of a menstrual cycle you are.
+
+When you track your cervix as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.`,
+  desire: `Sexual desire can be influenced by the menstrual cycle and its hormonal changes. The app allows you to track the intensity of your sexual desire for your mere information, it is not taken into account for any calculation.`,
+  mucus: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
+
+When you track your cervical mucus as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.`,
+  note: `Note allows you to track any extra information you want to save here.`,
+  pain: `Keep track of different kinds of pain you experience. They may be influenced by or have an impact on your menstrual cycles.`,
+  sex: `Did you know that having an orgasm can help release cramps?`,
+  temperature: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
+
+What is body basal temperature?
+It's your temperature after laying still for at least 6 hours. For many this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.
+
+Which thermometer to use?
+The thermometer must indicate 2 decimal places.
+
+How to measure?
+You can either measure rectally, vaginally or orally. If you chose rectal or vaginal measurement you need to measure for at least 3 minutes long. If you chose oral measurement you want to measure for at least 5 minutes long. Pick one way and stick to it.`
+}
+export const symptomTitle = {
+  bleeding: "Tracking menstrual bleeding",
+  cervix: "Tracking your cervix",
+  desire: "Tracking sexual desire",
+  mucus: "Tracking cervixal mucus",
+  note: "Notes",
+  pain: "Tracking pain",
+  sex: "Tracking sex and contraceptives",
+  temperature: "Tracking body basal temperature"
+}

styles/index.js

@@ -229,6 +229,9 @@ export default StyleSheet.create({
   navigationArrow: {
     padding: 20
   },
+  hiddenIcon: {
+    padding: 20
+  },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -402,6 +405,9 @@ export default StyleSheet.create({
     marginTop: 20,
     color: 'grey'
   },
+  infoButton: {
+    paddingVertical: 20
+  },
   licensePage: {
     paddingVertical: 20,
     paddingHorizontal: 10
@@ -442,5 +448,9 @@ export const iconStyles = {
   infoInHeading: {
     marginRight: 5,
     color: 'black'
+  },
+  hiddenIcon: {
+    size: 20,
+    display: 'none'
   }
 }