Simplify markup and move symptom screens to symptom dir

components/bleeding.js

@@ -1,102 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Button,
-  Text,
-  Switch
-} from 'react-native'
-import RadioForm from 'react-native-simple-radio-button'
-import styles from '../styles/index'
-import { saveBleeding } from '../db'
-import { bleeding as labels } from '../labels/labels'
-
-export default class Bleeding extends Component {
-  constructor(props) {
-    super(props)
-    this.cycleDay = props.cycleDay
-    this.showView = props.showView
-    let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
-    if (! (typeof bleedingValue === 'number') ){
-      bleedingValue = -1
-    }
-    this.state = {
-      currentValue: bleedingValue,
-      exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false
-    }
-  }
-
-  render() {
-    const bleedingRadioProps = [
-      {label: labels[0], value: 0 },
-      {label: labels[1], value: 1 },
-      {label: labels[2], value: 2 },
-      {label: labels[3], value: 3 },
-    ]
-    return (
-      <View style={ styles.symptomEditView }>
-        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
-          <View style={ styles.symptomEditListedSymptomView }>
-            <View style={{flex: 1}}>
-              <Text style={styles.symptomDayView}>Bleeding</Text>
-            </View>
-            <View style={{flex: 1}}>
-              <RadioForm
-                radio_props={bleedingRadioProps}
-                initial={this.state.currentValue}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({currentValue: itemValue})
-                }}
-              />
-            </View>
-          </View>
-          <View style={ styles.itemsInRowSeparatedView }>
-            <View style={ styles.singleButtonView }>
-              <Text style={ styles.symptomDayView }>Exclude</Text>
-            </View>
-            <View style={ styles.singleButtonView }>
-              <Switch
-                onValueChange={(val) => {
-                  this.setState({exclude: val})
-                }}
-                value={this.state.exclude}
-              />
-            </View>
-          </View>
-        </View>
-        <View style={ styles.itemsInRowSeparatedView }>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => this.showView('dayView')}
-              title="Cancel">
-            </Button>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => {
-                saveBleeding(this.cycleDay)
-                this.showView('dayView')
-              }}
-              title="Delete">
-            </Button>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => {
-                saveBleeding(this.cycleDay, {
-                  value: this.state.currentValue,
-                  exclude: this.state.exclude
-                })
-                this.showView('dayView')
-              }}
-              disabled={ this.state.currentValue === -1 }
-              title="Save">
-            </Button>
-          </View>
-        </View>
-      </View>
-    )
-  }
-}

components/cycle-day-overview.js

@@ -1,83 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Button,
-  Text
-} from 'react-native'
-import styles from '../styles/index'
-import { bleeding as labels} from '../labels/labels'
-import cycleDayModule from '../lib/get-cycle-day-number'
-import { bleedingDaysSortedByDate } from '../db'
-
-const getCycleDayNumber = cycleDayModule()
-
-export default class DayView extends Component {
-  constructor(props) {
-    super(props)
-    this.cycleDay = props.cycleDay
-    this.showView = props.showView
-    this.state = {
-      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
-    }
-
-    this.setStateWithCurrentCycleDayNumber = (function (DayViewComponent) {
-      return function () {
-        DayViewComponent.setState({
-          cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
-        })
-      }
-    })(this)
-
-    bleedingDaysSortedByDate.addListener(this.setStateWithCurrentCycleDayNumber)
-  }
-
-  componentWillUnmount() {
-    bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentCycleDayNumber)
-  }
-
-  render() {
-    const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
-    let bleedingLabel
-    if (typeof bleedingValue === 'number') {
-      bleedingLabel = `${labels[bleedingValue]}`
-      if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
-    } else {
-      bleedingLabel = 'edit'
-    }
-    const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value
-    let temperatureLabel
-    if (typeof temperatureValue === 'number') {
-      temperatureLabel = `${temperatureValue} °C`
-      if (this.cycleDay.temperature.exclude) temperatureLabel = "( " + temperatureLabel + " )"
-    } else {
-      temperatureLabel = 'edit'
-    }
-
-    return (
-      <View style={ styles.symptomEditListedSymptomView }>
-        <View style={ styles.itemsInRowSeparatedView }>
-          <View style={{flex: 1}}>
-            <Text style={styles.symptomDayView}>Bleeding</Text>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => this.showView('bleedingEditView')}
-              title={bleedingLabel}>
-            </Button>
-          </View>
-        </View>
-        <View style={ styles.itemsInRowSeparatedView}>
-          <View style={{flex: 1}}>
-            <Text style={styles.symptomDayView}>Temperature</Text>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => this.showView('temperatureEditView')}
-              title={temperatureLabel}>
-            </Button>
-          </View>
-        </View>
-      </View >
-    )
-  }
-}

