Programmatically add props to cycle day views

components/cycle-day/action-buttons.js

@@ -5,24 +5,26 @@ import {
 } from 'react-native'
 import { saveSymptom } from '../../db'
 
+const dayView = 'DayView'
+
 export default function (showView) {
   return function ({ symptom, cycleDay, saveAction, saveDisabled}) {
     const buttons = [
       {
         title: 'Cancel',
-        action: () => showView('dayView')
+        action: () => showView(dayView)
       },
       {
         title: 'Delete',
         action: () => {
           saveSymptom(symptom, cycleDay)
-          showView('dayView')
+          showView(dayView)
         }
       }, {
         title: 'Save',
         action: () => {
           saveAction()
-          showView('dayView')
+          showView(dayView)
         },
         disabledCondition: saveDisabled
       }

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

@@ -52,7 +52,7 @@ export default class DayView extends Component {
           <Text style={styles.symptomDayView}>Bleeding</Text>
           <View style={styles.symptomEditButton}>
             <Button
-              onPress={() => this.showView('bleedingEditView')}
+              onPress={() => this.showView('BleedingEditView')}
               title={getLabel('bleeding', cycleDay.bleeding)}>
             </Button>
           </View>
@@ -61,7 +61,7 @@ export default class DayView extends Component {
           <Text style={styles.symptomDayView}>Temperature</Text>
           <View style={styles.symptomEditButton}>
             <Button
-              onPress={() => this.showView('temperatureEditView')}
+              onPress={() => this.showView('TemperatureEditView')}
               title={getLabel('temperature', cycleDay.temperature)}>
             </Button>
           </View>
@@ -70,7 +70,7 @@ export default class DayView extends Component {
           <Text style={styles.symptomDayView}>Mucus</Text>
           <View style={styles.symptomEditButton}>
             <Button
-              onPress={() => this.showView('mucusEditView')}
+              onPress={() => this.showView('MucusEditView')}
               title={getLabel('mucus', cycleDay.mucus)}>
             </Button>
           </View>
@@ -79,7 +79,7 @@ export default class DayView extends Component {
           <Text style={styles.symptomDayView}>Cervix</Text>
           <View style={styles.symptomEditButton}>
             <Button
-              onPress={() => this.showView('cervixEditView')}
+              onPress={() => this.showView('CervixEditView')}
               title={getLabel('cervix', cycleDay.cervix)}>
             </Button>
           </View>
@@ -88,7 +88,7 @@ export default class DayView extends Component {
           <Text style={styles.symptomDayView}>Note</Text>
           <View style={styles.symptomEditButton}>
             <Button
-              onPress={() => this.showView('noteEditView')}
+              onPress={() => this.showView('NoteEditView')}
               title={getLabel('note', cycleDay.note)}
             >
             </Button>

components/cycle-day/index.js

@@ -6,16 +6,11 @@ import {
 } from 'react-native'
 import cycleModule from '../../lib/cycle'
 import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
-import DayView from './cycle-day-overview'
-import BleedingEditView from './symptoms/bleeding'
-import TemperatureEditView from './symptoms/temperature'
-import MucusEditView from './symptoms/mucus'
-import CervixEditView from './symptoms/cervix'
-import NoteEditView from './symptoms/note'
-import DesireEditView from './symptoms/desire'
 import { formatDateForViewHeader } from './labels/format'
 import styles from '../../styles'
 import actionButtonModule from './action-buttons'
+import symptomComponents from './symptoms'
+import DayView from './cycle-day-overview'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 
@@ -25,14 +20,32 @@ export default class Day extends Component {
     this.cycleDay = props.navigation.state.params.cycleDay
 
     this.state = {
-      visibleComponent: 'dayView',
+      visibleComponent: 'DayView',
     }
 
-    this.showView = view => {
+    const showView = view => {
       this.setState({visibleComponent: view})
     }
 
-    this.makeActionButtons = actionButtonModule(this.showView)
+    const makeActionButtons = actionButtonModule(showView)
+
+    const symptomComponentNames = Object.keys(symptomComponents)
+    this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
+      acc[curr] = React.createElement(
+        symptomComponents[curr],
+        {
+          cycleDay: this.cycleDay,
+          makeActionButtons
+        }
+      )
+      return acc
+    }, {})
+
+    // DayView needs showView instead of makeActionButtons
+    this.cycleDayViews.DayView = React.createElement(DayView, {
+      cycleDay: this.cycleDay,
+      showView
+    })
   }
 
   render() {
@@ -56,16 +69,7 @@ export default class Day extends Component {
           </Text>
         </View >
         <View>
-          {
+          { this.cycleDayViews[this.state.visibleComponent] }
-            { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
-              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              mucusEditView: <MucusEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              cervixEditView: <CervixEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />,
-              noteEditView: <NoteEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />,
-              desireEditView: <DesireEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />
-            }[this.state.visibleComponent]
-          }
         </View >
       </ScrollView >
     )

components/cycle-day/symptoms/index.js

@@ -0,0 +1,15 @@
+import BleedingEditView from './bleeding'
+import TemperatureEditView from './temperature'
+import MucusEditView from './mucus'
+import CervixEditView from './cervix'
+import NoteEditView from './note'
+import DesireEditView from './symptoms/desire'
+
+export default {
+  BleedingEditView,
+  TemperatureEditView,
+  MucusEditView,
+  CervixEditView,
+  NoteEditView,
+  DesireEditView
+}