Create components and lib folder

2018-06-28 10:58:56 +02:00
parent 35f39291b8
commit 46040f1a77
12 changed files with 25 additions and 25 deletions
@@ -0,0 +1,102 @@
+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'
+import { saveBleeding } from '../db'
+import { bleeding as labels } from '../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>
+    )
+  }
+}
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import { Calendar } from 'react-native-calendars'
+import * as styles from '../styles'
+import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
+
+export default class CalendarView extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }
+
+    this.setStateWithCalendarFormattedDays = (function (CalendarComponent) {
+      return function() {
+        CalendarComponent.setState({
+          bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate)
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCalendarFormattedDays)
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCalendarFormattedDays)
+  }
+
+  passDateToDayView(result) {
+    const cycleDay = getOrCreateCycleDay(result.dateString)
+    const navigate = this.props.navigation.navigate
+    navigate('cycleDay', { cycleDay })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Calendar
+          onDayPress={ this.passDateToDayView.bind(this) }
+          markedDates = { this.state.bleedingDaysInCalFormat }
+          markingType = {'period'}
+        />
+      </View>
+    )
+  }
+}
+
+function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) {
+  const shadesOfRed = ['#ffbaba', '#ff7b7b', '#ff5252', '#ff0000']
+  return bleedingDaysSortedByDate.reduce((acc, day) => {
+    acc[day.date] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] }
+    return acc
+  }, {})
+}
@@ -10,8 +10,8 @@ import Svg,{
  Path
 } from 'react-native-svg'
 import { LocalDate } from 'js-joda'
-import { getCycleDay, getOrCreateCycleDay, cycleDaysSortedByDate } from '../db'
-import getCycleDayNumberModule from '../get-cycle-day-number'
+import { getCycleDay, getOrCreateCycleDay, cycleDaysSortedByDate } from '../../db'
+import getCycleDayNumberModule from '../../lib/get-cycle-day-number'
 import styles from './styles'
 import config from './config'

@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text
+} from 'react-native'
+import styles from '../styles'
+import { bleeding as labels} from '../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 >
+    )
+  }
+}
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+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 '../format'
+import styles from '../styles'
+
+const getCycleDayNumber = cycleDayModule()
+
+export default class Day extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.navigation.state.params.cycleDay
+
+    this.state = {
+      visibleComponent: 'dayView',
+    }
+
+    this.showView = view => {
+      this.setState({visibleComponent: view})
+    }
+  }
+
+  render() {
+    const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
+    return (
+      <View style={ styles.cycleDayOuterView }>
+        <View style={ styles.cycleDayDateView }>
+          <Text style={styles.dateHeader}>
+            {formatDateForViewHeader(this.cycleDay.date)}
+          </Text>
+        </View >
+        <View style={ styles.cycleDayNumberView }>
+          { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
+        </View >
+        <View style={ styles.cycleDaySymptomsView }>
+          {
+            { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
+              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
+              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>
+            }[this.state.visibleComponent]
+          }
+        </View >
+      </View >
+    )
+  }
+}
@@ -0,0 +1,91 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text
+} from 'react-native'
+import { LocalDate } from 'js-joda'
+import styles from '../styles'
+import cycleDayModule from '../lib/get-cycle-day-number'
+import { getOrCreateCycleDay, bleedingDaysSortedByDate, deleteAll } from '../db'
+
+const getCycleDayNumber = cycleDayModule()
+
+export default class Home extends Component {
+  constructor(props) {
+    super(props)
+    this.todayDateString = LocalDate.now().toString()
+    const cycleDayNumber = getCycleDayNumber(this.todayDateString)
+
+    this.state = {
+      welcomeText: determineWelcomeText(cycleDayNumber)
+    }
+
+    this.setStateWithCurrentWelcomeText = (function (HomeComponent) {
+      return function () {
+        HomeComponent.setState({
+          welcomeText: determineWelcomeText(getCycleDayNumber(HomeComponent.todayDateString))
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCurrentWelcomeText)
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentWelcomeText)
+  }
+
+  passTodayToDayView() {
+    const todayDateString = LocalDate.now().toString()
+    const cycleDay = getOrCreateCycleDay(todayDateString)
+    const navigate = this.props.navigation.navigate
+    navigate('cycleDay', { cycleDay })
+  }
+
+  render() {
+    const navigate = this.props.navigation.navigate
+    return (
+      <View style={ styles.homeContainerView }>
+        <View style={{flex: 2}}>
+          <View>
+            <Text style={styles.welcome}>{this.state.welcomeText}</Text>
+          </View>
+        </View>
+        <View style={ styles.homeButtonsView}>
+          <View>
+            <Button
+              onPress={() => this.passTodayToDayView()}
+              title="Edit symptoms for today">
+            </Button>
+          </View>
+          <View>
+            <Button
+              onPress={() => navigate('calendar')}
+              title="Go to calendar">
+            </Button>
+          </View>
+          <View>
+            <Button
+              onPress={() => navigate('chart')}
+              title="Go to chart">
+            </Button>
+          </View>
+          <View>
+            <Button
+              onPress={() => deleteAll()}
+              title="delete everything">
+            </Button>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+function determineWelcomeText(cycleDayNumber) {
+  const welcomeTextWithCycleDay = `Welcome! Today is day ${cycleDayNumber} of your current cycle`
+  const welcomeText = `Welcome! We don't have enough information to know what your current cycle day is`
+  return cycleDayNumber ? welcomeTextWithCycleDay : welcomeText
+}
+
@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Button,
+  TextInput,
+  Switch
+} from 'react-native'
+
+import { saveTemperature, getPreviousTemperature } from '../db'
+import styles from '../styles'
+
+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>
+    )
+  }
+}