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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -1,27 +1,24 @@
 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} />)
+  }
+}

components/header/info-symptom.js

@@ -0,0 +1,32 @@
+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

@@ -1,7 +1,9 @@
 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>
   )
 }