components/cycle-day/action-buttons.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  View,
+  Button,
+} from 'react-native'
+import { saveSymptom } from '../../db'
+
+export default function (showView) {
+  return function ({ symptom, cycleDay, saveAction, saveDisabled}) {
+    const buttons = [
+      {
+        title: 'Cancel',
+        action: () => showView('dayView')
+      },
+      {
+        title: 'Delete',
+        action: () => {
+          saveSymptom(symptom, cycleDay)
+          showView('dayView')
+        }
+      }, {
+        title: 'Save',
+        action: () => {
+          saveAction()
+          showView('dayView')
+        },
+        disabled: saveDisabled
+      }
+    ]
+
+    return buttons.map(({ title, action, disabledCondition }, i) => {
+      const style = { flex: 1, marginHorizontal: 10 }
+      if (i === 0) style.marginLeft = 0
+      if (i === buttons.length - 1) style.marginRight = 0
+      return (
+        <View style={style} key={i}>
+          <Button
+            onPress={action}
+            disabled={disabledCondition}
+            title={title}>
+          </Button>
+        </View >
+      )
+    })
+  }
+}

components/cycle-day/index.js

@@ -3,12 +3,13 @@ import {
   View,
   Text
 } from 'react-native'
-import cycleDayModule from '../lib/get-cycle-day-number'
+import cycleDayModule from '../../lib/get-cycle-day-number'
 import DayView from './cycle-day-overview'
-import BleedingEditView from './bleeding'
-import TemperatureEditView from './temperature'
-import { formatDateForViewHeader } from '../labels/format'
-import styles from '../styles/index'
+import BleedingEditView from './symptoms/bleeding'
+import TemperatureEditView from './symptoms/temperature'
+import { formatDateForViewHeader } from './labels/format'
+import styles from '../../styles'
+import actionButtonModule from './action-buttons'
 
 const getCycleDayNumber = cycleDayModule()
 
@@ -24,12 +25,14 @@ export default class Day extends Component {
     this.showView = view => {
       this.setState({visibleComponent: view})
     }
+
+    this.makeActionButtons = actionButtonModule(this.showView)
   }
 
   render() {
     const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
-      <View style={ styles.cycleDayOuterView }>
+      <View>
         <View style={ styles.cycleDayDateView }>
           <Text style={styles.dateHeader}>
             {formatDateForViewHeader(this.cycleDay.date)}
@@ -38,11 +41,11 @@ export default class Day extends Component {
         <View style={ styles.cycleDayNumberView }>
           { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
         </View >
-        <View style={ styles.cycleDaySymptomsView }>
+        <View>
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
-              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
-              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>
+              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
+              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>
             }[this.state.visibleComponent]
           }
         </View >

components/cycle-day/symptoms/bleeding.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Switch
+} from 'react-native'
+import RadioForm from 'react-native-simple-radio-button'
+import styles from '../../../styles'
+import { saveSymptom } from '../../../db'
+import { bleeding as labels } from '../labels/labels'
+
+export default class Bleeding extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
+    if (!(typeof bleedingValue === 'number')) {
+      bleedingValue = -1
+    }
+    this.state = {
+      currentValue: bleedingValue,
+      exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false
+    }
+  }
+
+  render() {
+    const bleedingRadioProps = [
+      { label: labels[0], value: 0 },
+      { label: labels[1], value: 1 },
+      { label: labels[2], value: 2 },
+      { label: labels[3], value: 3 },
+    ]
+    return (
+      <View style={styles.symptomEditView}>
+        <Text style={styles.symptomDayView}>Bleeding</Text>
+        <View style={{marginTop: 15}}>
+          <RadioForm
+            radio_props={bleedingRadioProps}
+            initial={this.state.currentValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentValue: itemValue })
+            }}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons(
+            {
+              symptom: 'bleeding',
+              cycleDay: this.cycleDay,
+              saveAction: () => {
+                saveSymptom('bleeding', this.cycleDay, {
+                  value: this.state.currentValue,
+                  exclude: this.state.exclude
+                })
+              },
+              saveDisabled: this.state.currentValue === -1
+            }
+          )}
+        </View>
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/temperature.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  TextInput,
+  Switch
+} from 'react-native'
+
+import { getPreviousTemperature, saveSymptom } from '../../../db'
+import styles from '../../../styles'
+import { LocalTime, ChronoUnit } from 'js-joda'
+
+export default class Temp extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    let initialValue
+
+    if (this.cycleDay.temperature) {
+      initialValue = this.cycleDay.temperature.value.toString()
+      this.time = this.cycleDay.temperature.time
+    } else {
+      const prevTemp = getPreviousTemperature(this.cycleDay)
+      initialValue = prevTemp ? prevTemp.toString() : ''
+    }
+
+    this.state = {
+      currentValue: initialValue,
+      exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false
+    }
+  }
+
+  render() {
+    const cycleDay = this.cycleDay
+    return (
+      <View style={styles.symptomEditView}>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+          <TextInput
+            style={styles.temperatureTextInput}
+            placeholder="Enter"
+            onChangeText={(val) => {
+              this.setState({ currentValue: val })
+            }}
+            keyboardType='numeric'
+            value={this.state.currentValue}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons({
+            symptom: 'temperature',
+            cycleDay: this.cycleDay,
+            saveAction: () => {
+              const dataToSave = {
+                value: Number(this.state.currentValue),
+                exclude: this.state.exclude
+              }
+              if (!cycleDay.temperature || cycleDay.temperature && !cycleDay.temperature.time) {
+                const now = LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString()
+                dataToSave.time = now
+              }
+              saveSymptom('temperature', cycleDay, dataToSave)
+            },
+            saveDisabled: this.state.currentValue === ''
+          })}
+        </View>
+      </View>
+    )
+  }
+}

