Use navigator for symptom views also

app.js

@@ -2,7 +2,8 @@ import { createStackNavigator, createBottomTabNavigator } from 'react-navigation
 import Home from './components/home'
 
 import Calendar from './components/calendar'
-import CycleDay from './components/cycle-day'
+import CycleDay from './components/cycle-day/cycle-day-overview'
+import SymptomView from './components/cycle-day/symptoms'
 import Chart from './components/chart/chart'
 import Settings from './components/settings'
 import Stats from './components/stats'
@@ -14,9 +15,11 @@ import styles, { primaryColor } from './styles'
 import { YellowBox } from 'react-native'
 YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 
+const CycleDayStack = createStackNavigator({CycleDay, SymptomView}, {headerMode: 'none'})
+
 const routes = {
-  Home: createStackNavigator({Home, CycleDay}, {headerMode: 'none'}),
+  Home: createStackNavigator({Home, CycleDayStack}, {headerMode: 'none'}),
-  Calendar: createStackNavigator({Calendar, CycleDay}, {headerMode: 'none'}),
+  Calendar: createStackNavigator({Calendar, CycleDayStack}, {headerMode: 'none'}),
   Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
   Settings: { screen: Settings },
   Stats: { screen: Stats}

components/cycle-day/cycle-day-overview.js

@@ -1,11 +1,17 @@
 import React, { Component } from 'react'
 import {
+  ScrollView,
   View,
   Text,
   TouchableOpacity,
   Dimensions
 } from 'react-native'
+import { LocalDate } from 'js-joda'
+import { getOrCreateCycleDay } from '../../db'
+import cycleModule from '../../lib/cycle'
 import Icon from 'react-native-vector-icons/FontAwesome'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from './labels/format'
 import styles, { iconStyles } from '../../styles'
 import {
   bleeding as bleedingLabels,
@@ -18,50 +24,98 @@ import {
   intensity as intensityLabels
 } from './labels/labels'
 
-export default class DayView extends Component {
+const getCycleDayNumber = cycleModule().getCycleDayNumber
+
+export default class CycleDayOverView extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      cycleDay: props.navigation.state.params.cycleDay
+    }
+  }
+
+  goToCycleDay(target) {
+    const localDate = LocalDate.parse(this.state.cycleDay.date)
+    const targetDate = target === 'before' ?
+      localDate.minusDays(1).toString() :
+      localDate.plusDays(1).toString()
+    this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
+  }
+
+  navigate(symptom) {
+    this.props.navigation.navigate('SymptomView', {
+      symptom,
+      cycleDay: this.state.cycleDay
+    })
+  }
+
   render() {
-    const cycleDay = this.props.cycleDay
+    const cycleDay = this.state.cycleDay
+    const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
-      <View style={styles.symptomBoxesView}>
+      <ScrollView>
-        <SymptomBox
+        <View style={ styles.cycleDayDateView }>
-          title='Bleeding'
+          <MaterialIcon
-          onPress={() => this.props.showView('BleedingEditView')}
+            name='arrow-left-drop-circle'
-          data={getLabel('bleeding', cycleDay.bleeding)}
+            {...iconStyles.navigationArrow}
-        />
+            onPress={() => this.goToCycleDay('before')}
-        <SymptomBox
+          />
-          title='Temperature'
+          <View>
-          onPress={() => this.props.showView('TemperatureEditView')}
+            <Text style={styles.dateHeader}>
-          data={getLabel('temperature', cycleDay.temperature)}
+              {formatDateForViewHeader(cycleDay.date)}
-        />
+            </Text>
-        <SymptomBox
+            {cycleDayNumber &&
-          title='Mucus'
+              <Text style={styles.cycleDayNumber} >
-          onPress={() => this.props.showView('MucusEditView')}
+                Cycle day {cycleDayNumber}
-          data={getLabel('mucus', cycleDay.mucus)}
+              </Text>}
-        />
+          </View >
-        <SymptomBox
+          <MaterialIcon
-          title='Cervix'
+            name='arrow-right-drop-circle'
-          onPress={() => this.props.showView('CervixEditView')}
+            {...iconStyles.navigationArrow}
-          data={getLabel('cervix', cycleDay.cervix)}
+            onPress={() => this.goToCycleDay('after')}
-        />
+          />
-        <SymptomBox
+        </View >
-          title='Note'
+        <View style={styles.symptomBoxesView}>
-          onPress={() => this.props.showView('NoteEditView')}
+          <SymptomBox
-          data={getLabel('note', cycleDay.note)}
+            title='Bleeding'
-        />
+            onPress={() => this.navigate('BleedingEditView')}
-        <SymptomBox
+            data={getLabel('bleeding', cycleDay.bleeding)}
-          title='Desire'
+          />
-          onPress={() => this.props.showView('DesireEditView')}
+          <SymptomBox
-          data={getLabel('desire', cycleDay.desire)}
+            title='Temperature'
-        />
+            onPress={() => this.navigate('TemperatureEditView')}
-        <SymptomBox
+            data={getLabel('temperature', cycleDay.temperature)}
-          title='Sex'
+          />
-          onPress={() => this.props.showView('SexEditView')}
+          <SymptomBox
-          data={getLabel('sex', cycleDay.sex)}
+            title='Mucus'
-        />
+            onPress={() => this.navigate('MucusEditView')}
-        {/*  this is just to make the last row adhere to the grid
+            data={getLabel('mucus', cycleDay.mucus)}
+          />
+          <SymptomBox
+            title='Cervix'
+            onPress={() => this.navigate('CervixEditView')}
+            data={getLabel('cervix', cycleDay.cervix)}
+          />
+          <SymptomBox
+            title='Note'
+            onPress={() => this.navigate('NoteEditView')}
+            data={getLabel('note', cycleDay.note)}
+          />
+          <SymptomBox
+            title='Desire'
+            onPress={() => this.navigate('DesireEditView')}
+            data={getLabel('desire', cycleDay.desire)}
+          />
+          <SymptomBox
+            title='Sex'
+            onPress={() => this.navigate('SexEditView')}
+            data={getLabel('sex', cycleDay.sex)}
+          />
+          {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
-        <FillerBoxes/>
+          <FillerBoxes />
-      </View >
+        </View >
+      </ScrollView >
     )
   }
 }

components/cycle-day/index.js

@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  ScrollView
-} from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import cycleModule from '../../lib/cycle'
-import { formatDateForViewHeader } from './labels/format'
-import styles, { iconStyles } from '../../styles'
-import actionButtonModule from './action-buttons'
-import symptomComponents from './symptoms'
-import DayView from './cycle-day-overview'
-import { LocalDate } from 'js-joda'
-import { getOrCreateCycleDay } from '../../db'
-
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-const symptomComponentNames = Object.keys(symptomComponents)
-
-export default class Day extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      visibleComponent: 'DayView',
-      cycleDay: props.navigation.state.params.cycleDay
-    }
-
-    this.showView = view => {
-      this.setState({visibleComponent: view})
-    }
-    this.makeActionButtons = actionButtonModule(this.showView)
-  }
-
-  goToCycleDay(target) {
-    const localDate = LocalDate.parse(this.state.cycleDay.date)
-    const targetDate = target === 'before' ?
-      localDate.minusDays(1).toString() :
-      localDate.plusDays(1).toString()
-    this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
-  }
-
-  render() {
-    const cycleDayNumber = getCycleDayNumber(this.state.cycleDay.date)
-    const cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
-      acc[curr] = React.createElement(
-        symptomComponents[curr],
-        {
-          cycleDay: this.state.cycleDay,
-          makeActionButtons: this.makeActionButtons
-        }
-      )
-      return acc
-    }, {})
-    // DayView needs showView instead of makeActionButtons
-    cycleDayViews.DayView = React.createElement(DayView, {
-      dateString: this.state.cycleDay.date,
-      cycleDay: this.state.cycleDay,
-      showView: this.showView
-    })
-
-    return (
-      <ScrollView>
-        <View style={ styles.cycleDayDateView }>
-          <Icon
-            name='arrow-left-drop-circle'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.goToCycleDay('before')}
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {formatDateForViewHeader(this.state.cycleDay.date)}
-            </Text>
-            {cycleDayNumber &&
-              <Text style={styles.cycleDayNumber} >
-                Cycle day {cycleDayNumber}
-              </Text>}
-          </View >
-          <Icon
-            name='arrow-right-drop-circle'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.goToCycleDay('after')}
-          />
-        </View >
-        <View>
-          { cycleDayViews[this.state.visibleComponent] }
-        </View >
-      </ScrollView >
-    )
-  }
-}

components/cycle-day/symptoms/index.js

@@ -1,3 +1,11 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
+import actionButtonModule from '../action-buttons'
 import BleedingEditView from './bleeding'
 import TemperatureEditView from './temperature'
 import MucusEditView from './mucus'
@@ -6,7 +14,7 @@ import NoteEditView from './note'
 import DesireEditView from './desire'
 import SexEditView from './sex'
 
-export default {
+const symptomViews = {
   BleedingEditView,
   TemperatureEditView,
   MucusEditView,
@@ -15,3 +23,49 @@ export default {
   DesireEditView,
   SexEditView
 }
+const titles = {
+  BleedingEditView: 'Bleeding',
+  TemperatureEditView: 'Temperature',
+  MucusEditView: 'Mucus',
+  CervixEditView: 'Cervix',
+  NoteEditView: 'Note',
+  DesireEditView: 'Desire',
+  SexEditView: 'Sex'
+}
+
+export default class SymptomView extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      visibleComponent: props.navigation.state.params.symptom,
+      cycleDay: props.navigation.state.params.cycleDay
+    }
+
+    this.showView = view => {
+      this.setState({visibleComponent: view})
+    }
+    this.makeActionButtons = actionButtonModule(this.showView)
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <View style={ styles.header }>
+          <View>
+            <Text style={styles.dateHeader}>
+              {titles[this.state.visibleComponent]}
+            </Text>
+          </View >
+        </View >
+        {React.createElement(
+          symptomViews[this.state.visibleComponent],
+          {
+            cycleDay: this.state.cycleDay,
+            makeActionButtons: this.makeActionButtons
+          }
+        )}
+      </ScrollView >
+    )
+  }
+}