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 eb33201d..78e24793 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 0b476f5b..fc4ebbf3 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 70175834..94bb51e4 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 00000000..029bb896
--- /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
--
GitLab