cholesterol form

file.js

import React, { Component, PropTypes } from 'react';
import {
  View,
  ScrollView,
  Image,
} from 'react-native';
import { styles } from './styles';
import { UIDropdown } from '../../../ui-dropdown';
import { UIInputText } from '../../../ui-input-text';

const UNIT_MGDL = '0';
const UNIT_MMOLL = '1';
const MEDICATION_NO = '0';
const MEDICATION_YES = '1';
const CONST_MGDL_TO_MMOLL = 0.0555;

const listUnits = [
  {
    label: 'mg/dL',
    value: UNIT_MGDL,
  },
  {
    label: 'mmol/L',
    value: UNIT_MMOLL,
  },
];
const listMedication = [
  {
    label: 'No',
    value: MEDICATION_NO,
  },
  {
    label: 'Yes',
    value: MEDICATION_YES,
  },
];

export class CholesterolComponent extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     unit_cholesterol: props.unit_cholesterol !== UNIT_MMOLL ? UNIT_MGDL : UNIT_MMOLL,
  //     cholesterol: props.cholesterol,
  //     ldl: props.ldl,
  //     hdl: props.hdl,
  //     triglycerides: props.triglycerides,
  //     cholesterolMedication: props.cholesterolMedication,
  //   };
  // }
  //
  // componentWillMount() {
  //   this.props.onStateChange({ unit_cholesterol: this.state.unit_cholesterol });
  // }
  //
  // shouldComponentUpdate(nextProps, nextState) {
  //   return this.state.unit_cholesterol !== nextState.unit_cholesterol;
  // }

  handleTotalCholesterolChange(unit, cholesterol) {
    if (unit === UNIT_MGDL) {
      const changes = { cholesterol };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    } else {
      const changes = { cholesterol: cholesterol / CONST_MGDL_TO_MMOLL };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    }
  }

  handleLDLCholesterolChange(unit, ldl) {
    if (unit === UNIT_MGDL) {
      const changes = { ldl };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    } else {
      const changes = { ldl: ldl / CONST_MGDL_TO_MMOLL };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    }
  }

  handleHDLCholesterolChange(unit, hdl) {
    if (unit === UNIT_MGDL) {
      const changes = { hdl };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    } else {
      const changes = { hdl: hdl / CONST_MGDL_TO_MMOLL };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    }
  }

  handleTriglyceridesCholesterolChange(unit, triglycerides) {
    if (unit === UNIT_MGDL) {
      const changes = { triglycerides };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    } else {
      const changes = { triglycerides: triglycerides / CONST_MGDL_TO_MMOLL };
      this.setState(changes, () => { this.props.onStateChange(changes); });
    }
  }

  render() {
    const contextualCholesterol = this.state.unit_cholesterol === UNIT_MGDL ?
      this.state.cholesterol.toFixed(2) : (this.state.cholesterol * CONST_MGDL_TO_MMOLL).toFixed(2);
    const contextualLDL = this.state.unit_cholesterol === UNIT_MGDL ?
      this.state.ldl.toFixed(2) : (this.state.ldl * CONST_MGDL_TO_MMOLL).toFixed(2);
    const contextualHDL = this.state.unit_cholesterol === UNIT_MGDL ?
      this.state.hdl.toFixed(2) : (this.state.hdl * CONST_MGDL_TO_MMOLL).toFixed(2);
    const contextualTriglycerides = this.state.unit_cholesterol === UNIT_MGDL ?
      this.state.triglycerides.toFixed(2) :
      (this.state.triglycerides * CONST_MGDL_TO_MMOLL).toFixed(2);
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={{ flex: 1, paddingLeft: 16, paddingRight: 16 }}>
            <View style={{ alignItems: 'center', paddingTop: 36, paddingBottom: 48 }}>
              <Image
                source={require('./assets/ic_Fasting_Blood_Glucose.png')} // eslint-disable-line
                style={styles.imageStep6}
              />
            </View>
            <UIDropdown
              selectedValue={this.state.unit_cholesterol}
              onValueChange={(inputUnit) => {
                const changes = { unit_cholesterol: inputUnit };
                this.setState(changes);
                this.props.onStateChange(changes);
              }}
              list={listUnits}
              label="Units"
              defaultLabel="Please Select"
              dropdownStyle={{ color: 'rgba(0,0,0,0.84)' }}
            />
            <UIInputText
              label="Total Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              keyboardType="numeric"
              defaultValue={this.state.cholesterol && contextualCholesterol.toString()}
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              questionTitle="Total Cholesterol"
              questionText="Cholesterol plays a key role in the development of cardiovascular
                disease. Higher levels are associated with a higher risk for coronary heart disease,
                a major cause of death in Asia."
              onChangeText={(inputText) => {
                this.handleTotalCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="LDL Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.ldl && contextualLDL.toString()}
              questionTitle="LDL Cholesterol"
              questionText="LDL cholesterol is often referred to as 'bad cholesterol'. Higher LDL
                levels put you at greater risk for a heart attack from a sudden blood clot that
                forms in your blood vessels."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleLDLCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="HDL Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.hdl && contextualHDL.toString()}
              questionTitle="HDL Cholesterol"
              questionText="With HDL cholesterol, higher levels deemed healthier. Low HDL
                cholesterol increases you risk for heart disease. Smoking, being overweight, and
                sedentary behavior all contribute to a decrease in HDL cholesterol."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleHDLCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="Triglyceride Level"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.triglycerides && contextualTriglycerides.toString()}
              questionTitle="Triglyceride Level"
              questionText="Triglycerides are a type of fat (lipid) found in the blood. Elevated
                levels of triglycerides can increase the risk of heart disease."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleTriglyceridesCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIDropdown
              selectedValue={this.state.cholesterolMedication}
              onValueChange={(inputMedication) => {
                const changes = { cholesterolMedication: inputMedication };
                this.setState(changes);
                this.props.onStateChange(changes);
              }}
              list={listMedication}
              label="Any medications to control your blood cholesterol levels?"
              defaultLabel="Please Select"
              useQuestionMark
              questionTitle="Medication Cholesterol"
              questionText="For example: Advicor, Crestor, Lipitor, Mevacor, Niaspan, Pravachol,
                Simcor, Vytorin, Zetia, Zocor."
              dropdownStyle={{ color: 'rgba(0,0,0,0.84)' }}
            />
          </View>
        </ScrollView>
        <ScrollView>
          <View style={{ flex: 1, paddingLeft: 16, paddingRight: 16 }}>
            <View style={{ alignItems: 'center', paddingTop: 36, paddingBottom: 48 }}>
              <Image
                source={require('./assets/ic_Fasting_Blood_Glucose.png')} // eslint-disable-line
                style={styles.imageStep6}
              />
            </View>
            <UIDropdown
              selectedValue={this.state.unit_cholesterol}
              onValueChange={(inputUnit) => {
                const changes = { unit_cholesterol: inputUnit };
                this.setState(changes);
                this.props.onStateChange(changes);
              }}
              list={listUnits}
              label="Units"
              defaultLabel="Please Select"
              dropdownStyle={{ color: 'rgba(0,0,0,0.84)' }}
            />
            <UIInputText
              label="Total Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              keyboardType="numeric"
              defaultValue={this.state.cholesterol && contextualCholesterol.toString()}
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              questionTitle="Total Cholesterol"
              questionText="Cholesterol plays a key role in the development of cardiovascular
                disease. Higher levels are associated with a higher risk for coronary heart disease,
                a major cause of death in Asia."
              onChangeText={(inputText) => {
                this.handleTotalCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="LDL Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.ldl && contextualLDL.toString()}
              questionTitle="LDL Cholesterol"
              questionText="LDL cholesterol is often referred to as 'bad cholesterol'. Higher LDL
                levels put you at greater risk for a heart attack from a sudden blood clot that
                forms in your blood vessels."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleLDLCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="HDL Cholesterol"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.hdl && contextualHDL.toString()}
              questionTitle="HDL Cholesterol"
              questionText="With HDL cholesterol, higher levels deemed healthier. Low HDL
                cholesterol increases you risk for heart disease. Smoking, being overweight, and
                sedentary behavior all contribute to a decrease in HDL cholesterol."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleHDLCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIInputText
              label="Triglyceride Level"
              unit={this.state.unit_cholesterol === UNIT_MGDL ? 'mg/dL' : 'mmol/L'}
              useBorderBottom
              useQuestionMark
              selectTextOnFocus
              keyboardType="numeric"
              defaultValue={this.state.triglycerides && contextualTriglycerides.toString()}
              questionTitle="Triglyceride Level"
              questionText="Triglycerides are a type of fat (lipid) found in the blood. Elevated
                levels of triglycerides can increase the risk of heart disease."
              inputStyle={{ color: 'rgba(0,0,0,0.84)' }}
              onChangeText={(inputText) => {
                this.handleTriglyceridesCholesterolChange(
                  this.state.unit_cholesterol,
                  parseFloat(inputText),
                );
              }}
            />
            <UIDropdown
              selectedValue={this.state.cholesterolMedication}
              onValueChange={(inputMedication) => {
                const changes = { cholesterolMedication: inputMedication };
                this.setState(changes);
                this.props.onStateChange(changes);
              }}
              list={listMedication}
              label="Any medications to control your blood cholesterol levels?"
              defaultLabel="Please Select"
              useQuestionMark
              questionTitle="Medication Cholesterol"
              questionText="For example: Advicor, Crestor, Lipitor, Mevacor, Niaspan, Pravachol,
                Simcor, Vytorin, Zetia, Zocor."
              dropdownStyle={{ color: 'rgba(0,0,0,0.84)' }}
            />
          </View>
        </ScrollView>
      </View>
    );
  }
}

CholesterolComponent.defaultProps = {
  unit_cholesterol: UNIT_MGDL,
  cholesterol: null,
  ldl: null,
  hdl: null,
  triglycerides: null,
  cholesterolMedication: '',
  onStateChange: () => {},
};

CholesterolComponent.propTypes = {
  unit_cholesterol: PropTypes.string,
  cholesterol: PropTypes.number,
  ldl: PropTypes.number,
  hdl: PropTypes.number,
  triglycerides: PropTypes.number,
  cholesterolMedication: PropTypes.string,
  onStateChange: PropTypes.func,
};

export default CholesterolComponent;