components/home.js

@@ -49,28 +49,30 @@ export default class Home extends Component {
       <View>
         <Text style={styles.welcome}>{this.state.welcomeText}</Text>
         <View style={styles.homeButtons}>
-          <Button
-            onPress={() => this.passTodayToDayView()}
-            title="Edit symptoms for today">
-          </Button>
-        </View>
-        <View style={styles.homeButton}>
-          <Button
-            onPress={() => navigate('calendar')}
-            title="Go to calendar">
-          </Button>
-        </View>
-        <View style={styles.homeButton}>
-          <Button
-            onPress={() => navigate('chart')}
-            title="Go to chart">
-          </Button>
-        </View>
-        <View style={styles.homeButton}>
-          <Button
-            onPress={() => deleteAll()}
-            title="delete everything">
-          </Button>
+          <View style={styles.homeButton}>
+            <Button
+              onPress={() => this.passTodayToDayView()}
+              title="Edit symptoms for today">
+            </Button>
+          </View>
+          <View style={styles.homeButton}>
+            <Button
+              onPress={() => navigate('calendar')}
+              title="Go to calendar">
+            </Button>
+          </View>
+          <View style={styles.homeButton}>
+            <Button
+              onPress={() => navigate('chart')}
+              title="Go to chart">
+            </Button>
+          </View>
+          <View style={styles.homeButton}>
+            <Button
+              onPress={() => deleteAll()}
+              title="delete everything">
+            </Button>
+          </View>
         </View>
       </View>
     )

components/temperature.js

@@ -1,102 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  Button,
-  TextInput,
-  Switch
-} from 'react-native'
-
-import { saveTemperature, getPreviousTemperature } from '../db'
-import styles from '../styles/index'
-
-export default class Temp extends Component {
-  constructor(props) {
-    super(props)
-    this.cycleDay = props.cycleDay
-    this.showView = props.showView
-    let initialValue
-
-    if(this.cycleDay.temperature) {
-      initialValue = this.cycleDay.temperature.value.toString()
-    } else {
-      const prevTemp = getPreviousTemperature(this.cycleDay)
-      initialValue = prevTemp ? prevTemp.toString() : ''
-    }
-
-    this.state = {
-      currentValue: initialValue,
-      exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false
-    }
-  }
-
-  render() {
-    const cycleDay = this.cycleDay
-    return (
-      <View style={ styles.symptomEditView }>
-        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
-          <View style={ styles.itemsInRowView }>
-            <View style={{flex: 3, margin: 5}}>
-              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
-            </View>
-            <View style={{flex: 1, margin: 5}}>
-              <TextInput
-                placeholder="Enter"
-                onChangeText={(val) => {
-                  this.setState({currentValue: val})
-                }}
-                keyboardType='numeric'
-                value = {this.state.currentValue}
-              />
-            </View>
-          </View>
-          <View style={ styles.itemsInRowSeparatedView }>
-            <View style={{flex: 1, margin: 5}}>
-              <Text style={styles.symptomDayView}>Exclude</Text>
-            </View>
-            <View style={{flex: 1, margin: 5}}>
-              <Switch
-                onValueChange = {(val) => {
-                  this.setState({ exclude: val })
-                }}
-                value = { this.state.exclude }
-              />
-            </View>
-          </View>
-        </View>
-        <View style={ styles.itemsInRowSeparatedView }>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => {
-                this.showView('dayView')
-              }}
-              title="Cancel">
-            </Button>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => {
-                saveTemperature(cycleDay)
-                this.showView('dayView')
-              }}
-              title="Delete">
-            </Button>
-          </View>
-          <View style={ styles.singleButtonView }>
-            <Button
-              onPress={() => {
-                saveTemperature(cycleDay, {
-                  value: Number(this.state.currentValue),
-                  exclude: this.state.exclude
-                })
-                this.showView('dayView')
-              }}
-              disabled={ this.state.currentValue === '' }
-              title="Save">
-            </Button>
-          </View>
-        </View>
-      </View>
-    )
-  }
-}