sex.js

import React, { Component } from 'react'
import {
  CheckBox,
  Text,
  TextInput,
  View
} from 'react-native'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import {
  sexActivity as activityLabels,
  contraceptives as contraceptiveLabels
} from '../labels/labels'

export default class Sex extends Component {
  constructor(props) {
    super(props)
    this.cycleDay = props.cycleDay
    this.state = {}
    if (this.cycleDay.sex !== null ) {
      Object.assign(this.state, this.cycleDay.sex)
      // We make sure other is always true when there is a note,
      // e.g. when import is messed up.
      if (this.cycleDay.sex && this.cycleDay.sex.note) {
        this.state.other = true
      }
    }
  }

  render() {

    return (
      <View style={styles.symptomEditView}>
        <Text style={styles.symptomDayView}>SEX</Text>
        <View style={styles.symptomViewRowInline}>
          <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
          <CheckBox
            value={this.state.solo}
            onValueChange={(val) => {
              this.setState({solo: val})
            }}
          />
          <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
          <CheckBox
            value={this.state.partner}
            onValueChange={(val) => {
              this.setState({partner: val})
            }}
          />
        </View>
        <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
        <View style={styles.symptomViewRowInline}>
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.condom}
          </Text>
          <CheckBox
            value={this.state.condom}
            onValueChange={(val) => {
              this.setState({condom: val})
            }}
          />
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.pill}
          </Text>
          <CheckBox
            value={this.state.pill}
            onValueChange={(val) => {
              this.setState({pill: val})
            }}
          />
        </View>
        <View style={styles.symptomViewRowInline}>
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.iud}
          </Text>
          <CheckBox
            value={this.state.iud}
            onValueChange={(val) => {
              this.setState({iud: val})
            }}
          />
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.patch}
          </Text>
          <CheckBox
            value={this.state.patch}
            onValueChange={(val) => {
              this.setState({patch: val})
            }}
          />
        </View>
        <View style={styles.symptomViewRowInline}>
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.ring}
          </Text>
          <CheckBox
            value={this.state.ring}
            onValueChange={(val) => {
              this.setState({ring: val})
            }}
          />
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.implant}
          </Text>
          <CheckBox
            value={this.state.implant}
            onValueChange={(val) => {
              this.setState({implant: val})
            }}
          />
        </View>
        <View style={styles.symptomViewRowInline}>
          <Text style={styles.symptomDayView}>
            {contraceptiveLabels.other}
          </Text>
          <CheckBox
            value={this.state.other}
            onValueChange={(val) => {
              this.setState({
                other: val,
                focusTextArea: true
              })
            }}
          />
        </View>
        { this.state.other &&
          <TextInput
            autoFocus={this.state.focusTextArea}
            multiline={true}
            placeholder="Enter"
            value={this.state.note}
            onChangeText={(val) => {
              this.setState({note: val})
            }}
          />
        }
        <View style={styles.actionButtonRow}>
          {this.props.makeActionButtons(
            {
              symptom: 'sex',
              cycleDay: this.cycleDay,
              saveAction: () => {
                const copyOfState = Object.assign({}, this.state)
                if (!copyOfState.other) {
                  copyOfState.note = null
                }
                saveSymptom('sex', this.cycleDay, copyOfState)
              },
              saveDisabled: Object.values(this.state).every(value => !value)
            }
          )}
        </View>
      </View>
    )
  }
}