From 310683c5f80727703130867cd86bbaad6445f1b7 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 2 Aug 2018 09:47:21 +0200
Subject: [PATCH] Programmatically add props to cycle day views

---
 components/cycle-day/action-buttons.js     |  8 ++--
 components/cycle-day/cycle-day-overview.js | 10 ++---
 components/cycle-day/index.js              | 44 ++++++++++++----------
 components/cycle-day/symptoms/index.js     | 15 ++++++++
 4 files changed, 49 insertions(+), 28 deletions(-)
 create mode 100644 components/cycle-day/symptoms/index.js

diff --git a/components/cycle-day/action-buttons.js b/components/cycle-day/action-buttons.js
index eb33201..78e2479 100644
--- a/components/cycle-day/action-buttons.js
+++ b/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
       }
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 0b476f5..fc4ebbf 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/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>
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
index 7017583..94bb51e 100644
--- a/components/cycle-day/index.js
+++ b/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>
-          {
-            { 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]
-          }
+          { this.cycleDayViews[this.state.visibleComponent] }
         </View >
       </ScrollView >
     )
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
new file mode 100644
index 0000000..029bb89
--- /dev/null
+++ b/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
+}
\ No newline at end of file